01
Tile Grid System
The canvas is divided into a grid of tiles based on the density slider. Each
tile stores four values: opacity, life counter, X offset, and Y offset — packed into a
Float32Array for GPU transfer.
02
WebGPU Compute
A WGSL compute shader dispatches 256-thread workgroups to update every tile
in parallel. It handles opacity recovery (tiles fade back), life decrement, and spring forces that
pull offsets back to zero.
03
Brush Interaction
Mouse and touch input reveal tiles within a circular or square brush radius.
Cursor velocity drives tile offset — fast strokes scatter tiles in the direction of movement,
creating a dynamic shift effect.
04
Audio Reactivity
Web Audio API splits frequencies into bass, mid, and high bands. Bass drives
opacity pulses, mids add warm color tints, highs add cool overlays. Beat detection triggers
auto-reveal bursts at random positions.
05
Canvas 2D Render
Each frame, tiles are drawn from a background canvas with offset-based
source clipping. Audio-driven color overlays are composited per-tile, then a final opacity layer
restores the background where tiles haven’t been revealed.
06
CPU Fallback
When WebGPU isn’t available, a JavaScript loop handles the same
recovery and spring logic on the CPU. The app detects GPU errors at runtime and falls back
transparently — same visuals, just fewer tiles.