MMridha UI

Spotlight Grid CTA

An interactive CTA section where a radial gradient spotlight follows the mouse cursor across a dot grid background. Creates an atmospheric, depth-rich feel without Three.js.

ReactNext.jsClient ComponentReactMotionCSS
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

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

Registry endpoint: https://ui.mridha.net/r/spotlight-grid-cta.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-grid-cta.tsx

3. Import the component

import { SpotlightGridCTA } from "@/components/ui/spotlight-grid-cta";

4. Use it in a page

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

Dependencies

motion

Accessibility

  • The spotlight effect is decorative and does not convey information.
  • Content remains readable when the spotlight effect is absent.
  • Motion is reduced gracefully when prefers-reduced-motion is active.

Performance

  • Mouse tracking uses requestAnimationFrame via Motion spring.
  • The dot grid is a CSS background pattern — no DOM elements for each dot.