Shuffle for React

Shuffle spins every letter through a short reel: each one slides sideways through a couple of other letters, the text's own by default, and lands on itself, every other letter first and the rest just behind, so the word seems to deal itself into place. It plays once the text scrolls into view, and again whenever the pointer comes over it.

Use it for a short, bold headline: a product name, a game title, a launch word. To flip glyphs in place instead of sliding them, use Decrypted Text; for zeros and ones, Binary Text. Each letter is a window over a strip of letters slid by a CSS keyframe animation the install adds to your stylesheet, with no animation library; a replay switches the strip to a second copy of the keyframes, which starts it again. With reduced motion the text is plain.

Installation

Usage

import { Shuffle } from "@/components/ui/shuffle";

<h1>
  <Shuffle text="Shuffle" />
</h1>

Demos

Characters

characters is what slides past each letter instead of the text's own letters: digits for an order number, symbols for a password screen. steps is how many slide past before the real letter lands, 2 by default.

Direction

direction is the side the letters slide in from, in the text's reading direction: start, the default, or end. On a right-to-left page start is the right. trigger="mount" plays it as soon as the page shows it.

Order

order is the order the letters land in: alternate, the default, lands every other letter, then the rest once those have mostly landed; random scatters them. duration is one letter's slide, 500 ms by default.

Accessibility

Screen readers read the text once, from a visually hidden copy; the strips are hidden from them. Every letter starts and ends on itself and keeps its own width, so the word reads before, while it waits and after, and the line never shifts. With reduced motion nothing slides.

FAQ

API Reference