Text Chroma Reveal

A chromatic ribbon sweep that paints each of your headlines cleanly into view.

textchromarevealgradientspectrumheadlineanimationtypography

Overview

Text Chroma Reveal is a React and Tailwind CSS text reveal animation where a band of spectrum colors paints a headline into view, in Next.js or any React app, built on Framer Motion. The ribbon is painted through the letters with background clip, so it is one element with no per letter spans. Pass one phrase or several to rotate with hold and fade timing, start it on scroll, and replay it through a ref. Rotating phrases are announced politely, and reduced motion shows the text directly. Turn on fixedWidth when rotating, or shorter phrases shift the layout.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-chroma-reveal

Usage

Import TextChromaReveal from @/components/wensity/text-chroma-reveal and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextChromaReveal } from "@/components/wensity/text-chroma-reveal";
 2
 3export default function Example() {
 4  return (
 5    <TextChromaReveal
 6      text={["design", "ship", "scale"]}
 7      colors={["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"]}
 8      repeat
 9      fixedWidth
10      className="font-display text-4xl font-semibold"
11    />
12  );
13}

Props

Prop	Type	Default	Description
`text`	string \| string[]	-	Phrase or rotating phrases to reveal.
`as`	"span" \| "p" \| "div" \| "h1"–"h6"	"span"	Tag rendered as the outer element.
`colors`	string[]	spectrum	Chromatic ribbon colors across the reveal band.
`textColor`	string	"currentColor"	Final revealed text color.
`direction`	"ltr" \| "rtl"	"ltr"	Sweep direction across the text.
`duration`	number	1.5	Reveal sweep duration in seconds.
`delay`	number	0	Delay before the sweep starts, in seconds.
`repeat`	boolean	false	Cycle phrases / replay after hold + fade.
`holdDuration`	number	1	Hold fully revealed before fading, in seconds.
`fadeDuration`	number	0.6	Fade-out duration between cycles, in seconds.
`repeatDelay`	number	0.5	Pause after fade before the next sweep, in seconds.
`fixedWidth`	boolean	false	Lock width to the longest phrase so rotating text does not shift layout.
`startOnView`	boolean	true	When true, wait for viewport entry. When false, play on mount.
`once`	boolean	true	Play only once when using viewport trigger.

Featured in React hero section components.