Polka Dots — Lab — Carter Ogunsola

A grid of dots run as one spring integration on a single ticker — the cursor repels and blooms them, a click sends a ripple through the field, and a slow wave keeps it breathing at rest.

Dependencies

GSAP Core — ticker, elastic ease

A field that flinches

A grid of dots sitting still at a low gray. Move the cursor through them and they scatter out of its way, harder if you swipe fast, swelling and darkening to full ink as it passes. Click, and a ring pushes out through the whole field like a drop hitting water. Leave it alone and it doesn’t go dead: a slow wave keeps it breathing.

One loop, not ten thousand tweens

The version this comes from (an old Webflow study) gave every dot its own GSAP tween and rebuilt them every frame. That falls over a few hundred dots in. Here the whole field is one integration on a single gsap.ticker: each dot is a small damped spring anchored to its home cell, and one pass advances all of them and paints them to a canvas. No per-dot tweens, no DOM. It’ll carry thousands of dots without noticing.

Each dot only ever does three things: get pulled back home (SPRING 0.055), get shoved by whatever’s near it, and shed a little speed to friction (0.82) so it settles instead of ringing forever.

Repel, bloom, ripple

The cursor does two jobs at once. It repels — every dot within REPEL_R (116px) gets pushed along the line away from the pointer, and the faster you’re moving the harder the shove, so a dot doesn’t just dodge the cursor, it gets flicked by a fast one. And it blooms: that same nearness swells the dot’s radius (up to about ×3) and lifts it from the resting 0.2 alpha toward full ink, so a fat bright cluster follows your hand across a quiet field.

A click drops a ripple: a ring that expands at 620px/s, shoving dots outward as its edge crosses them and fading as it travels. The idle wave is quieter still — two sines nudging each dot’s home cell, so even untouched the grid drifts a couple of pixels and never looks frozen.

It’s all one ink color, read from --ink and re-read when you flip the site theme, so on a dark page the dots invert with everything else.

Make it yours

REPEL_R / PUSH — how far the cursor’s wake reaches, and how hard it shoves.
BLOOM — how much dots swell and brighten near the pointer. Set it to 0 for pure displacement, no glow.
SPRING / FRICTION — the recovery. A stiffer spring snaps home faster; less friction lets them overshoot and wobble.

Nothing here knows it’s a dot

Each one only tracks a home, a velocity, and whatever pushed it this frame. The crowd behavior (the wake that trails the cursor, the expanding ring, the breathing at rest) all falls out of running that one tiny rule across the whole grid at once. Cheap parts, run together, read as alive. (Reduced-motion callers get the field with the physics off: still, even, no wave.)

Setup

