Components•Chromatic text
Components•Chromatic text
Chromatic text
Type that stays perfectly crisp and single-coloured until it moves. Pointer velocity is written into a decaying flow field and the text is sampled along it with a spectral spread, so fast strokes split into colour and settle back to one ink. A soft lens follows the cursor.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/chromatic-textHow to use
import { useRef } from "react";import { ChromaticText, type ChromaticTextHandle } from "@/components/bjork-ui/text/chromatic-text";const ref = useRef<ChromaticTextHandle>(null);<ChromaticText ref={ref} text="Chromatic" intensity={1} // 0 to 2 radius={90} // CSS px, pointer + lens radius decay={0.7} // seconds to settle grain={0.4} // 0 off, scanlines + grain while moving tone="dark"/>ref.current?.pulse(); // one-shot sweep