Loading effect…
Loading preview…
cards · react · free
A card whose soft spotlight follows the pointer on hover.
"use client";
import {
useCallback,
useEffect,
useRef,
useState,
type CSSProperties,
type PointerEvent,
type ReactNode,
} from "react";
type SpotlightCardProps = {
children?: ReactNode;
className?: string;
size?: number;
};
export function SpotlightCard({
children,A card whose soft spotlight follows the pointer on hover.
Copy src/SpotlightCard.tsx into your React project. No extra dependencies.
import { SpotlightCard } from "./SpotlightCard";
export function Example() {
return (
<SpotlightCard>
<h3>Hover me</h3>
<p>The light follows your pointer.</p>
</SpotlightCard>
);
}"use client")prefers-reduced-motion (static soft glow instead)