Interactive Dot Grid

Фон-сетка из точек, которые подсвечиваются прожектором вокруг курсора. CSS-маска + переменные.

cssmouse-moverevealbasic~2 КБreduced-motion ✓

↗

Установка

npx shadcn@latest add https://motiva.pages.dev/r/interactive-dot-grid.json

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

.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" />;
}

Interactive Dot Grid

Установка

Экспорт

Код

Похожие эффекты