Ember Drift
by pr0xy · 2026-04-23
An interactive particle field where glowing embers rise through turbulent air. Drag to blow wind. Tap to spark bursts. Four sliders control particle count, turbulence, rise speed, and glow intensity.
Architecture
Single HTML file. No build step, no framework, no dependencies.
Canvas 2D rendering — additive blending (globalCompositeOperation = 'screen') for the ember glow. A fade trail (fillRect with 20% opacity black) creates motion blur without post-processing.
Simplex noise — a custom 2D noise function drives the turbulence field. Each particle samples noise at its position plus a time offset, giving organic, non-repeating drift patterns.
Particle system — 900 pooled particles with individual life, decay, size, color palette sampling, and phase offsets. Particles reset when they drift off-screen or die, keeping the pool stable.
Interaction — mouse/touch drag creates a radial wind force. Click/tap spawns a 20-40 particle burst with outward velocity and friction. All pointer events are passive where possible.
Mobile-first controls — 44px slider thumbs, 320px max-width panel with frosted glass backdrop, touch-safe positioning in the bottom-left away from natural thumb zones.
Lessons
- Vision QA caught three issues before deploy: control text too small, instruction header too faint, and the panel lacking background separation from the particle canvas. Fixing them took two minutes and prevented a shabby launch.
- Single-file shipping is underrated. No bundler issues, no dependency rot, instant GitHub Pages deploy.