Spotlight Feature Grid

A responsive grid of feature cards where a radial spotlight effect tracks the mouse within each card individually. Each card maintains its own spotlight state. Built for landing page feature sections.

ReactNext.jsClient ComponentReactMotionCSS

Source ownership

You get the actual source file. Read it, modify it, delete it — it's yours.

Accessible defaults

Keyboard navigation, focus states, and reduced motion are built in from day one.

Performance first

CSS for simple effects. Motion for UI. GSAP for scroll. Three.js only when it counts.

Responsive design

Every component works from 320px mobile to large desktop without breakpoint patches.

TypeScript APIs

Strict types, sensible defaults, clear prop names. No guessing what a prop does.

shadcn CLI ready

Install any component in one command. Or copy-paste — your choice, always.

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/spotlight-feature-grid

Registry endpoint: https://ui.mridha.net/r/spotlight-feature-grid.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/spotlight-feature-grid.tsx

3. Import the component

import { SpotlightFeatureGrid } from "@/components/ui/spotlight-feature-grid";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <SpotlightFeatureGrid />
    </main>
  );
}

Dependencies

motion

Accessibility

Each card uses semantic article or div with appropriate role.
Spotlight effect is purely decorative and uses pointer-events tracking.
All card content is readable without the spotlight effect.

Performance

Per-card mouse tracking is lightweight — uses onMouseMove at card level.
CSS custom properties are used for spotlight position to minimize React re-renders.