Realtime sync
Move your cursor across this card.
Customize
Usage
import { SpotlightCard } from "@/components/motionkit/spotlight-card";
<SpotlightCard>
<h3>Realtime sync</h3>
<p>Changes appear everywhere instantly.</p>
</SpotlightCard>Motion
The exact curves this component runs, plotted with Motion's own maths.
Glow fade-in
Pointer enters the card
Works in the App Router as is. Requires Tailwind CSS v4.
npm install motionSave as components/motionkit/spotlight-card.tsx.
"use client";
import type { ComponentProps, PointerEvent } from "react";
import { motion, useMotionTemplate, useMotionValue } from "motion/react";
type SpotlightCardProps = ComponentProps<"div"> & {
/** Any CSS color for the glow. */
color?: string;
/** Glow radius in pixels. */
radius?: number;
};
export function SpotlightCard({
color = "rgb(14 124 134 / 0.32)",
radius = 260,
className = "",
children,
onPointerMove,
...props
}: SpotlightCardProps) {
const mouseX = useMotionValue(-radius);
const mouseY = useMotionValue(-radius);
const background = useMotionTemplate`radial-gradient(${radius}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 80%)`;
function handleMove(event: PointerEvent<HTMLDivElement>) {
onPointerMove?.(event);
const rect = event.currentTarget.getBoundingClientRect();
mouseX.set(event.clientX - rect.left);
mouseY.set(event.clientY - rect.top);
}
return (
<div
onPointerMove={handleMove}
className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-[#0C1010] p-6 ${className}`}
{...props}
>
<motion.div
aria-hidden
style={{ background }}
className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
/>
<div className="relative">{children}</div>
</div>
);
}
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | rgb(14 124 134 / 0.32) | Any CSS color for the glow. |
| radius | number | 260 | Glow radius in pixels. |
Fast
Secure
Global
Typed
Spotlight Grid
One soft beam follows the pointer across a grid, lighting the borders and faces of the cards it passes.
Edge functions
Tilt me with your cursor.
Tilt Card
A 3D card that tilts toward the pointer, with an optional moving glare.
Launch kit
Tilt me to see the layers.
Depth Card
A card that tilts toward the cursor while its layers float at different depths, so each moves at its own speed.