shadcn.io is not affiliated with official shadcn/ui
Chromatic Text splits a line's colours like light through a cheap lens: a red copy slips out on one side of the letters and a cyan one on the other, while the text itself stays crisp on top. By default the split breathes open and shut on its own; it can answer the pointer instead, opening wider the nearer it comes to the middle.
Use it for a headline or a hero word with a photographic or retro-tech feel. For colours that tear in bursts, use Glitch Text; for a soft glow, Neon Text. The copies are multiplied on a light page and screened on a dark one, so the fringes read as ink or as light. The split is a registered CSS property, breathed by a keyframe animation the install adds to your stylesheet or eased by a transition, with no animation library. With reduced motion the split holds still.
Installation
Usage
import { ChromaticText } from "@/components/ui/chromatic-text";<h1>
<ChromaticText text="Out of focus" />
</h1>Demos
Hover
trigger="hover" lets the pointer open the split: shut at rest, wider as the pointer nears the middle of the text, and easing shut when it leaves. Touch doesn't move it.
Intensity
intensity is the widest split: subtle for a faint fringe on body-sized text, medium, or strong for a hero line out of register.
Accessibility
The text is real text, read once by screen readers and selectable; the two colour copies are decorative, hidden from them and from the pointer. In forced-colors mode the copies are dropped. With reduced motion the split stays still, half open, or shut with trigger="hover", and the pointer doesn't move it.
FAQ
Does it work on light and dark pages?
Yes. On a light page the copies multiply, like misregistered print, and where red and cyan overlap they darken; on a dark page they screen, like light, and the fringes glow. It follows your theme's dark class.
Can I change the two colours?
Yes: set --chromatic-text-left and --chromatic-text-right on the text or around it, to any CSS colours. Keep them opposite on the colour wheel, so they read as a split rather than a shadow.
Why is the split widest in the middle?
It answers how close the pointer is to the text's centre, the way an aberration grows as you bring a lens to the eye: wide over the middle, narrower toward the edges, shut when the pointer leaves.
API Reference
ChromaticText
<span> data-slot="chromatic-text"
textstring
The text.
intensity?"subtle" | "medium" | "strong"
How far the colours split at most. @default "medium".
- Type
"subtle" | "medium" | "strong"- Default
"medium"
trigger?"loop" | "hover"
What splits the colours: a slow breath, on its own, or the pointer, wider the nearer it is to the middle of the text.
- Type
"loop" | "hover"- Default
"loop"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--chromatic-text-amountstring--chromatic-text-leftstring
The colour of the copy that slips left (red).
--chromatic-text-rightstring
The colour of the copy that slips right (cyan).
--chromatic-text-splitstring
The widest split (0.06em at medium).
Related
- Pro
Glitch Text
DecorativeColours that tear in bursts
- Pro
Neon Text
DecorativeA soft glow instead of a split
- Pro
Echo Text
DecorativeFainter copies trailing behind
- Pro
Fuzzy Text
DecodeRows of pixels shaking with static
- Pro
Foil Text
DecorativeRainbows that slide with the pointer
- Pro
Line Shadow Text
DecorativeA hatched shadow behind the letters