Interactive Physics-Based Dot Grid

This is an Interactive Physics-Based Dot Grid. It transforms a static matrix of circular DOM elements into a reactive, liquid-like surface. Its function is to provide an engaging, high-end visual toy or background element where the dots elastically pull toward the user’s cursor on hover, and dramatically explode outward with gravity-based physics upon clicking.

Specs

• Weight: ~90 KB (GSAP Core + Physics2DPlugin dependency).
• Performance: Highly optimized. The script utilizes will-change: transform in CSS and relies entirely on GSAP’s optimized requestAnimationFrame loop for hardware-accelerated translation, avoiding layout thrashing.
• Theming / Customization: The grid size is easily modified via Pug variables (x_max, y_max), and colors/sizing are controlled by CSS variables (--gap, --size, background-color).
• Responsiveness: Centralized via CSS Grid/Flexbox. The JavaScript recalculates the precise center point of every dot (updateCellPositions) dynamically on window resize to ensure the mouse-tracking math remains accurate.
• Graceful Degradation: Fails to a static, perfectly aligned dot grid if JavaScript or GSAP is disabled.

Anatomy

The component creates a dense DOM structure to allow individual particle manipulation.

• HTML (The Skeleton): Written in Pug, it generates a nested loop creating an 11x11 grid of .row and .cell div elements.
• CSS (The Skin): Minimalist. Uses Flexbox to align the rows and cells into a matrix. border-radius: 50% shapes the dots, and user-select: none prevents accidental text highlighting during frantic clicking.
• JS (The Nervous System): The engine room. It caches the initial DOM coordinates of every dot. It runs a pointermove listener to calculate the Pythagorean distance between the cursor and each dot’s center, pulling them inward. A pointerup listener triggers the GSAP Physics2D explosion sequence.

Logic

The standout technical feature is the Elastic Radius Proximity Tracking.

const diff_x = pointer_x - cell.center_position.x;
const diff_y = pointer_y - cell.center_position.y;
const distance = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

if (distance < pull_distance) {
  const percent = distance / pull_distance; 
  gsap.to(cell, {
    duration: 0.2,
    x: diff_x * percent,
    y: diff_y * percent,
  });
} else {
  gsap.to(cell, { x: 0, y: 0, ease: "elastic.out(1, 0.3)" });
}

Instead of applying a blanket hover effect, the code calculates the exact straight-line distance (Math.sqrt(...)) between the mouse and the center of every dot. If a dot falls within the invisible pull_distance radius, it is translated (moved) towards the mouse. The translation amount is multiplied by the percent distance, meaning dots closer to the mouse move less than dots on the edge of the radius, creating an organic, surface-tension-like stretch. When the mouse leaves the radius, the dot snaps back to x:0, y:0 using a physical elastic.out easing curve.

Feel

Liquid, magnetic, and explosive. Moving the cursor through the grid feels like dragging a magnet over iron filings; the dots eagerly pull toward the pointer and satisfyingly twang back into place like plucked guitar strings. Clicking the grid provides a massive kinetic release — the dots burst upward in a staggered wave like a fountain, heavily affected by simulated gravity, before reversing perfectly back into their rigid matrix.