Shadcn.io is not affiliated with official shadcn/ui
Iris Text
Letters revealed via a radial circular mask expanding from each glyph's center with sequential stagger for React applications.
Iris Text preview
Each character opens like a camera iris — a circular clip starts at the center of the glyph and expands outward until the full letter is visible. The reveals are staggered across the string, so the eye reads a smooth left-to-right cascade of opening apertures. It's a very different vibe to a slide-in or a blur reveal: the glyph stays in place from frame one, only its visible area grows. Triggers on viewport entry via IntersectionObserver, so it plays exactly once when the user scrolls to it. Configure stagger, per-letter duration, and className. Ideal for headings, section titles, or hero text where you want a precise, photographic reveal instead of a kinetic one.
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 iris-text text effect into my projectRelated Components
Blur Text
Text animation from blur to focus
Text Reveal
Cinematic clip-path text reveals
Splitting Text
Character, word, or line splitting with timing
Text Generate Effect
Progressive word-by-word generation
Wave Text
Letters undulating along a continuous sine wave
Shimmering Text
Wave-like color shimmer across text
FAQ
Was this page helpful?
Sign in to leave feedback.
Inertia Text
Drag the entire string and watch it slide with momentum, then settle back to origin via spring physics for React applications.
JSON Text
Animated JSON display where keys type in letter-by-letter and values fade in afterward, with proper indentation and syntax-aware coloring for React applications.