WebGL2 particle engine that morphs between images with physics-based mouse interaction. Each image is sampled into a brightness map, then rendered as thousands of glowing particles that scatter, drift, and reassemble into the next frame.
Drop-In Images: Upload any number of images through Framer's native image control. One image stays static; two or more auto-cycle with smooth scatter-and-reassemble transitions.
Physics-Based Hover: Choose how the particles react to your cursor. Repel for a magnetic push, Attract to pull them in, or None for a hands-off look. Tune radius and strength to match the vibe.
Color Control: Set any particle color and background. The component auto-detects whether to use additive glow or standard blending based on contrast. So light particles on dark backgrounds glow beautifully, and dark particles on light backgrounds stay sharp.
Timing Control: Dial in morph duration (0.5s–4s) and hold duration (0.5s–6s) to match the rhythm of your page.
Glow Intensity: Crank it up for a dreamy, blurred look, or dial it down for a crisp, pixel-perfect feel.
Responsive by Default: A built-in ResizeObserver rebuilds the particle grid the moment your layout changes. No manual resizing, no aspect ratio headaches.
Each image is sampled into a brightness map the moment it loads. A WebGL2 vertex shader interpolates between two brightness maps per frame while particles ease from scattered positions back to their home coordinates using sine curves. Mouse forces resolve on the CPU with spring-based damping, then upload as offsets to the GPU. The result: buttery-smooth morphs running at 60fps across thousands of particles, on every device, zero compromises.
Abhrajit Ray
