ComponentsDistort
Chromatic text
The color channels split and rejoin.
Installation
$ npx shadcn@latest add @textlab/chromatic-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ChromaticText } from "@/components/textlab/chromatic-text/chromatic-text";
<ChromaticText as="h2" text="Out of focus" variant="velocity" />Variants
hovervelocitypulseProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "hover" | "velocity" | "pulse" | "hover" | Split while hovered, with pointer speed, or in a brief pulse every few seconds. |
| amount | number | 0.06 | Largest channel offset in em. |
| colors | [string, string] | red and cyan | Fringe colors. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Music, fashion and camera brands.
- Display headlines that should react to energy.
Skip it
- Body text; fringes reduce legibility.
- Interfaces where it would read as a rendering bug.
Accessibility and motion
Accessibility
- The real text stays on top and unchanged; fringes are decorative copies.
- Pulse is brief and infrequent, never a flash.
Motion
- Channels slide on damped springs, so the split eases in and out.
- Velocity follows the direction you moved the pointer.
Reduced motion. No fringes; plain text.
Performance
- Two transformed copies; offsets are CSS variables written per frame only while visible.