Scroll Effects Pack — Progressive scroll-driven text animation

Interactive Features

• Scroll-driven character reveal

• Smooth, high-performance animations

• Eight unique text effects for versatile styling

• Configurable animation parameters: speed, spacing, blur, scale, color

The 8 Effects

1. Blur Reveal – Characters start heavily blurred and sharpen progressively.

2. Scale Up – Dramatic 3D scale with perspective, subtle shadows, and zoom-in effect.

3. Kern Tight – Animated letter-spacing for a pulling-together text effect.

4. Type Writer – Classic terminal-style reveal with a blinking caret.

5. Smart Type – Highlights the active word with accent color and underscore caret.

6. Hand Write – Spring-based handwriting animation with rotation and slide-in.

7. Scramble In – Characters cycle through random symbols before revealing the correct text.

8. Magic Text – Characters start scattered and spring back; hover adds scale and color accent.

Customizable Design

• Adjustable blur, scale, and spacing

• Control animation speed and smoothness

• Configurable caret behavior and accent colors

• Fully responsive and ready for production

How It Works

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.