WebGL GPU-powered CRT particle generator for mixed media.
Drop any image. Watch it dissolve into a living phosphor field. Record it. Export it. Own it.
CRT GEN converts portraits and images into real-time particle simulations rendered entirely on the GPU. Every dot is a phosphor particle — spring-physics, glow oscillators, neural signal cascades, chromatic velocity aberration. The result looks like something decayed off a cathode ray tube and came back to life.
Built for mixed media artists, creative coders, content creators, and anyone who wants their visuals to feel like they were transmitted from somewhere else.
- WebGL GPU renderer — 45,000 particles, two-pass shader pipeline, additive blending, phosphor persistence trails
- Spring physics — every particle has mass, damping, multi-frequency oscillators, idle twitches
- Neural signal system — traveling sparks cascade between high-luminance hotspots
- Chromatic velocity aberration — fast particles split into orange-red lead and ice-blue trail channels
- Cursor interaction — magnetic force field disturbs the particle field on hover
- Wanderer particles — rogue electrons orbit the image perimeter
- 25+ live controls — every parameter tweakable in real time, no reload needed
- MP4 / WebM export — record direct from GPU canvas with 3-second pre-roll countdown
- Frame export — PNG snapshot at any moment
- Hue shift — rotate the phosphor color across the full spectrum
- Works on any image — JPG, PNG, WEBP — drag, click, or paste
crt-gen.vercel.app — no install, no account, runs in browser
git clone https://github.com/ripfarhan/crtgenerator.git
cd crtgenerator
python -m http.server 3000
# open http://localhost:3000No dependencies. No build step. One HTML file.
Open the ▶ CONTROLS panel on the right edge.
| Section | Controls |
|---|---|
| Render | Persistence (trail length), Point Size, Glow Multiplier, Aberration Strength |
| Motion | Amplitude, Breathe Speed, Twitch Rate, Twitch Strength |
| Cursor | Force Radius, Force Strength, Glow Radius |
| Neural Signals | Emit Rate, Cascade Probability, Signal Boost |
| Wanderers | Speed Multiplier, Impulse |
| Display | Scanlines, Vignette, Flicker, Hue Shift |
| Toggles | Reactive mode, Polarity (invert image) |
| Density | HIGH / MED / LOW particle density |
| Actions | New Image, Export Frame, Rec MP4, Reset Defaults |
- Set duration with the REC DURATION slider (3–30 seconds)
- Hit [ ● REC MP4 ]
- Yellow 3 → 2 → 1 countdown — get your cursor ready
- Red countdown runs — it captures live from the GPU
- File auto-downloads as
.mp4(Chrome) or.webm(Firefox/others)
Everything is in index.html. The architecture:
GLSL Shaders
├── FADE_VS / FADE_FS — phosphor persistence quad (darkens previous frame)
└── PARTICLE_VS / FS — point-sprite glow, 5-layer bloom, chromatic aberration
CPU Physics (Float32Arrays)
├── Spring forces + damping
├── Multi-frequency oscillators (freqA/B/C + phaseA/B/C)
├── Wanderer orbit system
└── Neural signal emitter + cascade
cfg object
└── All live parameters — modify defaults here or wire new sliders
To add a new control: add a slider to the panel HTML → bindSlider('id', 'val-id', 'cfg-key', formatter) → use cfg.yourKey in the render loop.
- Pure WebGL 1.0 (no Three.js, no libraries)
canvas.captureStream()+MediaRecorderfor video exportFloat32Arrayinterleaved GPU buffer — 7 floats per particle[x, y, gv, cursor, wander, velX, velY]- Bayer matrix dithered image sampling
preserveDrawingBuffer: truefor phosphor frame persistence
MIT — do whatever you want with it.
Made with a GPU and too much time.