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"
    />
  );
}

Related components

  • Text Shimmer component preview

    Text Shimmer

    A CSS shimmer sweep for headlines, one single element and entirely GPU-friendly.

  • Text Flip component preview

    Text Flip

    A 3D character flip on hover, staggered and springy across every single letter.

  • Text Morphing component preview

    Text Morphing

    Blur-morphing headlines that cycle phrases with a gooey, seamless crossfade.

  • Text Char Slide component preview

    Text Char Slide

    A per-character slide-left cascade with a cleanly staggered entrance timing.

Featured in React text animations.