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
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
Kopai Studio
