Spotlight Glow Card Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature104.tsx instead.

Usage

The file also exports feature104Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature104, feature104Demo } from "@/components/blocks/feature/feature104";

export default function Page() {
  return <Feature104 {...feature104Demo} />;
}

Props

Types

type SpotlightCardItem = {
  title: string;
  description: string;
};

Behavior notes

• Real client-side interactivity: each card has an onMouseMove handler that computes the cursor's percentage position within the card's bounding rect and stores it in per-card React state, which drives the --x/--y CSS custom properties used by that card's radial-gradient glow.
• The glow fades in/out (opacity 0 to 1) via the same state, set to inactive on mouseleave, so it never lingers after the cursor exits a card.
• Icons are not a prop: a component reference can't cross the client boundary as a demo prop, so the grid hardcodes a fixed array of six lucide-react icons and indexes into it by card position, cycling if there are more than six items.
• "use client" component, so its demo props live in the sibling feature104.demo.tsx file per this repo's client/demo-file-split rule, not in feature104.tsx itself.
• The glow color uses color-mix() against the primary token at low opacity, so it stays on-theme (and correct in dark mode) rather than a hardcoded color.