Every icon is a real physics particle: it has mass, velocity, rotational spin, and a collision body. The spatial-hash broad phase keeps it smooth at 300+ particles without touching the main thread layout. Scroll into the section and particles ripple from the momentum — scroll fast enough and the whole field surges.
Key Features
Cursor interaction modes. Three distinct cursor behaviors: Repel scatters particles away from the pointer, Attract pulls them in for a magnetic gathering effect, and Vortex spins particles around the cursor in a swirling orbit. Radius and force are independently tunable, making the interaction feel subtle or dramatic.
Fluid physics. Surface tension clusters nearby particles into liquid droplets. Viscosity blends velocities so the field moves like a thick fluid rather than separate objects. Pressure radius and force push particles apart before they collide, preventing hard stacking. Each parameter is exposed as a control — dial in water, oil, or a bouncy slime feel.
Scroll reactivity. Particles inherit the velocity of the page scroll, so fast scrolling creates a visible wave through the field. The impulse decays naturally over a few frames, snapping back to gravity-driven behavior as the scroll settles.
Speed Opacity. Particles dim at rest and brighten as they accelerate — stationary icons fade into the background while disturbed ones flash to full opacity. The effect makes cursor interaction feel physically charged without any extra animation code.
Canvas-safe. Shows only a solid background color in the Framer editor — no WebGL, no RAF loop, no interference with your design workflow. Simulation starts only in Preview and Published mode.
Customization
Icons: up to 6 custom images (PNG, SVG, WebP). Falls back to 6 built-in geometric shapes if none are set. Optional global tint overlays any color onto all icons.
Appearance: background color, trail/fade alpha (leaves motion blur behind fast particles), speed opacity strength.
Particles: count, min/max size, min/max opacity, rotation toggle and spin speed.
Physics: gravity, damping, bounce, X friction, stiffness, collision padding, pressure radius and force, surface tension, viscosity, cohesion (center pull), rest density, and substep count for accuracy vs. performance tradeoff.
Cursor: mode (repel / attract / vortex), interaction radius, force strength.
Scroll: scroll force multiplier — set to 0 to disable.Best For
Hero sections and full-bleed backgrounds that need kinetic energy. Feature blocks where icons need more than a static grid. Brand pages that showcase logos or product icons in an interactive showcase. Dark-mode landing pages where a glowing particle field sets the mood.
Olexandr Demydov
