Anatomy

The section is a motion.section with a relative container and overflow:hidden. Two absolutely-positioned layers sit beneath the content: a dot-grid div (aria-hidden, radial-gradient background-image at 24px intervals) and a motion.div for the spotlight overlay. The actual content, eyebrow badge, heading in two parts (normal + accent-colored span), subtitle, form, and social proof row, lives in a centered div at z-index 1. The social proof row stacks three colored circles with negative margin to fake overlapping avatars.

How it works

On every mousemove over the section, the handler reads the pointer's position relative to the section via getBoundingClientRect and writes the values to two Framer Motion useMotionValue instances (mouseX, mouseY). useMotionTemplate then assembles those live values into a CSS string: `radial-gradient(500px circle at ${mouseX}px ${mouseY}px, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%)`. That string is bound to the background style of the overlay div, so the browser repaints the gradient every frame without React re-renders. The form's three states (idle, loading, success) are toggled with a plain useState; AnimatePresence with mode='wait' cross-fades between the form and the success pill.

How to build it in React

1. Wire up the mouse spotlight with useMotionTemplate

   Create two motion values for the pointer coordinates and a ref for the section element. In the mousemove handler, subtract the section's bounding rect to get container-relative coordinates. Pass mouseX and mouseY into useMotionTemplate to produce a live CSS gradient string, then bind it to the overlay div's background style.

   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   const sectionRef = useRef<HTMLElement>(null);
   
   const spotlightBg = useMotionTemplate`radial-gradient(
     500px circle at ${mouseX}px ${mouseY}px,
     color-mix(in srgb, var(--color-accent) 8%, transparent),
     transparent 70%
   )`;
   
   function handleMouseMove(e: React.MouseEvent<HTMLElement>) {
     const rect = sectionRef.current?.getBoundingClientRect();
     if (!rect) return;
     mouseX.set(e.clientX - rect.left);
     mouseY.set(e.clientY - rect.top);
   }

2. Build the dot-grid background layer

   Add an absolutely-positioned div with aria-hidden and a radial-gradient background-image at a 24px grid size. Keep opacity around 0.35 so it reads as a texture rather than noise. Place the spotlight motion.div directly on top of it, also absolutely positioned with inset:0.

   <div
     aria-hidden
     style={{
       position: "absolute",
       inset: 0,
       backgroundImage:
         "radial-gradient(circle, color-mix(in srgb, var(--color-foreground) 10%, transparent) 1px, transparent 1px)",
       backgroundSize: "24px 24px",
       opacity: 0.35,
       pointerEvents: "none",
     }}
   />
   <motion.div
     aria-hidden
     style={{ position: "absolute", inset: 0, background: spotlightBg, pointerEvents: "none" }}
   />

3. Manage form states with useState and AnimatePresence

   Declare a FormState type covering 'idle', 'loading', and 'success'. On submit, flip to loading and simulate an async call with setTimeout. Wrap both the form and the success pill in AnimatePresence with mode='wait' so one fades out before the other fades in.

   type FormState = "idle" | "loading" | "success";
   const [formState, setFormState] = useState<FormState>("idle");
   
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (formState !== "idle") return;
     setFormState("loading");
     setTimeout(() => setFormState("success"), 1500);
   }
   
   <AnimatePresence mode="wait">
     {formState === "success" ? (
       <motion.div key="success" initial={{ opacity: 0, scale: 0.92 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }}>
         <CheckIcon /> Vous êtes inscrit !
       </motion.div>
     ) : (
       <motion.form key="form" onSubmit={handleSubmit} exit={{ opacity: 0 }}>
         {/* input + button */}
       </motion.form>
     )}
   </AnimatePresence>

4. Add stacked avatar social proof

   Render three small circles in a flex row, each shifted left by -8px using marginLeft on indices > 0. Use distinct accent-range colors for variety and a 2px border matching the background color to create the separation illusion. Follow the row with a subscriber count string.

   {["#818cf8", "#a78bfa", "#60a5fa"].map((bg, i) => (
     <div
       key={i}
       style={{
         width: 24,
         height: 24,
         borderRadius: "50%",
         border: "2px solid var(--color-background)",
         background: bg,
         marginLeft: i === 0 ? 0 : -8,
       }}
     />
   ))}

When to use it

Use this section on SaaS, agency, or content-brand sites where email capture is a primary conversion goal. It suits mid-page placement after a features or testimonials block, and works well just above the footer. Skip it when the page already has a heavy interactive hero, two cursor-reactive surfaces on the same page compete for attention. On purely transactional pages (checkout, onboarding), a simpler inline form is less distracting.

Used by

• Linear, Uses radial spotlight overlays on dark sections to draw focus without adding visual noise.
• Vercel, Employs cursor-driven ambient gradients on marketing sections, a technique close to this pattern.
• Superhuman, Pairs a clean centered email capture with subtle background animation and social proof subscriber counts.
• Beehiiv, Newsletter landing pages routinely combine subscriber counts, stacked avatars, and a single email input for high-converting signup sections.

FAQ