Atmosphere & Particles
Particle systems, atmospheric effects, special effects and audio.
How to create immersive particle effects? These 50 JavaScript particle systems cover every style: starfields, rain, smoke, aurora borealis, fire, confetti and cursor-interactive effects. Each system uses canvas for optimal performance.
Starfield
Starfield moving toward the viewer with depth effect and luminous trails.
Snow Fall
Falling snowflakes with varied sizes, horizontal oscillation and random opacity.
Fire Effect
Rising fire particles with color gradient (yellow to orange to red) and progressive dissipation.
Smoke
Rising smoke with progressive expansion, gentle lateral drift and fade-out transparency.
Attraction Field
Particles attracted to the cursor with force proportional to distance. Lines connecting nearby particles.
Explosion
Click to trigger a colorful particle explosion with gravity, friction and dissipation.
Fireflies
Floating fireflies with individual light pulsation, erratic movement and light halo.
Rain
Raindrops falling diagonally with splash on impact and ground accumulation.
Galaxy Spiral
Spiral galaxy with rotating arms, stars of varied colors and luminous central core.
Trail Effect
Trail of colored particles following the cursor with rotation, shrinking and progressive fading.
Ambient Light Glow
Element emitting a colored ambient light halo via multi-layer box-shadow with progressive spread.
Day/Night Cycle
Smooth transition through a full day/night cycle with animated gradients and moving sun.
Fog Layer
Animated semi-transparent fog drifting across content via pseudo-elements and translateX.
Fireflies
Fireflies floating randomly with soft pulsating glow on dark background, pure CSS.
Northern Lights
Animated aurora borealis with multi-layer gradients, fluid movement and hue rotation.
Dust Motes
Dust particles floating in a light beam with subtle random animations.
Heat Haze
Subtle wavy distortion simulating hot air via animated SVG feTurbulence filter.
Underwater Caustics
Animated light patterns as if beneath the water surface with conic gradients and rising bubbles.
Snow Fall
Realistic snowfall with snowflakes of varied sizes and speeds, gentle wind drift, pure CSS.
Light Leak
Animated film-style light leaks and flares with gradients and mix-blend-mode screen.
Confetti Explosion
Confetti explosion on click.
Morphing Blob
Organic shape that continuously deforms.
Ripple Effect
Wave that propagates from the click point.
Particle Explosion
Particles that explode in all directions.
Liquid Button
Liquid effect that fills the button.
Matrix Rain
Matrix-style code rain effect.
Fireworks
Click to launch fireworks.
Snow Fall
Snowflakes gently falling down.
Starfield
Space travel effect.
Lightning
Random lightning bolts with flash effect.
Frequency Bars
Classic audio bars that react to the beat.
Circular Visualizer
Bars arranged in a circle for a radial effect.
Wave Form
Continuously animated sine wave.
Pulse Ring
Rings that pulse outward to the beat.
Particle Burst
Particles that burst on the beats.
Spectrum Gradient
Bars with dynamic color gradient.
3D Bars
Bars with 3D perspective and shadows.
Blob Morph
Organic blob that deforms to sound.
Line Graph
Animated continuous line with fill.
Neon Glow Bars
Bars with glowing neon effect.
Sound Effects
Click Sound Button
Button with sound feedback generated by Web Audio API on click.
Hover Sound Card
Card that emits a subtle sound on hover via Web Audio API.
Typing Sound Input
Text input with synthetically generated keyboard typing sound on each keystroke.
Notification Chime
Notification with synthesized chime sound and appearance animation.
Slider Tick Sound
Slider with audible ticks on each value change in steps of 10.
Toggle Switch Sound
On/off switch with differentiated sounds for each state.
Scroll Ambient Sound
Ambient sound whose frequency varies based on scroll position.
Drag Feedback Sound
Continuous friction sound during drag, varying with movement speed.
Success/Error Tone
Synthesized success/error sounds using major and minor chords.
Ambient Soundscape
Interactive soundscape: toggle ambient sound layers on and off.
Liquid Metal Shader
Liquid metallic surface in WebGL. Simplified raymarching, Perlin ripples, dynamic light reflection.
Generative Flow Field
Perlin vector field with 5000 particles following the currents. Inspired by the northern lights and ocean currents. Pure Canvas 2D, 60fps.
WebGPU Particle Field
Galaxy of particles rendered in WebGPU: tens of thousands of points animated on the GPU, fluid and luminous. Canvas 2D fallback if the browser doesn't support WebGPU yet.
💡 Perfect for: next-gen hero, premium section background, tech launch page, spectacular loading screen.
WebGPU Spirit Vortex
A swarm of spirits rendered in WebGPU: they drift ambientally then get pulled into a spiral around the cursor, like an opening invocation portal. Canvas 2D fallback if WebGPU is unavailable.
💡 Perfect for: Halloween/mystical hero, invocation portal, premium section background, game intro screen, otherworldly atmosphere.
Snow Globe
Interactive semi-3D snow globe (glass, reflections, depth). Shake it to swirl snow truly contained inside the globe, which falls back down and accumulates on the ground. Customizable scene.
💡 Perfect for: greeting card, Christmas hero, festive easter egg, seasonal product page, interactive message.