Chromatic Text — React Text Effect

The pointer is the prism: letters near the cursor split into red and blue fringes while the rainbow underneath slides with it.

View source

Starting live preview

Usage

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

export function Headline() {
  return <h1><ChromaticText text="Split the light." separation={5}
    {...{
      text: "Split the light.",
      separation: 5,
      spectrum: 280
    }}
  /></h1>;
}

Implementation notes & API

Accepts text, separation, spread, spectrum, disabled, className and style. Wrap in a heading for heading semantics. The words stay plain, selectable text for assistive technology; reduced motion gets still text. 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