Shuffle Text

About this component

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.

Features

• 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

How it works

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.

Best for

• Interactive hero sections

• Navigation links and menus

• Creative landing pages

• Playful hover micro-interactions

Support

For any queries and support, contact kopai.designstudio@gmail.com