Dotted Grid
介绍
8 像素节奏的点阵画布，指针附近的点会放大发光，离开视口自动暂停。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dotted Grid 加进你的项目并换成你的配色。
适用场景
首屏、登录页和发布页的背景层：给大面积留白加一点质感，又不抢正文。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add dotted-grid
mcp › 使用 8pt MCP 调用 get_component("dotted-grid")
代码
Dotted Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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';
…订阅 Builder 查看完整源码。查看价格