Spotlight Card
Карточка с мягким прожектором, который следует за курсором. CSS-переменные + указатель.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| children | ReactNode | — |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/spotlight-card.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.
Экспорт
Код
.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);
}
