Kinetic Text

Playground

Customize the Kinetic Text properties to see different variations.

Installation

Overview

KineticText is designed to bring text to life by applying a wide range of animations to individual segments of a string—be it entire blocks of text, separate lines, words, or even single characters. This allows for sophisticated typographic effects that can enhance user engagement, guide attention, or simply add a polished, dynamic feel to your application.

Functioning

Examples

1. Segmentation: You provide a text string as thechildren prop. The by prop (values: "text", "line", "word","character") tells KineticText how to break this string down into smaller, animatable segments.
2. Individual Animation: Each of these segments is then wrapped in an instance of the Kinetic component. This means every animation type (fadeIn, blurInUp, bounce, elastic, etc.) and feature (like onScroll, loop, startOnView, custom duration) available in Kinetic can be applied to each text segment.
3. Staggering: The stagger prop introduces a small delay between the start of each segment's animation. This creates a beautiful cascading or sequential reveal effect, making the text appear as if it's typing out, fading in word by word, or animating character by character.
4. Layout: For "character" and "word" segmentations,KineticText applies display: flex and flex-wrap: wrap to its main container div. This ensures that the animated segments (which aredivs rendered by Kinetic) flow correctly like text, wrapping lines as needed.
5. Comprehensive Control: You retain full control over the animation through props like animation, duration, delay(which acts as a base delay for the entire sequence), loop,onScroll (with the new offset prop for precise scroll completion),startOnView, once, viewportOptions, and transition. These are passed down and applied to each segment's animation.

Character-by-Character 'Fade In Up' on View

Word-by-Word 'Blur In' on Scroll

Line-by-Line 'Bouncing' Animation with Loop

Full Text 'RotateIn' with Custom Transition

KineticText Props