Anatomy

The section is a full-viewport flex container (min-height 90vh) with the DotGrid positioned absolutely behind the content. DotGrid renders an SVG element (COLS × GAP wide, ROWS × GAP tall) centered with a CSS transform translate(-50%, -50%). Each of the 336 dots is a Dot component that holds a ref to its SVGCircleElement. The text block sits in a relative z-index:1 container capped at 600px, with a staggered Framer Motion entrance animation (h1 → p → CTA buttons, each delayed by 0.1s).

How it works

Two Framer Motion motion values, mouseX and mouseY, are created at the DotGrid level and initialised far off-screen (-1000, -1000). On each mousemove the handler reads the container's bounding rect and writes the cursor's container-relative position into them. Every Dot subscribes to both motion values via the .on('change', ...) API, when either fires, the dot computes its Euclidean distance to the cursor and a scale factor from 0 to 1 based on a 120px radius. It then calls ref.current.setAttribute to set r and opacity directly on the SVG element, bypassing React's reconciler entirely. On mouse leave, the values reset to -1000 so every dot falls back to its resting state (r=2, opacity=0.15).

How to build it in React

1. Build the SVG dot grid

   Define COLS, ROWS and GAP as module-level constants. In DotGrid, loop over every row/col combination and push a Dot at position (col * GAP, row * GAP). Wrap the SVG in an absolutely-positioned div with overflow:hidden and aria-hidden.

   const COLS = 24, ROWS = 14, GAP = 32, DOT_SIZE = 2;
   // inside DotGrid render:
   for (let row = 0; row < ROWS; row++)
     for (let col = 0; col < COLS; col++)
       dots.push(<Dot key={`${row}-${col}`} cx={col*GAP} cy={row*GAP} mouseX={mouseX} mouseY={mouseY} />);

2. Wire motion values to the pointer

   Create mouseX and mouseY with useMotionValue(-1000) at DotGrid level. Pass them down to each Dot as props. In the onMouseMove handler, subtract the container's getBoundingClientRect to get container-relative coordinates, then call mouseX.set() and mouseY.set().

   const mouseX = useMotionValue(-1000);
   const mouseY = useMotionValue(-1000);
   
   const handleMouseMove = useCallback((e: React.MouseEvent) => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     mouseX.set(e.clientX - rect.left);
     mouseY.set(e.clientY - rect.top);
   }, [mouseX, mouseY]);

3. Subscribe each dot and write to the DOM directly

   Inside the Dot component, hold a ref to the SVGCircleElement. Register a subscriber with mouseX.on('change', updateDot) and mouseY.on('change', updateDot). In updateDot, compute the distance, derive r and opacity, and call setAttribute on the ref, no setState, no re-render.

   const updateDot = useCallback(() => {
     if (!ref.current) return;
     const dx = mouseX.get() - cx, dy = mouseY.get() - cy;
     const dist = Math.sqrt(dx*dx + dy*dy);
     const scale = Math.max(0, 1 - dist / 120);
     ref.current.setAttribute("r", String(DOT_SIZE + scale * 4));
     ref.current.setAttribute("opacity", String(0.15 + scale * 0.6));
   }, [cx, cy, mouseX, mouseY]);
   
   mouseX.on("change", updateDot);
   mouseY.on("change", updateDot);

4. Animate the text block on mount

   Wrap h1, p and the CTA row in motion.* elements with initial={{ opacity: 0, y: 24/14/8 }} and animate={{ opacity: 1, y: 0 }}. Stagger the delays (0, 0.1, 0.2s) and use the cubic-bezier [0.16, 1, 0.3, 1] for a crisp out-expo feel that pairs well with the grid's subtlety.

   const EASE = [0.16, 1, 0.3, 1] as const;
   <motion.h1
     initial={{ opacity: 0, y: 24 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.7, ease: EASE }}
   >

When to use it

This hero works best on SaaS or developer-tool landing pages where you want a technical, precise aesthetic without heavy canvas or WebGL. The interaction reads as subtle sophistication rather than spectacle. Skip it when your above-the-fold goal is pure conversion speed, 336 SVG elements add a small parse cost, and always test on low-end Android devices to confirm the interaction stays smooth.

Used by

• Stripe, Uses animated dot/grid backgrounds on product pages to convey technical precision without heavy visual noise.
• Resend, Adopts sparse dot grids and proximity-reactive cues in hero sections targeting developers.
• Clerk, Combines left-aligned hero copy with subtle animated backgrounds to strike a clean yet interactive tone.
• Raycast, Deploys pointer-reactive grain and particle layers on its landing hero to reward exploratory mouse movement.

FAQ