115
AI ready

Interactive Dot Grid Background

£10 or the whole Vault, £99

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.

intermediate
7 more details
canvasspring-physicsvelocity-reactivepointer-interactionshockwaveambienttouch-interaction

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Interactive Dot Grid Background demo in new tab

Released

About this effect

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.

Read the full effect overview

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.

Interactive Dot Grid Background - GSAP animation effect preview

What's included

11 items
  • 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

Perfect for

4 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

How it works

2 sections

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.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Interactive Dot Grid Background opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.