npm package · 1000+ modes · highly customizable

Dotfield,
pure motion

Install Dotfield as a package, pick from thousands of named motion modes, and tune palette, density, speed, and more. The page backdrop cycles modes on its own — previews live in the gallery below.

Browse modes Install package Read the docs
Current — —
Scroll to gallery

Install as a dependency

npm package

Dotfield is a real package entry (main / exports). Install it into your project — not a one-off file download: 

npm install dotfield
const Dotfield = require('dotfield');
// or: import Dotfield from 'dotfield';

const field = Dotfield.create(document.getElementById('dots'), {
  mode: 'flow-calm-cw-mid',
  fillParent: true,
  palette: 'terracotta',
  speed: 1,
  intensity: 1,
  count: 2400,
  background: 'cream',
});
// field.setMode('orbit-brisk-ccw-fine');
// field.setConfig({ palette: 'ocean', speedScale: 1.4, density: 1.2 });
// field.listModes(); // → 1000+ { id, label, family }
  • require('dotfield') Package entry via main/exports — works from a fresh consumer install
  • setMode / setConfig Switch catalog modes; override palette, bg, speed, density, count…
  • listModes() Full catalog: stable ids, labels, families
  • createSimulation Headless stepping for tests and servers — same motion math

See the sample consumer on GitHub: examples/package-consumer and the README. Browser demo: examples/minimal.html.

Craft

Why dots?

Stipple art sits between illustration and code — density without hard edges. Dotfield packages that language as an installable library you can customize deeply.

0 backdrop particles
— backdrop fps
— catalog modes