Spectrum Text — React Text Effect

A ribbon of daylight sliding through the words: one spectral gradient flows continuously across the type and leans toward the pointer.

View source

Starting live preview

Usage

import { SpectrumText } from "@/components/SpectrumText";

export function Headline() {
  return <h1><SpectrumText text="Everything is light." speed={0.55}
    {...{
      text: "Everything is light.",
      speed: 0.55,
      bandWidth: 220
    }}
  /></h1>;
}

Implementation notes & API

Accepts text, speed, bandWidth, colors (hex string array), disabled, className and style. The text stays a real, selectable label; under reduced motion it rests as a still spectrum. No GPU dependency.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT