CRT Display
A 3D monitor whose curved screen swaps images with a glitch. A GLB monitor model sits in a lit scene and follows the cursor with an eased parallax tilt; a CRT shader draws the tube with scanlines, an aperture-grille mask, vignette, chromatic split, and a noisy RGB tear that spikes whenever the displayed image changes, then decays. Hovering a project name loads that frame; leaving resets to default. Three.js, no animation library.
npx shadcn@latest add https://ui.aryank.space/r/crt-display.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | "…/crt-display/monitor.glb" | Monitor model URL (.glb / .gltf), same-origin or CORS. |
| defaultImage | string | "…/crt-display/default.jpg" | Frame shown at rest and on pointer leave. |
| projects | { label: string; image: string }[] | District / Waypoint / Corridor / Archive / Terminal | Project names and the image each loads on hover. |
| background | string | "#b0b0b0" | Backdrop color behind the monitor. |
| exposure | number | 1.25 | ACES tone-mapping exposure. |
backgroundcolorBackdrop color behind the monitor.
exposuretextACES tone-mapping exposure for the whole scene.
projectstextEach project's name and the frame it loads on hover.
src / defaultImageasset-urlMonitor GLB and the resting frame, hosted through https://ui.aryank.space/assets/crt-display/monitor.glb and the default image.
three