Spotlight Card

Карточка с мягким прожектором, который следует за курсором. CSS-переменные + указатель.

cssmouse-movehoverrevealbasic~2 КБreduced-motion ✓

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

Проп	Тип	По умолчанию	Что это
children	ReactNode	—

Установка

npx shadcn@latest add https://motiva.pages.dev/r/spotlight-card.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

Код

.spot {
  position: relative;
  width: 320px;
  max-width: 90%;
  padding: 1.75rem;
  border-radius: 16px;
  border: 1px solid oklch(0.3 0.02 270);
  background: oklch(0.17 0.02 270);
  color: oklch(0.92 0.01 265);
  overflow: hidden;
}

.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    oklch(0.7 0.16 280 / 0.28),
    transparent 65%
  );
}

.spot:hover::before {
  opacity: 1;
}

.spot > * {
  position: relative;
}

.spot h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.spot p {
  margin: 0;
  font-size: 0.9rem;
  color: oklch(0.65 0.02 265);
}

"use client";

import { useRef, type ReactNode, type PointerEvent } from "react";
import "./spotlight-card.css";

/** Карточка с прожектором, следующим за курсором (CSS-переменные --mx/--my). */
export function SpotlightCard({ children }: { children: ReactNode }) {
  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="spot" onPointerMove={onMove}>
      {children}
    </div>
  );
}

/**
 * Ванильная версия: обновляет CSS-переменные --mx/--my по курсору
 * для эффекта прожектора. Возвращает функцию отписки.
 *
 *   const dispose = spotlight(document.querySelector(".spot")!);
 */
export function spotlight(el: HTMLElement): () => void {
  const move = (e: PointerEvent) => {
    const r = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - r.left}px`);
    el.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  el.addEventListener("pointermove", move);
  return () => el.removeEventListener("pointermove", move);
}

Spotlight Card

Пропсы

Установка

Экспорт

Код

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