A React component that adds a mouse-tracking radial glow effect to any card. One import, zero dependencies, works with Tailwind CSS or inline styles.
<SpotlightCard className="p-8 rounded-xl bg-zinc-900 border border-zinc-800">
<h3>Hover me</h3>
<p>The spotlight follows your cursor.</p>
</SpotlightCard>
npm install spotlight-cardimport { SpotlightCard } from "spotlight-card";
function App() {
return (
<SpotlightCard
style={{
padding: "2rem",
borderRadius: "12px",
background: "#1e1e2e",
border: "1px solid #313244",
}}
>
<h3>Hover me</h3>
<p>The spotlight follows your cursor.</p>
</SpotlightCard>
);
}<SpotlightCard className="p-8 rounded-xl bg-zinc-900 border border-zinc-800">
<h3 className="text-lg font-bold">Feature</h3>
<p className="text-zinc-400">Description of the feature.</p>
</SpotlightCard><SpotlightCard color="59, 130, 246" opacity={0.2} size={400}>
Blue spotlight with larger radius
</SpotlightCard>Use useSpotlight for full control over rendering:
import { useSpotlight } from "spotlight-card";
function CustomCard() {
const { containerRef, spotlightStyle, handlers } = useSpotlight({
size: 300,
color: "168, 85, 247",
opacity: 0.15,
});
return (
<div ref={containerRef} {...handlers} style={{ position: "relative" }}>
<div style={spotlightStyle} />
<p>Custom layout with spotlight</p>
</div>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
size |
number |
350 |
Spotlight radius in pixels |
color |
string |
"255, 255, 255" |
RGB color string |
opacity |
number |
0.15 |
Spotlight opacity (0-1) |
enabled |
boolean |
true |
Enable/disable the effect |
as |
ElementType |
"div" |
Render as a different element |
Plus all standard HTML div attributes (className, style, onClick, etc.).
Returns { containerRef, spotlightStyle, handlers, state }.
containerRef— attach to the container elementspotlightStyle— CSS for the spotlight overlayhandlers—{ onMouseMove, onMouseEnter, onMouseLeave }state—{ x, y, isHovered }
README built with README Builder
MIT