Anatomy

The component has three layers. First, an optional header block (badge, title, subtitle) fades in with a simple whileInView animation. Second, a relative grid container captures mousemove events and holds a ref for coordinate math. Third, inside that container sits a single absolute motion.div, the spotlight overlay, sized to cover the entire grid and driven by --mouse-x/--mouse-y custom properties. The cards themselves are standard motion.div elements that stagger in on scroll; they need no special spotlight logic.

How it works

The trick is attaching Framer Motion useMotionValue instances to CSS custom properties on the overlay element. On every mousemove, the handler reads the pointer position relative to the grid container via getBoundingClientRect, then calls mouseX.set() and mouseY.set(). The motion.div overlay reads --mouse-x and --mouse-y inside a radial-gradient background string. Because Framer Motion writes motion values directly to the DOM style without triggering a React re-render, the spotlight update is fully off the React cycle, smooth at 60fps even with many cards.

How to build it in React

1. Set up the grid container with a ref and mousemove handler

   Create a div with position:relative, attach a ref to it, and wire an onMouseMove handler. Inside the handler, subtract the container's getBoundingClientRect() origin from the raw clientX/Y to get container-relative coordinates.

   const containerRef = React.useRef<HTMLDivElement>(null);
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   
   function handleMouseMove(e: React.MouseEvent) {
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     mouseX.set(e.clientX - rect.left);
     mouseY.set(e.clientY - rect.top);
   }

2. Place the spotlight overlay inside the container

   Add a motion.div as the first child of the container with position:absolute, inset-0, z-index above the cards, and pointer-events:none. Bind the motion values to --mouse-x and --mouse-y via the style prop (Framer Motion accepts motion values as CSS custom properties).

   <motion.div
     className="pointer-events-none absolute inset-0 z-10 rounded-2xl opacity-60"
     style={{
       background: `radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%)`,
       // @ts-expect-error CSS custom properties
       "--mouse-x": mouseX,
       "--mouse-y": mouseY,
     }}
   />

3. Render the bento cards with staggered whileInView

   Map over your items array and render each as a motion.div with an initial opacity:0 / y:24 state, animating to visible on scroll. Use a small delay multiplier (i * 0.08) for the cascade. The spotlight overlay sits above the cards via z-index and illuminates them purely through the radial gradient blend.

   items.map((item, i) => (
     <motion.div
       key={item.id}
       initial={{ opacity: 0, y: 24 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-40px" }}
       transition={{ delay: i * 0.08, duration: 0.5 }}
       className="relative rounded-2xl border p-6"
     />
   ))

4. Theme the spotlight color with a CSS token

   Replace any hardcoded color with var(--color-accent) inside the radial-gradient string. Adjust the alpha via color-mix (8% works well on both light and dark themes). To make the beam wider or narrower, change the 400px radius value, larger values create a softer, more ambient glow.

When to use it

Reach for this section on SaaS feature pages and agency portfolios where you want the features grid to feel interactive rather than static. It works best on dark or bold themes where the accent glow creates visible contrast. Skip it on text-heavy pages where the moving light competes with reading, and always verify that the grid looks good without the spotlight on mobile, the layout should stand on its own.

Used by

• Vercel, Uses cursor-reactive radial highlights across its feature and infrastructure sections.
• Linear, Spotlight glow effects on feature grids give the product site its distinct polished feel.
• Resend, Bento-style feature layout with ambient light effects highlighting card edges on hover.

FAQ