Scroll-driven character reveal
Smooth, high-performance animations
Eight unique text effects for versatile styling
Configurable animation parameters: speed, spacing, blur, scale, color
Blur Reveal – Characters start heavily blurred and sharpen progressively.
Scale Up – Dramatic 3D scale with perspective, subtle shadows, and zoom-in effect.
Kern Tight – Animated letter-spacing for a pulling-together text effect.
Type Writer – Classic terminal-style reveal with a blinking caret.
Smart Type – Highlights the active word with accent color and underscore caret.
Hand Write – Spring-based handwriting animation with rotation and slide-in.
Scramble In – Characters cycle through random symbols before revealing the correct text.
Magic Text – Characters start scattered and spring back; hover adds scale and color accent.
Adjustable blur, scale, and spacing
Control animation speed and smoothness
Configurable caret behavior and accent colors
Fully responsive and ready for production
The component tracks scroll progress within a container and maps it to each character’s animation state. Characters are wrapped in AnimatedElement components that receive their index and the current scroll progress. Selected effect transforms (opacity, blur, scale, position, color) are applied to create a polished, interactive reveal experience.
Scroll-driven character reveal
Smooth, high-performance animations
Eight unique text effects for versatile styling
Configurable animation parameters: speed, spacing, blur, scale, color
Blur Reveal – Characters start heavily blurred and sharpen progressively.
Scale Up – Dramatic 3D scale with perspective, subtle shadows, and zoom-in effect.
Kern Tight – Animated letter-spacing for a pulling-together text effect.
Type Writer – Classic terminal-style reveal with a blinking caret.
Smart Type – Highlights the active word with accent color and underscore caret.
Hand Write – Spring-based handwriting animation with rotation and slide-in.
Scramble In – Characters cycle through random symbols before revealing the correct text.
Magic Text – Characters start scattered and spring back; hover adds scale and color accent.
Adjustable blur, scale, and spacing
Control animation speed and smoothness
Configurable caret behavior and accent colors
Fully responsive and ready for production
The component tracks scroll progress within a container and maps it to each character’s animation state. Characters are wrapped in AnimatedElement components that receive their index and the current scroll progress. Selected effect transforms (opacity, blur, scale, position, color) are applied to create a polished, interactive reveal experience.
