Rainbow Text for React

Rainbow Text fills a word with the whole colour wheel: one continuous ribbon of hues that rolls slowly through the letters, in the reading direction, and loops without a seam. Every hue has the same lightness, so none jumps out, and the colours lighten on a dark page so the word reads in either theme.

Use it for a playful word: a celebration, a launch, a "new" label, a pride banner. For your own brand's colours, use Gradient Text; for letters that each take a colour and swap it now and then, Colourful Text; for a rainbow that turns under the pointer, Foil Text. It's CSS only: the rainbow is clipped to the letters and moved by a keyframe animation the install adds to your stylesheet, with no animation library. With reduced motion the rainbow holds still.

Installation

Usage

import { RainbowText } from "@/components/ui/rainbow-text";

<h2>
  Made for <RainbowText text="everyone" />
</h2>

Demos

Intensity

intensity is how saturated the colours are: subtle for a pastel rainbow, medium by default, strong for a vivid one. Their lightness stays the same, so the text is as readable at every intensity.

Duration

duration is one full turn of the colour wheel through the text, 8000 ms by default: slow enough to read the word while it moves. animate={false} holds the rainbow still.

Accessibility

The text stays real text, read by screen readers and selectable. Each hue has the same lightness, darker on a light page and lighter on a dark one, so the contrast holds across the whole word; in forced-colors mode, where backgrounds are removed, the text falls back to the system's text colour. With reduced motion the colours stay where they are.

FAQ

API Reference