Scrambleshuffle_Text

Interactive glitch text & scroll anims.

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.

Interactive glitch text & scroll anims.