IROUL
회원가입로그인
뒤로가기
인터랙션

커서를 따라 빛나는 스포트라이트 카드

pointer 좌표를 CSS 변수로 넘겨 테두리·본문이 커서를 따라 빛남

Pointer EventsCSS custom propertiesradial-gradientgradient border · 태그: interactionspotlightpointercss-variableglow
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약

--x/--y를 setProperty로 갱신해 리렌더 없이 커서 글로우를 그리는 카드.

놓치기 쉬운 것

state 대신 setProperty라 리렌더 0 / 테두리 글로우는 1px 패딩 래퍼 + 안쪽 카드 덮기(gradient border) / CSS 변수는 자식에 상속돼 레이어가 공유.

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { SpotlightCardDemo } from "./-components/SpotlightCardDemo";

export const metadata: Metadata = {
  title: "커서 스포트라이트 카드 (데모)",
  description:
    "pointer 좌표를 CSS 변수(--x/--y)로 넘겨 커서를 따라 테두리·본문이 빛나는 스포트라이트 카드. 리렌더 없이 setProperty로.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60">
      <SpotlightCardDemo />
    </main>
  );
}
49조회수

댓글