Scrambleshuffle_Text

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.