Rainbow Text
ProBuilt to be noticed.
A single band of color passes through once, revealing the text behind it.
Installation
npx shadcn add @useplanes/rainbow-text
Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.
Unlock with Planes Pro
$99 once · 118 Pro components · lifetime updates.
<RainbowText as="h1" className="text-6xl font-semibold text-zinc-900 dark:text-zinc-50">
Built to be noticed.
</RainbowText>Examples
Heading and subtitle
Delay the subtitle so the band reaches it after it has crossed the heading.
<RainbowText as="h2" className="text-5xl font-semibold">Built to be noticed.</RainbowText>
<RainbowText as="p" delay={0.9} className="text-zinc-500">Then it settles.</RainbowText>Replay
The sweep plays once per mount. Change the key to play it again.
<RainbowText key={run}>Built to be noticed.</RainbowText>
<button onClick={() => setRun((r) => r + 1)}>Replay</button>Reduced motion
With prefers-reduced-motion the sweep is skipped and the text is visible from the start in its normal color.
<RainbowText>Reduced motion shows plain text.</RainbowText>Use cases
Hero headline
One pass of color across the landing title as the page loads, then it reads as plain type.
Section opener
A heading that catches the eye once as the reader scrolls into the section.
Feature callout
One highlighted phrase inside a heading, wrapped in an inline span.
Launch announcement
A product name or tagline that gets a single moment of color without looping for attention.
