3D CRT Display
What it does
A 3D CRT monitor (GLB model) fills a dark broadcast-room hero, its screen driven by a custom shader with scanlines, RGB mask, vignette and chromatic aberration. The room and the HUD paint before any asset lands; the tube deliberately holds until the cabinet is there to sit in, and fades up with it (or alone, if the model is still in flight after 2.5s). Hovering the channel buttons at the bottom swaps the on-screen texture and fires a GSAP-driven glitch burst (line tearing, noise, RGB split) that decays over 0.75s, while the whole monitor lazily rotates toward the mouse. Framed as 'Nightfeed', a pirate station broadcasting five districts of an imagined neon city.
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | gsap, three |
| Complexity | section |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
How it works
An old cathode-ray monitor floats in the middle of the hero, and its screen looks like a real tube: fine scanlines, the shimmer of a colour grille, darker corners, a faint green phosphor cast and a slight colour fringe. A row of sticker-style buttons sits underneath, one per project. Hover or tap one and the set changes channel: the picture tears into horizontal strips, splits into red, green and blue and fills with static for a split second, then settles on the new image. Move the mouse and the whole monitor turns lazily towards it.
It is built with Three.js, a glTF model of the monitor and one custom shader for the screen. GSAP drives the glitch, the power-on and the smoothing of the parallax.
The screen is a shader
The monitor's own screen is covered by a separate plane cut to a rounded rectangle and fitted into the bezel, with coordinates normalised so the shader can treat it as a full picture. The fragment shader takes an ordinary photograph and degrades it the way a tube would. It samples the red, green and blue channels from slightly different positions for chromatic aberration, adds faint offset ghosts of each channel, darkens the corners, tints and boosts the colour, multiplies by scanlines running across the screen and by a pattern of dark columns that imitates the aperture grille. The photo is cropped to fill the screen like a cover background, so images of any proportion work.
The glitch is one number
Every glitch effect in the shader, the line tearing, the vertical jitter, the stronger colour split and the static, is scaled by a single intensity value. Changing channel sets that value to full and lets a short GSAP tween bring it back to zero with a fast fall-off, so the burst is violent for an instant and gone almost immediately.
The burst and the picture swap are deliberately separate. The burst fires at once, so the set reacts the moment you touch a button, but the picture only changes once that image has been decoded; if the image arrives later, a second burst marks the signal locking in.
Loading is half the craft
The monitor model is the heaviest thing on the page, so its download is started from the document head instead of waiting for the 3D library to load first, and the screen stays dark until the cabinet is in place, with a time limit so a slow connection never leaves an empty room. Shaders are compiled before the reveal, and the channel images are warmed one at a time in idle moments after the model arrives, so they never compete with it for bandwidth.
Performance and mobile
The pixel ratio is capped, the camera pulls back on narrow screens and the buttons wrap. The biggest win is the model file itself, which shrinks dramatically by resizing its textures and dropping unused data; check its size before tuning any code.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 3D CRT Display
## Goal
Build a full-screen hero where a **3D CRT monitor** (an external `.glb` model) floats center-stage, its screen driven by a **custom GLSL shader** that fakes a real cathode-ray tube: scanlines, an RGB aperture-grille mask, a vignette, warm phosphor tint and chromatic aberration. A row of clickable project pills sits at the bottom. **Hovering a pill swaps the on-screen texture and fires a GSAP-driven glitch burst** — horizontal line-tearing, RGB split and static noise that spike to full and **decay to zero over 0.75s**. The whole monitor lazily **parallax-rotates toward the mouse** via a per-frame lerp. The star effect is the shader-based CRT + the glitch-on-swap.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) and `three` (npm). No GSAP plugins are needed — GSAP is used for the glitch burst, for the two power-on tweens, and for `gsap.utils.interpolate()`. Three.js supplies the WebGL scene and the GLTF loader. Plain Vite-style imports:
```js
import gsap from "gsap";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
```
Put the two shader source strings in a sibling module `shaders.js` and import them: `import { vertexShader, fragmentShader } from "./shaders.js";`
## Layout / HTML
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.