22 JavaScript Particles

Typography on the web often suffers from a lack of vitality. We treat words as static information, ignoring their potential to convey wonder. This component injects a sense of “magic” into the reading experience. By combining a kinetic gradient with a randomized particle system, we create a focal point that breathes. It is not just a highlight; it is a celebration of the message, designed to captivate the user’s peripheral vision without overwhelming the content.

This Interactive Typographic Wave Footer combines generative art with functional UI design. It features a field of horizontal lines that behave like a liquid surface, reacting to the user’s cursor with a satisfying ripple effect. Hidden within the wave structure is a 3D-like topographic representation of text (“DICH”), generated by mapping pixel brightness from an off-screen canvas to the vertical position of the lines. It’s a sophisticated way to add depth and interactivity to a page footer or hero section.

This WebGL Voronoi Particle Transition is a cutting-edge visual effect that reimagines the standard image slider. Instead of manipulating DOM elements or simple textures, it converts images into a massive system of particles (one for every pixel). During transitions, these particles are subjected to a mathematical storm driven by Voronoi diagrams, creating a liquid, swirling distortion effect that feels organic and computational.

This Interactive 3D Falling Leaves Shader is a sophisticated WebGL demonstration built with Three.js that showcases efficient rendering of thousands of unique objects. By utilizing InstancedMesh and custom GLSL shaders, it creates a stylized autumn tree where leaves respond to wind, sway realistically, and “die” (fall off) either randomly or through user interaction via raycasting.

This GSAP Sparkle Generate Button adds a touch of magic to standard call-to-action elements. Designed for AI generation tools or creative apps, it features a sophisticated hover effect where particles (dots) spawn and float organically around the button. The animation is driven by GreenSock’s Physics2DPlugin, simulating gravity and velocity for a realistic “dust” movement.

This Sparkle Generate Button adds a touch of delight to AI or creative tools. When hovered, the button doesn’t just change color - it emits a cloud of floating “sparkles” (particles) that drift and rotate. The effect is powered by CSS variables for performance, with a lightweight JavaScript snippet to randomize the particle paths, ensuring the animation feels organic and magical every time.

This Rising Bubbles Particle Background utilizes the tsParticles library to create a soothing, fluid animation reminiscent of carbonated water or an underwater scene. By leveraging the HTML5 Canvas API through a high-level configuration object, it renders performant particles that spawn from the bottom of the viewport and grow until they “pop.”

A Low Poly 3D planet visualization built with Three.js, featuring three rotating layers: a solid core, a wireframe shell, and a floating particle cloud.

A playful recreation of the Bongo Cat meme using SVG and GSAP. It features complex timelines coordinating rapid paw movements, a randomized note particle system colored via CSS variables, and a scrolling terminal code effect using drawSVG logic.

A psychedelic, “breathing” pattern of thousands of glowing dots leaving fading trails, forming recognizable fractal outlines in real-time, with color based on particle lifespan and position.

An interactive “spotlight” effect created with clip-path: circle(), whose position is controlled via CSS variables. JavaScript tracks the cursor and updates the variables inside a requestAnimationFrame loop for a smooth and performant animation.

An example of efficient resource management in Babylon.js - completed particle systems are tracked and completely removed from the scene with the dispose() method, preventing memory leaks.

This full-screen particle system uses the Canvas 2D context to draw short-lived, low-alpha rain streaks, relying on requestAnimationFrame for a performance-optimized background animation.

Dive into an interactive demo using pure JavaScript and Canvas 2D, where mouse movement creates a magnetic field for particles, and clicking triggers an explosion effect, implementing complex element creation and destruction logic.

A spectacular procedural 3D model generation from points using shaders and textures to create a “twinkling” effect. The use of EffectComposer allows for layering multiple post-processing effects like Bloom and RGB Shift, enhancing the visual quality.

Powered by Three.js and Anime.js, this demo showcases complex particle morphing between six different shapes with smooth, procedurally generated transitions and customizable color schemes.

This audio visualizer leverages the Web Audio API to extract frequency data, driving a real-time, responsive 3D starfield and waveform that reacts intensely to the music’s average volume.