Text Shuffle
A character-level text animation that shuffles letters into place for an energetic, arcade-style reveal — perfect for hero sections, headings, and emphasis copy.
Make it with Workshop
Build your own component with AI
A character-level text animation that shuffles letters into place for an energetic, arcade-style reveal — perfect for hero sections, headings, and emphasis copy.
Make it with Workshop
Build your own component with AI
Text Shuffle brings playful energy and motion to typography by shuffling individual characters before resolving into the final text. It’s bold, eye-catching, and effortless to use — ideal for moments on your website where words need personality and impact.
The component uses Framer Motion under the hood for buttery-smooth performance and supports multiple shuffle modes, directions, and timing presets. You decide when the animation triggers — on view, on hover, or automatically looping — making it usable across hero sections, headings, taglines, and highlight statements.
Character-level shuffle animation powered by Framer Motion
Automatically selects a portion of characters per word for visual balance
Multiple shuffle modes: Linear, Random, and Even/Odd
Shuffle direction control: Left or Right
Looping with configurable delay between loops
Trigger on view (once or always) and on-hover retrigger
Fully responsive and wrap-aware — ideal for long headings
Text content and typography via Font control
Shuffle direction, duration, stagger, and max delay
Shuffle count (number of shuffles per character)
Shuffle mode: Linear / Random / Even-Odd
Colours for initial and final states
Trigger settings: On View / On Hover / Looping / Loop Delay
1. Drop the Text Shuffle component onto your canvas
2. Enter your headline or content in the Text field
3. Play with the properties, and you're done!
After completing your purchase, you will receive a link to the component.
Copy the URL and paste it into your Framer project to import it.
