Interactive Dot Grid
Фон-сетка из точек, которые подсвечиваются прожектором вокруг курсора. CSS-маска + переменные.
Установка
npx shadcn@latest add https://motiva.pages.dev/r/interactive-dot-grid.jsonЧто нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
.dg {
position: absolute;
inset: 0;
overflow: hidden;
background: #0a0a10;
--mx: 50%;
--my: 50%;
}
/* Тусклый базовый грид точек */
.dg::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, oklch(0.4 0.02 265) 1.4px, transparent 1.7px);
background-size: 26px 26px;
}
/* Яркие точки, видимые только вокруг курсора через маску-прожектор */
.dg::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, oklch(0.72 0.16 220) 1.7px, transparent 2px);
background-size: 26px 26px;
-webkit-mask: radial-gradient(180px circle at var(--mx) var(--my), #000 0%, transparent 70%);
mask: radial-gradient(180px circle at var(--mx) var(--my), #000 0%, transparent 70%);
}
"use client";
import { useRef, type PointerEvent } from "react";
import "./interactive-dot-grid.css";
/** Грид точек с прожектором-курсором: точки подсвечиваются вокруг мыши (CSS-маска + переменные). */
export function InteractiveDotGrid() {
const ref = useRef<HTMLDivElement>(null);
function onMove(e: PointerEvent<HTMLDivElement>) {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
el.style.setProperty("--mx", `${e.clientX - r.left}px`);
el.style.setProperty("--my", `${e.clientY - r.top}px`);
}
return <div ref={ref} className="dg" onPointerMove={onMove} aria-hidden="true" />;
}
