Colourful Text for React

Colourful Text gives every letter of a word its own colour, no two neighbours alike, and every few seconds a wave runs through it: each letter, as the wave reaches it, blurs and lifts for a moment and comes back in its next colour. It never stops, but it's calm between waves, so the word stays easy to read.

Use it for one word in a headline that should feel playful: a creative tool, a kids' product, a celebration. For a continuous ribbon of colour that rolls through the letters, use Rainbow Text; for your brand's colours flowing as one gradient, Gradient Text; for a wave of light, Shimmering Text. It's CSS only and nothing is random: each letter is clipped to a strip of every colour and a keyframe animation the install adds to your stylesheet steps along it, while a second one hides each change behind the blur. With reduced motion the letters keep their colours and stay still.

Installation

Usage

import { ColourfulText } from "@/components/ui/colourful-text";

<h2>
  The most <ColourfulText text="colourful" /> components you'll find
</h2>

Demos

Colors

colors is the palette, any CSS colours, at least two, including your theme's variables such as var(--primary). Each letter steps through all of them in turn, starting a few colours on from its neighbour. By default it's ten hues at one lightness, darker on a light page and lighter on a dark one.

Timing

duration is how long the letters hold each colour, 4000 ms by default, and stagger the time between one letter changing and the next, 60 ms: a long stagger makes a slow wave you can follow along the word.

Accessibility

Screen readers read the word once, as plain text: the coloured letters are hidden from them, and a visually hidden copy carries the word. Words wrap whole and keep their direction on a right-to-left page. The colours share one lightness by default, so each letter is as readable as the next; in forced-colors mode the letters fall back to the system's text colour. The wave pauses while the pointer is over the text, and with reduced motion it doesn't run.

FAQ

API Reference