Dotted Grid
Overview
A dot-grid canvas on an 8px rhythm. Dots near the pointer grow and glow; it pauses automatically off-screen.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Dotted Grid to your project in your colors.
Where to use it
Background layers for heroes, login pages and launch pages: adds texture to large empty areas without competing with the content.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add dotted-grid
mcp › Use 8pt MCP to call get_component("dotted-grid")
Code
Source for Dotted Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-dots"> <canvas class="x-dots__cv"></canvas> <div class="x-dots__title">Grid 8</div> </div>
.x-dots{position:relative;width:100%;height:100%;min-height:180px;overflow:hidden;background:var(--d-bg,#07070a)}
.x-dots__cv{position:absolute;inset:0;width:100%;height:100%}
.x-dots__title{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(28px,6vw,64px)/1 var(--d-font,system-ui,sans-serif);letter-spacing:-.04em;color:var(--d-fg,#fff);pointer-events:none;mix-blend-mode:difference}const init = (root) => {
const cv = root.querySelector('canvas'), ctx = cv.getContext('2d');
let w = 0, h = 0, dpr = 1, mx = -999, my = -999, vis = false, raf = 0, t = 0;
const gap = 16;
const css = getComputedStyle(root);
const size = () => {
const r = cv.getBoundingClientRect(); dpr = Math.min(2, devicePixelRatio || 1);
w = r.width; h = r.height; cv.width = w * dpr; cv.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
const draw = () => {
t += 0.012; ctx.clearRect(0, 0, w, h);
const fg = css.getPropertyValue('--d-fg').trim() || '#fff';
…Subscribe to Builder to see the full source.See pricing