M-09 · Entrada 18 de 25

W9b · Hero + 6 beats animados

Qué es esto

Build de las animaciones (offset-path/GSAP/R3F).

Fase del Bridge

COMBO W9 (M-09) · I-code.

M-09 · W9b — Hero + 6 beats animados

Encargo

Sobre la fundación estática de W9a (landing/web/, tokens naranja #FF6B35 claro, Space Grotesk + Inter), construir el Hero y las 6 escenas animadas que reproducen los frames M-08 (landing/design/frames/) en clave naranja, modo claro, sin glow.

Directiva técnica robusta (genaisapiens):

  • DIRECTIVA 2 — loops/circuitos planos (BEAT3 Execution-to-Capability) se animan vía CSS offset-path + GSAP MotionPathPlugin, NUNCA R3F.
  • R3F SOLO para 3D real: BEAT2 (escalera líquida) y BEAT5 (grafo de capacidades).
  • Compositor-only (transform/opacity/offset-distance), 60fps.
  • prefers-reduced-motion en TODA animación + fallbacks (poster/estático).
  • Context7 (DC-1) consultado antes de escribir GSAP / R3F.

Qué se construyó

  • Hero.tsx — héroe con H1 wedge, lead con vocabulario canónico, CTA, slot ROI vacío.
  • Beat1Bottleneck.tsx — cuello de botella (offset-path, plano).
  • Beat2Ladder.tsx + r3f/LiquidLadderScene.tsx — escalera líquida (R3F, 3D real).
  • Beat3Loop.tsx — Execution→Capability loop (offset-path + GSAP MotionPathPlugin · DIRECTIVA 2).
  • Beat4Map.tsx — mapa (CSS, plano).
  • Beat5Graph.tsx + r3f/CapabilityGraphScene.tsx — grafo de capacidades (R3F, 3D real).
  • Beat6Close.tsx — cierre.
  • _lib/gsap.ts — registro central de GSAP + MotionPathPlugin.
  • _lib/useReducedMotion.ts — hook de reduced-motion (JS) para beats con R3F/GSAP.
  • page.tsx — orquestación con lazy-mount; globals.css — utilidades de motion.
  • Eliminado Beat.tsx (placeholder de W9a, reemplazado por los 6 beats reales).

W9b · A-heartbeat (COMBO-CHECK)

Verificación de progreso sano antes de cerrar:

  • Build PASS — next build (Next 16.2.9 Turbopack): compila en 3.8s, TypeScript limpio en 2.7s, 4/4 páginas estáticas generadas. Cero errores de tipo en los 9 componentes nuevos + 2 escenas R3F.
  • Estructura COMBO sana — A-heartbeat + A-retro registrados en Dev OS (sin COMBO_SEQUENCE_VIOLATION).
  • Sin contaminación de árbol — node_modules/ y .next/ confirmados gitignored (no staged). Artefactos de screenshot (.playwright-mcp/, msr-w9b-hero.png) eliminados de la raíz antes del commit.
  • freeze.lock ausente — commit permitido.

W9b · A-retro + verdict (APPROVE)

Semáforo: GREEN

La ola entrega los 6 beats animados + hero sobre la fundación W9a, respetando la DIRECTIVA 2 (offset-path/GSAP para loops planos · R3F reservado a 3D real), modo claro, tokens naranja, sin glow ni azul, y con cobertura de prefers-reduced-motion en toda animación. Build verde. Gaps registrados son no bloqueantes y de scope posterior (W9d).

Verdict adversarial (default-REJECT) → APPROVE

  • V-review → APPROVE
  • Verdict ID: 23213c03-286e-45ac-8a11-6607662373c2

Gaps registrados (honestos · no bloqueantes)

  1. Beat3Loop y Beat4Map se gobiernan por reduced-motion vía CSS @media global (no usan el hook useReducedMotion JS). La cobertura es correcta, pero menos explícita que en los beats con hook (los de R3F). No bloqueante.
  2. V3-Visual completo (multi-viewport, mobile isMobile, Premium Floor 7-criteria) pendiente para W9d — no es scope de W9b.
  3. NO deploy realizado (correcto · el deploy es W9d).

Deuda / siguiente ola

  • W9d: V3-Visual canonical (multi-viewport + mobile + Premium Floor) y deploy.
  • Considerar unificar la gobernanza de reduced-motion (hook JS también en Beat3/Beat4) para coherencia, aunque la cobertura CSS actual ya es funcionalmente correcta.