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
John Valentine