<!-- GSAP (from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --ink: #1e1e1e;
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Style

.pd {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
}

.pd canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

Script

const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
const SPACING = 34;
const DOT_R = 2.4;
const REST_ALPHA = 0.2;
const VEL_PUSH = 0.16;
const WAVE = 2.4;
const RIPPLE_SPEED = 620;
const RIPPLE_WIDTH = 90;
const RIPPLE_PUSH = 3.4;
const DEFAULTS = {
  repelR: 116,

  push: 0.9,

  bloom: 2.1,

  pull: { stiffness: 0.055, damping: 0.18, mass: 1 }
};
const STYLE_ID = "exp-polka-style";
const CSS = `
.pd {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
}

.pd canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
`;
function injectStyle() {
  if (document.getElementById(STYLE_ID)) return;
  const el = document.createElement("style");
  el.id = STYLE_ID;
  el.textContent = CSS;
  document.head.appendChild(el);
}
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const P = { ...DEFAULTS };
    const wrap = document.createElement("div");
    wrap.className = "pd";
    const canvas = document.createElement("canvas");
    wrap.appendChild(canvas);
    root.appendChild(wrap);
    const ctx = canvas.getContext("2d");
    let ink = [30, 30, 30];
    const resolveInk = () => {
      const probe = document.createElement("span");
      probe.style.cssText = "color:var(--ink);position:absolute;visibility:hidden";
      wrap.appendChild(probe);
      const m = getComputedStyle(probe).color.match(/\d+/g);
      probe.remove();
      if (m) ink = [Number(m[0]), Number(m[1]), Number(m[2])];
    };
    resolveInk();
    const themeObs = new MutationObserver(resolveInk);
    themeObs.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme", "class"]
    });
    let dpr = 1;
    let cols = 0;
    let rows = 0;
    let dots = [];
    let W = 0;
    let H = 0;
    const measure = () => {
      W = wrap.clientWidth;
      H = wrap.clientHeight;
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = W * dpr;
      canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const pitch = clamp(Math.min(W, H) / 18, 26, 44);
      const nextCols = Math.max(2, Math.round(W / pitch));
      const nextRows = Math.max(2, Math.round(H / pitch));
      if (nextCols === cols && nextRows === rows && dots.length) {
        const gapX = W / cols;
        const gapY = H / rows;
        dots.forEach((d, i) => {
          const hx = gapX * (i % cols + 0.5);
          const hy = gapY * (Math.floor(i / cols) + 0.5);
          d.x += hx - d.hx;
          d.y += hy - d.hy;
          d.hx = hx;
          d.hy = hy;
        });
        return false;
      }
      cols = nextCols;
      rows = nextRows;
      return true;
    };
    const seed = (bloom) => {
      const gapX = W / cols;
      const gapY = H / rows;
      dots = [];
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const hx = gapX * (c + 0.5);
          const hy = gapY * (r + 0.5);
          dots.push({
            hx,
            hy,
            x: hx,
            y: hy,
            vx: 0,
            vy: 0,
            appear: reduced || !bloom ? 1 : 0
          });
        }
      }
      if (bloom && !reduced) intro();
    };
    const build = (bloom = true) => {
      if (measure()) seed(bloom);
    };
    let introTween = null;
    const intro = () => {
      introTween?.kill();
      if (reduced) return;
      dots.forEach((d) => d.appear = 0);
      introTween = gsap.to(dots, {
        appear: 1,
        duration: 1.1,
        ease: "elastic.out(1, 0.55)",
        delay: 0.15,
        stagger: { each: 35e-4, grid: [rows, cols], from: "center" }
      });
    };
    const mouse = { x: 0, y: 0, px: 0, py: 0, vx: 0, vy: 0, active: false };
    const ripples = [];
    const ac = new AbortController();
    const { signal } = ac;
    const toLocal = (e) => {
      const r = canvas.getBoundingClientRect();
      return { x: e.clientX - r.left, y: e.clientY - r.top };
    };
    wrap.addEventListener(
      "pointermove",
      (e) => {
        const p = toLocal(e);
        mouse.x = p.x;
        mouse.y = p.y;
        if (!mouse.active) {
          mouse.px = p.x;
          mouse.py = p.y;
        }
        mouse.active = true;
      },
      { signal }
    );
    wrap.addEventListener("pointerleave", () => mouse.active = false, { signal });
    wrap.addEventListener(
      "pointerdown",
      (e) => {
        if (reduced) return;
        const p = toLocal(e);
        ripples.push({ x: p.x, y: p.y, radius: 0, strength: RIPPLE_PUSH });
      },
      { signal }
    );
    const tick = (time, dtMs) => {
      const dt = Math.min(dtMs, 40) / 1e3 || 0.016;
      const R2 = P.repelR * P.repelR;
      mouse.vx = mouse.x - mouse.px;
      mouse.vy = mouse.y - mouse.py;
      mouse.px = mouse.x;
      mouse.py = mouse.y;
      for (let i = ripples.length - 1; i >= 0; i--) {
        const rp = ripples[i];
        rp.radius += RIPPLE_SPEED * dt;
        rp.strength *= 0.955;
        if (rp.strength < 0.05 || rp.radius > Math.hypot(W, H)) ripples.splice(i, 1);
      }
      ctx.clearRect(0, 0, W, H);
      const [ir, ig, ib] = ink;
      for (let k = 0; k < dots.length; k++) {
        const d = dots[k];
        const hx = reduced ? d.hx : d.hx + Math.sin(d.hy * 0.02 + time * 12e-4) * WAVE;
        const hy = reduced ? d.hy : d.hy + Math.cos(d.hx * 0.02 + time * 1e-3) * WAVE;
        const springK = P.pull.stiffness / P.pull.mass;
        let ax = (hx - d.x) * springK;
        let ay = (hy - d.y) * springK;
        let bloom = 0;
        if (mouse.active) {
          const dx = d.x - mouse.x;
          const dy = d.y - mouse.y;
          const dd = dx * dx + dy * dy;
          if (dd < R2) {
            const dist = Math.sqrt(dd) || 1;
            const f = 1 - dist / P.repelR;
            const nx = dx / dist;
            const ny = dy / dist;
            ax += nx * f * P.push + mouse.vx * f * VEL_PUSH;
            ay += ny * f * P.push + mouse.vy * f * VEL_PUSH;
            bloom = f;
          }
        }
        for (let ri = 0; ri < ripples.length; ri++) {
          const rp = ripples[ri];
          const dx = d.x - rp.x;
          const dy = d.y - rp.y;
          const dist = Math.hypot(dx, dy) || 1;
          const edge = Math.abs(dist - rp.radius);
          if (edge < RIPPLE_WIDTH) {
            const f = (1 - edge / RIPPLE_WIDTH) * rp.strength;
            ax += dx / dist * f;
            ay += dy / dist * f;
            if (f * 0.4 > bloom) bloom = Math.min(1, f * 0.4);
          }
        }
        const keep = 1 - P.pull.damping;
        d.vx = (d.vx + ax) * keep;
        d.vy = (d.vy + ay) * keep;
        d.x += d.vx;
        d.y += d.vy;
        const rad = DOT_R * (0.4 + 0.6 * d.appear) * (1 + bloom * P.bloom);
        const alpha = d.appear * (REST_ALPHA + bloom * (1 - REST_ALPHA));
        if (alpha < 4e-3 || rad < 0.1) continue;
        ctx.beginPath();
        ctx.arc(d.x, d.y, rad, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${ir},${ig},${ib},${alpha})`;
        ctx.fill();
      }
    };
    build();
    const ro = new ResizeObserver(() => build(false));
    ro.observe(wrap);
    gsap.ticker.add(tick);
    const set = (key, value) => {
      if (key === "pull") {
        if (value && typeof value === "object") P.pull = value;
      } else if (key in P) {
        P[key] = Number(value);
      }
    };
    const destroy = () => {
      ac.abort();
      ro.disconnect();
      themeObs.disconnect();
      gsap.ticker.remove(tick);
      introTween?.kill();
      wrap.remove();
    };
    return { destroy, set };
  }
};
experiment.mount(document.querySelector(".stage"));

Polka Dots

Canvas

Experiment coming soon Loading experiment

Polka Dots — Lab experiment