Wensity

Text Spectrum

An animated multi-stop color wash that drifts endlessly through headlines.

textspectrumgradientheadlineanimationtypographycolor
Text Spectrum component preview

Overview

Text Spectrum is a React and Tailwind CSS animated gradient text effect that drifts a multi color wash through a headline, in Next.js or any React app, done in CSS with no dependencies. The colors are a linear gradient clipped to the glyphs and only background position moves, so it stays one real text element. Pass color stops, direction, and speed, ping pong it, or add a spectrum ring. Off screen the drift pauses, and reduced motion leaves a still fill. The first color repeats automatically to close the loop, so do not add it at the end.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add text-spectrum

Usage

Import TextSpectrum from @/components/wensity/text-spectrum 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
import { TextSpectrum } from "@/components/wensity/text-spectrum";


export default function Example() {
  return (
    <TextSpectrum
      text="Wensity UI"
      duration={8}
      direction="horizontal"
      className="font-display text-4xl font-semibold"
    />
  );
}

Featured in React hero section components.