Anagram Text for React

Anagram Text turns one word into the next by moving its letters: every letter the two words share slides from its old place to its new one, hopping over the letters going the other way, while the letters they don't share fade out and the new ones fade in. With true anagrams (LISTEN, SILENT, TINSEL) every letter travels and nothing fades. It cycles through its words, holds the width of the longest, and pauses while the pointer is over it.

Use it for a wordplay headline, a logo that rearranges into a tagline, or any word that should seem to think. For words that change in place without moving their letters, use Morph Text; for letters that scramble through random characters before settling, Decrypted Text. A small timer counts the turns and a pure function pairs each letter with the nearest same letter in the word before; CSS keyframe animations the install adds to your stylesheet slide them, with no animation library. With reduced motion the words swap in place.

Installation

Usage

import { AnagramText } from "@/components/ui/anagram-text";

<AnagramText words={["LISTEN", "SILENT", "TINSEL", "ENLIST"]} />

Demos

Phrases

A word can be a few words: a space is a letter like any other and slides to a space. Words of different lengths work too; the extra letters fade, and every word starts at the same edge, so the longest holds the width.

Cell

Every letter has a slot of its own, so it moves by whole slots. They're one character wide, set in your monospaced font by default. For another font, set --anagram-text-cell to a width that fits its widest letter: here a light sans set wide, like display type.

Accessibility

Screen readers read every word once, as a list (LISTEN, SILENT, TINSEL), from a visually hidden copy; the moving letters are hidden from them, so they never hear a word half rearranged. The words stop while the pointer is over them, for anyone reading slowly, and with reduced motion they swap without moving.

FAQ

API Reference