Cards / React + CSS
Spotlight card
A soft light follows the pointer across a layered product card.
"use client";
import styles from "./SpotlightCard.module.css";
export default function SpotlightCard({
title = "A brighter idea.",
description = "Give your next project a little room to shine.",
href = "/resources/guides/plan-ai-product-workflow/",
}) {
function move(event) {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const box = event.currentTarget.getBoundingClientRect();
event.currentTarget.style.setProperty(
"--x",
`${event.clientX - box.left}px`,
);
event.currentTarget.style.setProperty(
"--y",
`${event.clientY - box.top}px`,
);
}
return (
<a className={styles.root} href={href} onPointerMove={move}>
<div className={styles.orbit} aria-hidden="true">
<i />
<i />
<span>✦</span>
</div>
<span className={styles.tag}>Make space for what’s next</span>
<h3>{title}</h3>
<p>{description}</p>
<span className={styles.action}>
Explore <span aria-hidden="true">↗</span>
</span>
</a>
);
}
Make it yours
Use to highlight a project, feature, or editorial destination. Replace the default href with the destination in your product. The light is decorative; the link stays usable without pointer movement.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
SpotlightCard.jsxand the CSS asSpotlightCard.module.cssin the same folder. - Import
SpotlightCardand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
title | string | Card heading. |
description | string | Supporting copy. |
href | string | Real destination URL. |
Accessibility & behavior
A single native link covers the card. Focus reveals the same light treatment. Essential content is always visible, with reduced motion respected.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.