Shadcn.io is not affiliated with official shadcn/ui
Rainbow Text
Continuously rolling rainbow gradient text with seamless horizontal panning across the full hue range for React, Next.js, Tailwind CSS, and motion.
Rainbow Text preview
A long horizontal rainbow that perpetually rolls across the glyphs, painted via a single 200%-wide linear-gradient clipped to the text. Unlike per-letter color cycling, the gradient is one continuous ribbon — every letter at any given moment shares a slice of the same arc, so the eye reads a smooth procession of color rather than a noisy palette swap. The pan is driven by motion's useTime + useTransform, so background-position translates frame-perfectly without React re-renders or layout work. Saturation and lightness are exposed as props and tuned by default to stay readable on both light and dark backgrounds — the same rainbow holds its own on a white hero or a near-black gradient. Drop it on a pride banner, a fun-tech CTA, or any place a static gradient feels too still.
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 rainbow-text text effect into my projectRelated Components
Gradient Text
Animated linear gradient with optional neon glow
Colourful Text
Per-character rainbow color cycling with stagger
Foil Text
Holographic conic rainbow that follows the cursor
Shimmering Text
Wave-like color shimmer across text
Chromatic Text
RGB chromatic aberration that follows the cursor
Line Shadow Text
Crisp diagonal line-shadow effect on text
FAQ
Was this page helpful?
Sign in to leave feedback.
Progress Text
Animated number that ramps from a starting value to a target with cubic ease-out and locale-aware formatting, triggered when scrolled into view, built with React, Next.js, and motion/react for stat-driven hero sections.
Redact Text
Black redaction bars over selected words that slide off via clip-path on mount, hover, or click to reveal the hidden copy underneath in React, Next.js, and motion projects.