An old tube screen: curved frame, scanlines, color fringing, flicker and a rolling bar. The pointer pushes a lens of distortion across the glass. Shows an animated test pattern when it has no children.
Channel 03
Test transmission
npx shadcn@latest add https://hyperblur.dev/r/bg-crt-warp.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-crt-warp.tsx.
import { BgCrtWarp } from "@/components/hyperblur/bg-crt-warp"
<div className="relative h-96"><BgCrtWarp><img src="/still.jpg" alt="" className="h-full w-full object-cover" /></BgCrtWarp></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Tint mixed into the test pattern. |
| frameColor | string | "#050505" | Color of the bezel around the curved screen. |
| curvature | number | 0.12 | Amount of barrel curve. 0 gives a flat screen. |
| scanlines | number | 0.24 | Opacity of the scanlines. |
| fringe | number | 1 | Strength of the red and blue color fringe. 0 turns it off. |
| flicker | number | 0.05 | Strength of the brightness flicker. |
| bulge | number | 0.35 | Strength of the lens under the pointer, from 0 to 1. |
| radius | number | 90 | Radius of the lens in pixels. |
| speed | number | 1 | Speed of the pattern, rolling bar and idle drift. |
| children | ReactNode | Content shown behind the glass. Replaces the test pattern. |