3D / WebGL

3D CRT Display

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: Three.js
Trigger: hover
Duration: 0.75–1.6s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgl-raf
Easing: power3
Complexity: 5/5
Pinned: no
Reduced motion: handled
Libraries: gsap, three, GLTFLoader

mouse-lerped 3D monitor with GSAP glitch burst

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev36,996 chars

# 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 GL…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.