Animated Dot Grid Background for Webflow, Framer and Any Website

An animated dot grid is a background that looks technical without shouting: dots roll toward a horizon, ripple out from the center, or pull away from your cursor. This post covers how to add an interactive dot matrix to Webflow, Framer, React, or any site that allows a script tag.

CSS dots vs. a live grid

CSS-only dot patterns use a radial-gradient background. They're light, but nothing moves.

A live grid animates every dot. If each dot is a DOM element, thousands of nodes make a page sluggish, so the better approach draws them all in one WebGL pass. Dot Grid Field does that: the whole grid is one draw call, with the pattern, cursor reaction, ripples and scroll effects computed on the GPU.

What you can make

There are 13 presets: horizon, peaks, tide, plasma, serpent, pulse, vortex, cells, interference, gravity, signal, halftone, and minimal. Some examples:

Horizon, peaks, tide: 3D terrains of dots, from rolling fields to mountain ridges and ocean swells.
Pulse and vortex: rings breathing out from the center, or a spiral on a hex grid.
Halftone: black ink on paper, which works well with a photo as a mask.
Minimal: quiet grey dots on white that darken under the cursor.

You can also set your own background and 1 to 3 dot colors. Shapes are circle, square, diamond, plus, or ring, and the layout can be square or hex.

Plain HTML

Upload dot-grid-field.min.js next to your pages, add the script once, and place the tag:

<script src="/dot-grid-field.min.js" defer></script>

<pf-dot-grid preset="horizon" style="height: 70vh"></pf-dot-grid>

Any option is an attribute:

<pf-dot-grid
  preset="pulse"
  colors="#0ea5e9, #f43f5e, #fbbf24"
  spacing="18"
  cursor="magnify"
  scroll="wave"
  style="height: 600px"
></pf-dot-grid>

As a section background, put your content inside the tag with position: relative on the children. The grid renders behind them, and the cursor and clicks still reach the dots.

Cursor, click and scroll

cursor: repel (the default), attract, magnify, swirl, ripple, or none. radius and strength tune the reach.
click-ripple: a shockwave from every click or tap. On by default.
scroll: wave sends a wave through the dots as you scroll, progress ties the animation to scroll position, and reveal grows the dots in from the bottom.

Dots that spell a word or trace a logo

The mask attribute makes the dots form text or an image:

<pf-dot-grid preset="halftone" mask="text:HELLO" style="height: 420px"></pf-dot-grid>
<pf-dot-grid preset="cells" mask="/logo.png" style="height: 420px"></pf-dot-grid>

Logos with transparency give their shape; opaque photos give a halftone. Masks work on flat patterns only, not the 3D terrains. A masked word is decorative, so repeat it in real text.

Webflow

Paste the whole of script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code, or host the file yourself and use a script tag.
Add a Code Embed with the tag, e.g. <pf-dot-grid preset="horizon" style="height: 600px"></pf-dot-grid>.
Publish. Custom code runs on the published site, not in the Designer.

To put it behind a section, set the tag's style to position: absolute; inset: 0; height: 100%; z-index: 0 inside a position: relative section. Custom code needs a paid Webflow site plan.

Framer

Go to Assets → Code → + → New component file and name it DotGridField.
Replace its contents with framer/DotGridField.tsx from the download.
Drag it onto the canvas, or into a Stack as a background set to Absolute with all edges pinned. Pick a preset or Custom, and set Mask to Text or Image if you want one.

On the canvas it draws a still frame; press Preview to see it move.

React and Next.js

Copy react/DotGridField.tsx into your project (React 18+). Props use the same names in camelCase, and children render on top:

import DotGridField from "@/components/DotGridField"

export default function Hero() {
  return (
    <DotGridField preset="horizon" style={{ height: 600 }}>
      <h1>Your headline</h1>
    </DotGridField>
  )
}

On the Next.js App Router the server renders a CSS dot pattern in the same colors, and WebGL takes over in the browser, so there's no flash.

Performance and accessibility

Size: 13.8 KB gzipped, no dependencies, no Three.js.
Pauses offscreen and in hidden tabs, and lowers its resolution on slow devices.
Reduce Motion gives a still frame. Without WebGL you get the same grid drawn once in Canvas 2D.
The canvas is decorative (aria-hidden). Put real text on top and check contrast against the brightest dots.

When not to use it

Behind long body text. Keep it to hero sections or short copy, or use the quiet minimal preset.
Anywhere you can't add custom code.

See it in context

Dot Grid Field is part of the Parallel Studio set of web effects on /effects. The Dot Grid Field page shows the presets live, so you can see how a headline reads over each one.

Pricing

Dot Grid Field is $9 one-time for one website or project, with free updates to v1.x and a 14-day refund. The full catalog is available through the All-Access Pass for $49.

Pick one preset, check your headline contrast over its brightest dots, and keep the rest of the hero calm.