Shadcn.io is not affiliated with official shadcn/ui
Anagram Text
Letter-level rearrangement that physically slides each glyph from its position in the current word to its destination position in the next word with motion spring physics for React and Next.js applications.
Anagram Text preview
An anagram in motion. The component cycles through a list of words and, between any two consecutive words, computes a per-letter mapping: each glyph in the outgoing word that also exists in the incoming word slides to its new position via a spring. Letters that don't have a partner fade out where they are; letters that are new to the next word fade in at their final positions. The layout is driven by a single fixed-width grid so positions stay rigid and the motion stays legible — you read the letters traveling, not the layout reflowing. Built on motion's animate API with a 2D translate per letter, it works gorgeously as a hero-line transformer ("STUDIO" → "OUDITS"), as a tagline morpher, or anywhere you want text that visibly thinks.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the anagram-text text effect into my projectRelated Components
Scrambled Text
Proximity-based character scrambling on hover
Shuffle
Random character shuffling with settling animations
Morph Text
Per-character cross-fade glyph morphing between strings
Rotating Text
Smooth vertical text cycling between strings
Flip Words
3D word flipping with letter-by-letter reveals
Decrypted Text
Matrix-style decryption with character cycling
FAQ
Was this page helpful?
Sign in to leave feedback.
Text Animation Components
Text animation components for React. Typewriter, glitch, gradient, physics-based effects. Copy-paste into your Next.js project.
Annotation Text
Handwritten SVG ink annotations — circle, underline, strikethrough, and arrow — drawn over specific words on view, hover, or mount, with hand-drawn wobble and pathLength stroke reveals for React applications built with Next.js, motion, and Tailwind CSS.