What it does
Animates text by scrambling each character before settling on the final letter.
Supports direction-based shuffling, staggered timing, optional color interpolation, hover/in-view triggers, and looping.
How it works
Splits text into characters.
Each character cycles through random symbols (scrambleCharset) shuffleTimes times.
Animation timing is controlled by duration (per character) and stagger (between characters).
Uses useInView to trigger on scroll and hover logic if enabled.
Looping restarts the animation after total duration + loopDelay.
Key features
Triggers: on scroll (once or repeat), on hover, or looped.
Direction: shuffle left or right.
Color: optional transition from colorFrom → colorTo across progress.
Typography: supports Framer Font control (size, weight, spacing, alignment).
Responsive: inline characters with spacing for spaces.
Main props
Text & style: text, color, fontSize, fontWeight, font
Animation: duration, stagger, shuffleTimes, shuffleDirection
Scramble: scrambleCharset
Color transition: enableColorTransition, colorFrom, colorTo
Triggers: triggerOnce, triggerOnHover
Looping: loop, loopDelay
Defaults
Text: “Shuffle Text”
Duration: 0.5s, Stagger: 0.04s, Shuffle times: 3
Direction: right
Color transition: off
Trigger once on view, no loop
Use case
Eye-catching headings or hero text in Framer with fine-grained animation control.
Jules Hq
