Staggered Particle Blob Effect

This is a Staggered Particle Blob Effect. It clusters multiple DOM nodes into a cohesive, glowing entity that tracks cursor movement. Its function is to provide highly organic, procedural background interaction, replacing static canvases with an ecosystem of independent, mathematically linked elements.

Specs

• Weight: ~15 KB (Anime.js core dependency).
• Performance: Highly optimized. It limits layout thrashing by animating only transform and opacity properties mapped to CSS will-change. The main tracking loop is explicitly throttled to a 15 FPS evaluation rate to save CPU overhead while the actual CSS interpolation remains at 60 FPS.
• Theming / Customization: Grid size, colors (hsl), and spread are easily adjusted via the rows JavaScript variable and Anime.js stagger configuration arrays.
• Responsiveness: Scales dynamically using viewport height (vh) units applied to the root font-size of the container, scaling the internal em values proportionally.
• Graceful Degradation: [!] If JavaScript is disabled, the screen remains completely blank.

Anatomy

The component abandons static HTML for a procedurally generated structure.

• HTML (The Skeleton): A single #creature container. The 169 internal div particles (a 13x13 grid) are generated and injected on the fly via JavaScript.
• CSS (The Skin): Centers the layout using Flexbox. The crucial visual trick is mix-blend-mode: plus-lighter, which cumulatively brightens overlapping nodes. This transforms a flat stack of red circles into a volumetric, glowing light source.
• JS (The Nervous System): Built on Anime.js. It constructs the DOM, assigns initial mathematical offsets (staggers) based on a matrix grid, and runs two distinct animation loops: an automated sine-wave path and a mouse-tracking override.

Logic

The composition: 'blend' property is the engine’s secret weapon:

animate(particuleEls, {
  x: cursor.x,
  y: cursor.y,
  delay: stagger(40, { grid, from }),
  duration: stagger(120, { start: 750, ease: 'inQuad', grid, from }),
  ease: 'inOut',
  composition: 'blend', // This allows the animations to overlap nicely
});

Instead of harshly canceling previous tracking animations when the mouse changes direction, the blend composition mathematically merges the active animation vectors. This prevents stuttering and allows the trailing particles to organically stretch, curve, and snap into place, creating fluid, viscous motion without writing custom physics physics equations.

Feel

Viscous and energetic. When idle, the blob pulses and roams around the screen like a living microorganism. When tracking the cursor, the center mass snaps quickly to the target while the outer edges drag behind with elastic, satisfying weight. The plus-lighter blending creates a distinct visual heat at the core of the mass, making it feel like handling liquid plasma.