All projects · UI Components & Interactions
ParticleLab: Interactive Particle Effects Studio
An interactive 2D Canvas and 3D Three.js particle effects studio powered by a zero-allocation Struct-of-Arrays (Float32Array / Uint8Array) physics…
An interactive 2D Canvas and 3D Three.js particle effects studio powered by a zero-allocation Struct-of-Arrays (Float32Array / Uint8Array) physics pool and offscreen sprite-sheet caching. Designers and developers can sculpt, preview, randomise, sequence on a 4-lane timeline, morph into custom logos, and export smooth 60 FPS particle systems as self-contained JavaScript, HTML, and CSS snippets.
- Zero-allocation Struct-of-Arrays (Float32Array / Uint8Array) fixed pool for up to 8,000 particles with O(1) swap-remove recycling and 256-entry value-noise turbulence
- Pre-rendered 64×64 offscreen sprite bank across 7 shapes (Snowflake, Soft Glow, Crisp Circle, Velocity Streak, Confetti Ribbon, Smoke Puff, Ember Spark) and 16 colour stops drawn via drawImage
- 9 natural presets (Snow, Fire, Smoke, Rain, Sparks, Confetti, Fireworks, Magic Dust, Bokeh) with procedural alpine lake, dusk, studio-dark, and transparent-grid backdrops
- Interactive gradient bar with draggable colour stops, Single/Gradient/Random colour modes, harmonious HSL Randomise, and 50-step Undo/Redo history
- Pointer repel/attract force field, Click to Emit (Burst & Fountain modes), rolling FPS + particle count HUD, and automatic Adaptive Quality scaling
- Self-contained runnable JavaScript, HTML, and CSS code generator with single-pass regex syntax highlighting, .js file download, and live Hero integration preview modal
- Bonus lazy-loaded Three.js r169 3D orbit mode (Points + custom additive ShaderMaterial), Logo-to-Particles pixel sampler with spring physics, and 4-lane 10s multi-effect timeline composer
Built with: Canvas 2D, typed-array particle pool, sprite caching, Three.js r169 Points + ShaderMaterial, Vanilla JavaScript