Shuffle Text: Free Component by Kopai Studio

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

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.