Browse components
CRT Warp
A glowing gradient seen through an old CRT: barrel curvature, scanlines, RGB mask, flicker and a rolling bar. WebGL.
CRT Warp
Installation
npx shadcn@latest add @glint-ui/crt-warpFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/crt-warp.json
Usage
import { CrtWarp } from "@/components/ui/crt-warp";
<div className="relative h-96">
<CrtWarp curvature={0.5} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#1a0b3d","#ff2e88","#ffb347"] | Three gradient colors, bottom to top. |
| speed | number | 1 | Gradient drift speed multiplier. |
| curvature | number | 0.5 | Barrel curvature of the tube. |
| scanlines | number | 0.6 | Scanline darkness. |
| mask | number | 0.5 | RGB aperture mask strength. |
| flicker | number | 0.5 | Flicker and rolling bar strength. |
| className | string | — | Extra classes for the root element. |