Zero deps · ~2 KB gzipped · TypeScript

A canvas dot-grid
that follows your cursor

A drop-in interactive background animation. Dots stay invisible until your cursor approaches, then brighten and grow. Never blocks clicks, scrolling, selection, or hovers. Move your mouse anywhere on this page to see it in action.

$npm install interactive-dot-grid

Try it live View on GitHub

Why this library

Designed to drop in and disappear — until you move your mouse.

Tiny & fast

~2 KB gzipped, zero runtime deps. Smooth on a single canvas with rAF.

Never blocks UI

pointer-events: none, no cursor: none. Clicks and selection always work.

Framework-agnostic

Works with React, Vue, Svelte, Solid, or vanilla. Mount and destroy on demand.

Fully customizable

Tweak spacing, size, color, glow radius, and easing live with setOptions().

TypeScript ready

Ships ESM, CJS, IIFE, and .d.ts types. Use it from a CDN or a bundler.

HiDPI & resize aware

Crisp on retina displays. Re-grids automatically when the window resizes.

Live playground

Drag the sliders. The whole page background updates instantly. Copy the snippet when you're happy.

Tips while you play

The dot grid is rendered onto a fixed full-page canvas behind this content. Try these to feel the range:

Pull spacing down to ~10 for a dense fog, up to ~50 for sparse stars.
Raise baseAlpha above 0 to make idle dots visible.
Lower smoothing for slow trails, raise it for snap-to-cursor.
Bump radiusEffect for a wider glow halo.

Drop into your stack

Same library, every framework. Pick yours.

import { DotGrid } from 'interactive-dot-grid';

new DotGrid({
  spacing: 22,
  dotMax: 12,
  color: '180,178,169',
});

import { useEffect } from 'react';
import { DotGrid } from 'interactive-dot-grid';

export function Background() {
  useEffect(() => {
    const grid = new DotGrid();
    return () => grid.destroy();
  }, []);
  return null;
}

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { DotGrid } from 'interactive-dot-grid';

let grid;
onMounted(() => { grid = new DotGrid(); });
onBeforeUnmount(() => grid?.destroy());
</script>

<script>
  import { onMount } from 'svelte';
  import { DotGrid } from 'interactive-dot-grid';

  onMount(() => {
    const grid = new DotGrid();
    return () => grid.destroy();
  });
</script>

<script src="https://unpkg.com/interactive-dot-grid"></script>
<script>
  new InteractiveDotGrid.DotGrid();
</script>

Options reference

All options are optional. Pass any subset to the constructor or to setOptions().

Option	Type	Default	Description
`container`	`HTMLElement`	`document.body`	Mount target. Omit for fullscreen-fixed mode.
`spacing`	`number`	`22`	Distance between dots in CSS pixels.
`dotMin`	`number`	`3`	Idle dot radius.
`dotMax`	`number`	`12`	Peak radius when cursor is on top.
`radiusEffect`	`number`	`220`	Cursor influence radius (px).
`baseAlpha`	`number`	`0`	Idle alpha. `0` = invisible.
`maxAlpha`	`number`	`0.85`	Peak alpha at cursor center.
`color`	`string`	`"180,178,169"`	RGB triple as a string.
`smoothing`	`number`	`0.12`	Per-frame easing factor (0–1).
`zIndex`	`number`	`0`	CSS `z-index` for the canvas.
`autoStart`	`boolean`	`true`	Start the animation loop on init.