# Interactive Dot Grid Background

> A background layer of springy dots: the pointer parts the field, a fast flick throws a V-shaped wake, and a click sends a ring through the grid.

Canonical: https://gsapvault.com/effects/interactive-dot-grid
Live demo: https://gsapvault.com/demos/interactive-dot-grid/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | canvas, spring-physics, velocity-reactive, pointer-interaction, shockwave, ambient, touch-interaction |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 7 October 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A drop-in background of a few thousand dots, each one tethered to its place in a grid by a spring. Move the pointer slowly and the field parts around it: nearby dots lean away, swell slightly and pick up the accent colour. Flick across it and the dots behind the motion are thrown aside in a V-shaped wake, scaled to how fast you moved, which then settles home with a small overshoot, the far dots last.

Click or tap anywhere to send a ring out through the grid, a travelling band of displacement and swelling dots that fades with distance. With nothing happening, a slow breathing ripple runs through the dot sizes so the page never looks frozen. Any element marked as a calm zone quiets the dots behind it, so headlines and body copy always sit on a quiet patch.

## Features

- Every dot is its own spring, so the field moves as a material rather than a hover radius
- Speed-scaled wake: a slow pass parts the dots, a hard flick throws a V that settles with about 2% overshoot
- Click or tap sends a ring of displacement and swelling dots through the field
- Calm zones: dots behind your headline shrink and respond at a quarter strength, feathered at the edges
- Slow ambient breathing at rest, with an off switch
- Colours come from CSS custom properties, so the field restyles without touching JavaScript
- One intensity knob from 0 to 1 scales every response
- Pauses itself off screen and in background tabs, and stops entirely once the field has settled with breathing off
- Touch drag drives the same pointer body on phones, with a gentle autonomous drift between touches
- Keyboard path: Enter sends a ring, arrow keys move the point
- Reduced motion shows a composed still with a single frozen ring

## Use Cases

- SaaS and product heroes that need a living background without a video or WebGL
- Data, sensor and mapping products where a grid of points says something about the product
- Portfolio and studio landing pages that want texture behind large serif type
- Waitlist and launch pages where a click anywhere should feel like it does something

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

The field is drawn on a single 2D canvas. Each dot is a damped spring tied to its grid point, and the pointer is a body with its own mass and momentum that chases the real cursor or finger. Dots near the body are pushed away in proportion to distance, and when the body is moving fast they are also shoved sideways off its path, which is what opens the wake behind a flick. The springs are tuned just below critical damping, so they return with a slight overshoot.

GSAP owns the media queries for touch and reduced motion, the teardown, and the ring envelope: each click plays a GSAP tween that the animation loop reads as the ring travels. The loop owns the springs and the pointer body, and runs on the GSAP ticker so everything shares one clock. It sleeps while the field is off screen, while the tab is hidden, and once every dot has settled with breathing turned off.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

_Code snippet omitted: it ships with the download._

**2. Add before the closing `</body>` tag:**

_Code snippet omitted: it ships with the download._

**3. Put the layer inside any positioned container (HTML):**

_Code snippet omitted: it ships with the download._

The layer fills its parent with `position: absolute; inset: 0`, so it works at any size: a full-viewport hero, a card or a footer band.

### Using It With Your Own Design

**What the effect needs from your markup:** an element with the class `dot-grid` whose parent is positioned (`relative`, `absolute` or similar). The script draws a canvas inside it. Pointer and click input are read from that parent, so movement over your headline and buttons still drives the field. Content that should sit above the dots needs `position: relative` (or any stacking context) and a `z-index` above `0`. Add `data-dots-calm` to any element in the same parent to put a quiet patch behind it.

**What is only the demo's styling:** everything prefixed `hero`: the fonts (Instrument Serif and Inter), the headline, button, link and cue. Delete or replace it freely.

**CSS the effect depends on:** the `.dot-grid` block in `style.css`: absolute positioning, `pointer-events: none` (so your content stays clickable), `overflow: hidden`, and the static CSS dot pattern that shows when JavaScript is off. The pattern is hidden under `.has-js` and `.is-live` so it never flashes in before the canvas. Keep the `:focus-visible` rule if you use the keyboard hook below.

Restyle the field with custom properties on `.dot-grid`. They are read once when the effect starts:

| Property | Default | Description |
|----------|---------|-------------|
| `--dots-ink` | `#141412` | Resting dot colour |
| `--dots-ink-opacity` | `0.35` | Opacity of resting dots |
| `--dots-accent` | `#2747d6` | Colour dots take on inside the excited region |

For a dark section, set `--dots-ink` to a light colour such as `#f1efea` and pick an accent that reads on your ground.

### Options

All options are `data-` attributes on `.dot-grid`. Numbers are read so that an explicit `0` works.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-dots-gap` | px | `22` | Grid spacing. Grows by 30% on touch screens |
| `data-dots-size` | px | `1.6` | Resting dot radius |
| `data-dots-reach` | px | `150` | Influence radius of the pointer. Widens with speed |
| `data-dots-wake` | `0` to `1` | `1` | Strength of the flick wake. `0` keeps only the gentle parting |
| `data-dots-ring` | `0`, `1` | `1` | `0` turns click and tap rings off |
| `data-dots-breathe` | `0`, `1` | `1` | `0` turns the idle breathing off. The loop then stops whenever the field is settled |
| `data-dots-drift` | `0`, `1` | `1` | Touch screens only: `0` turns off the slow drifting point between touches |
| `data-dots-intensity` | `0` to `1` | `1` | Scales every response at once |

### Accessibility

- **Decorative canvas:** the canvas is `aria-hidden`. Your content stays real text above it.
- **Readable copy:** use `data-dots-calm` on text. Even at the effect's peak the dots behind a calm zone stay small and light.
- **Keyboard:** optional. Give the layer `tabindex="0"`, `role="button"` and an `aria-label` (see the demo). When focused, Enter or Space sends a ring and the arrow keys move the point through the field in jumps, parting the dots where it lands.
- **Touch:** a finger drag drives the same pointer body; a tap sends a ring. The parent gets `touch-action: pan-y` while the effect runs, so vertical swipes still scroll the page.
- **Reduced motion:** with `prefers-reduced-motion: reduce` the field is drawn once as a composed still (the grid with one frozen ring) with no breathing, no rings and no pointer response. Switching the preference while the page is open rebuilds the field.
- **No JavaScript:** a static CSS dot pattern stands in for the canvas.

### Performance

- The animation loop runs only while the layer is on screen and the tab is visible.
- With breathing off it stops entirely once every dot has settled, and restarts on the next input.
- Resolution is capped at 2x on desktop and 1.5x on touch screens.
- Resizing re-anchors the grid without a jump: dots keep their positions and spring to their new places.
- A 1200x675 field (about 1,700 dots) takes well under a millisecond per frame on a laptop.

### Dependencies

**Required:**
- GSAP 3.12+ (core only, no plugins). The demo is built against GSAP 3.15.0.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Interactive Dot Grid Background](https://gsapvault.com/effects/interactive-dot-grid)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Spotlight Background](https://gsapvault.com/effects/spotlight-background.md): A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt