Anatomía

La sección es un contenedor flex a viewport completo (min-height 90vh) con DotGrid posicionado en absoluto detrás del contenido. DotGrid renderiza un elemento SVG (COLS × GAP de ancho, ROWS × GAP de alto) centrado con un transform CSS translate(-50%, -50%). Cada uno de los 336 puntos es un componente Dot que mantiene una ref a su SVGCircleElement. El bloque de texto vive en un contenedor con z-index:1 limitado a 600px, con una animación de entrada escalonada de Framer Motion (h1 → p → botones CTA, cada uno retrasado 0.1s).

Cómo funciona

Dos motion values de Framer Motion, mouseX y mouseY, se crean a nivel de DotGrid y se inicializan lejos fuera de pantalla (-1000, -1000). En cada mousemove, el handler lee el bounding rect del contenedor y escribe en ellas la posición del cursor relativa al contenedor. Cada Dot se suscribe a ambos motion values mediante la API .on('change', ...), cuando alguno se dispara, el punto calcula su distancia euclidiana al cursor y un factor de escala de 0 a 1 basado en un radio de 120px. Luego llama a ref.current.setAttribute para fijar r y opacity directamente en el elemento SVG, evitando por completo el reconciliador de React. Al salir el ratón, los valores vuelven a -1000 y cada punto regresa a su estado de reposo (r=2, opacity=0.15).

Cómo crearlo en React

1. Construir la grilla de puntos SVG

   Define COLS, ROWS y GAP como constantes a nivel de módulo. En DotGrid, recorre cada combinación de fila/columna y agrega un Dot en la posición (col * GAP, row * GAP). Envuelve el SVG en un div con posición absolute con overflow:hidden y 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. Conectar los motion values al puntero

   Crea mouseX y mouseY con useMotionValue(-1000) a nivel de DotGrid. Pásalos a cada Dot como props. En el handler onMouseMove, resta el getBoundingClientRect del contenedor para obtener coordenadas relativas al contenedor, luego llama a mouseX.set() y 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. Suscribir cada punto y escribir directamente en el DOM

   Dentro del componente Dot, mantén una ref al SVGCircleElement. Registra un subscriber con mouseX.on('change', updateDot) y mouseY.on('change', updateDot). En updateDot, calcula la distancia, deriva r y opacity, y llama a setAttribute sobre la ref, sin setState, sin 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. Animar el bloque de texto al montar

   Envuelve h1, p y la fila de CTA en elementos motion.* con initial={{ opacity: 0, y: 24/14/8 }} y animate={{ opacity: 1, y: 0 }}. Escalona los retrasos (0, 0.1, 0.2s) y usa la curva cubic-bezier [0.16, 1, 0.3, 1] para una sensación out-expo nítida que combina bien con la sutileza de la grilla.

   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 }}
   >

Cuándo usarlo

Este hero funciona mejor en landing pages de SaaS o herramientas para desarrolladores donde buscas una estética técnica y precisa sin canvas pesado ni WebGL. La interacción transmite una sofisticación sutil más que espectáculo. Evítalo cuando tu objetivo por encima de la línea de flotación es la velocidad pura de conversión, los 336 elementos SVG añaden un pequeño coste de parsing, y prueba siempre en dispositivos Android de gama baja para confirmar que la interacción se mantiene fluida.

Usado por

• Stripe, Usa fondos animados de grilla/puntos en sus páginas de producto para transmitir precisión técnica sin sobrecarga visual.
• Resend, Adopta grillas de puntos dispersas y señales reactivas a la proximidad en secciones hero dirigidas a desarrolladores.
• Clerk, Combina un texto hero alineado a la izquierda con fondos animados sutiles para lograr un tono limpio pero interactivo.
• Raycast, Despliega capas de grano y partículas reactivas al puntero en su hero de landing para recompensar el movimiento exploratorio del ratón.

FAQ