184 Components
Chromatic Aberration Glitch Text
TextSub-pixel RGB channel splitting and high-frequency twitch jitter triggered on hover or continuous loop.
CHROMATIC GLITCH
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/chromatic-aberration-glitch-text.json"
Props
TypeScript props supported by <ChromaticAberrationGlitchText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text string to render with glitch mechanics. |
| trigger | "hover" | "continuous" | "hover" | Trigger condition for RGB displacement. |
| intensity | number | 3 | Offset magnitude in pixels for chromatic channels. |
Key Features
- Opposing cyan and magenta sub-pixel coordinate displacement.
- Hardware-accelerated CSS screen mix-blend channel combination.
- Hover-triggered or continuous ambient glitch modes.
- Zero residual layout shift when settled.
Keyboard & Accessibility
- Hides duplicate offset channel layers from screen readers with aria-hidden='true'.
- Stops glitch motion if user has prefers-reduced-motion configured.