Shuffle Text
Add a letter shuffle effect to your text on hover. Shuffle Text adds subtle motion while preserving full control over typography. Perfect for curated text micro-interaction
Make it with Workshop
Build your own component with AI
Add a letter shuffle effect to your text on hover. Shuffle Text adds subtle motion while preserving full control over typography. Perfect for curated text micro-interaction
Make it with Workshop
Build your own component with AI
Shuffle Text is a text animation component that allows you to apply a dynamic letter shuffle effect on hover to any text. Perfect for adding subtle motion and interactivity to text elements without disrupting layout or readability.
Shuffle Speed: control how quickly characters are shuffled during the animation
Animation Duration: define the total length of the shuffle effect
Full Font Control: easily manage font family, size, weight, and color directly in Framer
Hover Text Color: choose a dedicated color for the text on hover
Shuffle Order: characters are randomly reordered on hover to create the shuffle effect
Shuffle Text applies a letter shuffle animation on hover to your typography while keeping full control over layout and styling. The component integrates seamlessly with Framer’s text system and supports responsive layouts, making it suitable for both small text elements and larger typographic sections.
For the best visual and readability results, monospaced fonts are recommended: consistent character widths create a smoother, more stable shuffle animation and a more polished visual outcome.
Interactive hero sections
Navigation links and menus
Creative landing pages
Playful hover micro-interactions
For any queries and support, contact kopai.designstudio@gmail.com
