Spotlight Card

Gắn stylesheet và script một lần. Đặt các thẻ trong một data-spotlight-group để ánh sáng lan từ thẻ này sang thẻ khác; thẻ đứng riêng thì dùng data-spotlight:

<link rel="stylesheet" href="spotlight-card.css" />
<script src="spotlight-card.js" defer></script>

<div class="spotlight-group" data-spotlight-group>
  <article class="spotlight-card">…</article>
  <article class="spotlight-card" data-variant="featured">…</article>
  <article class="spotlight-card">…</article>
</div>

<a class="spotlight-card" href="/changelog" data-spotlight>…</a>

Mọi .spotlight-card nằm trong group đều do group chiếu sáng — kể cả thẻ thêm vào sau. Class spotlight-group là một lưới tự co giãn có sẵn, không bắt buộc; bố cục nào cũng được. Muốn thẻ dưới con trỏ nghiêng theo thì thêm data-spotlight-tilt (đơn vị độ, mặc định 0 = tắt; 4–8 là vừa đẹp) vào group hoặc thẻ đứng riêng. Group hay thẻ thêm vào sau khi trang đã tải: SpotlightCard.init(container) — hàm này trả về một hàm để gỡ ra.

Chép SpotlightCard.tsx, spotlight-card.css và thư mục core vào dự án:

import { SpotlightCard, SpotlightGroup } from "./SpotlightCard";

<SpotlightGroup tilt={5}>
  <SpotlightCard>…</SpotlightCard>
  <SpotlightCard variant="featured">…</SpotlightCard>
  <SpotlightCard as="a" href="/team">…</SpotlightCard>
</SpotlightGroup>

<SpotlightCard as="section" tilt={6}>Thẻ đứng riêng</SpotlightCard>

as chọn thẻ HTML (mặc định article cho thẻ, div cho group; dùng ul + li cũng được). Các prop khác được chuyển xuống thẻ đó (className, id, onClick, aria-*…). Trong group, đặt tilt trên group. React 18 hoặc 19.

File bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến sau trên .spotlight-card (hoặc class của bạn):

Biến	Đổi gì
--spotlight-from, --spotlight-via, --spotlight-to	Màu ánh sáng trên viền (tím, hồng, xanh ngọc)
--spotlight-light, --spotlight-light-size	Quầng sáng bên trong thẻ và bán kính của nó
--spotlight-reach	Ánh sáng trên viền toả xa bao nhiêu — cũng là độ lan sang thẻ bên cạnh
--spotlight-surface, --spotlight-surface-top, --spotlight-blur	Mặt kính mờ
--spotlight-edge, --spotlight-border-width, --spotlight-sheen	Viền lúc nghỉ và vệt sáng mép trên
--spotlight-text, --spotlight-shadow, --spotlight-ring	Màu chữ, bóng đổ, viền focus
--spotlight-radius, --spotlight-padding	Hình dạng và kích thước
--spotlight-rest	Độ sáng của viền tĩnh (thẻ nổi bật, màn hình cảm ứng)
--spotlight-fade, --spotlight-follow, --spotlight-settle, --spotlight-ease	Tốc độ ánh sáng mờ đi, tốc độ nghiêng theo và trở về
--spotlight-perspective	Độ sâu khi nghiêng

Trên .spotlight-group: --spotlight-gap và --spotlight-min (độ rộng cột hẹp nhất). Màu dùng light-dark(): tự theo color-scheme của trang.

Khi bật prefers-reduced-motion, thẻ không bao giờ nghiêng; vệt sáng vẫn bám theo con trỏ, vì không có gì trên trang chuyển động — chỉ một quầng sáng đổi chỗ.