Shadcn.io is not affiliated with official shadcn/ui
Foil Text
Holographic foil text with a conic rainbow gradient that rotates with cursor angle or auto-loops, plus a perpendicular highlight band, for React, Next.js, Tailwind CSS, and motion.
Foil Text preview
A pressed-foil sticker rendered in CSS — the kind of iridescent rainbow you see on a holographic Pokémon card or a limited-edition sneaker tag. A high-saturation conic gradient is clipped to the glyphs via background-clip:text, and the gradient's anchor angle tracks the cursor's bearing relative to the text's center using atan2. A second, brighter highlight band rotates perpendicular to the angle, sweeping across the letters as you move and giving the foil its characteristic "catch the light" sparkle. Switch to auto mode for a slow continuous rainbow rotation driven by motion's useTime — perfect for hero copy that doesn't need a cursor to come alive. Tune intensity to dial saturation and contrast for either airy pastel or full-saturation arcade-flyer.
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 foil-text text effect into my projectRelated Components
Gradient Text
Animated linear gradient text with optional neon glow
Shimmering Text
Wave-like color shimmer across text
Chromatic Text
RGB chromatic aberration that follows the cursor
Glitch Text
Cyberpunk RGB separation with clip-path slicing
Neon Text
Neon-sign glow and flicker for headline copy
Iris Text
Per-letter iris reveal with circular clip-path
FAQ
Was this page helpful?
Sign in to leave feedback.