Kinetic Text

Kinetic Text turns headlines into living type. It fragments your text into letters or words, animates them independently, and then reforms the phrase with premium, staggered motion. Use it for hero lines, section headers, or short statements that need to land with energy—without writing a line of code.

✨ Features & Capabilities

• Animation Modes – Explode & Reform, Wave, Scramble & Resolve.

• Triggers – Start on scroll into view, hover, or page load.

• Granularity – Animate by letters or words (toggle).

• Timing & Physics – Controls for speed, delay/stagger, easing, and repetition (once/loop).

• Scatter Control – Set max translation/rotation distance for the explode/scramble effects.

• Color Transitions – Optional from→to color for animated emphasis.

• Typography Controls – Font, weight, size, line-height, tracking, case, alignment, and max width.

• Layout-Safe – Preserves spacing and reflows cleanly; no layout jump.

• Accessibility – Screen readers read the full phrase; decorative spans are aria-hidden.

• Reduced Motion – Honors prefers-reduced-motion (falls back to subtle fade).

• Performance – GPU transforms only; lightweight and responsive.

🧩 Property Controls

• Text (headline / short phrase)

• Animate By: Letters | Words

• Animation Type: Explode, Wave, Scramble

• Trigger: Scroll | Hover | Load

• Speed (ms), Stagger (ms), Easing

• Scatter Distance (px/deg)

• Color From / To (optional)

• Repeat: Once | Loop

• Typography: Font, Weight, Size, Line Height, Tracking, Align, Case, Max Width

💡 Use Cases

Hero headlines • Section intros • Launch callouts • Portfolio titles • Data/story transitions