Journal — M-08 · W-frames-scenes (keyframes hi-fi beats 1-6)

Rafaella (D-wireframe), 2026-06-18. Producción de los 6 keyframes hi-fi de la landing Momentum Skills, continuación del frame hero ya aprobado (hero-beat0.html). Método ARP (c): ficheros HTML+CSS autocontenidos con los tokens 1:1 de design-system.md, etiquetados “FRAME · no build” discreto abajo (lección del hero: no solapar contenido). No es el build — son el checkpoint CEO antes de M-09.

Por qué frames y no build

Art-direction-locked Q4=A: frames Figma primero (todo) → control de gusto upfront antes de codear. El build (Next + R3F + GSAP) es M-09. Estos frames congelan el keyframe representativo de cada escena (el instante dramático), no la timeline completa. Para las 3 escenas R3F, el frame muestra el estado de clímax que el shader/instancing debe alcanzar; el motion real lo especifica motion-specs.md.

La tensión central de M-08, resuelta frame a frame

art-direction-locked §⚠️: data-viz orgánica (Q1) + fondo CLARO (Q3) tiran en direcciones opuestas. El R3F “respira/brilla” es trivial en oscuro (profundidad por luz/glow). En claro institucional la organicidad se talla por otra vía. La regla que apliqué en los 6: profundidad por sombra editorial + contraste de superficie + peso tipográfico + micro-motion; JAMÁS glow/neón. El acento azul-evidencia se reserva (aparece poco, con intención) — su escasez es su peso.

Beat a beat — decisiones de arte

BEAT 1 — Cuello de botella (Canvas 2D + GSAP en build)

• Idea: generar es barato, verificar es lo escaso. Vértigo controlado por asimetría brutal, no por color de alarma (decisión de dirección del sistema §1.4: el dolor NO se pinta de rojo).
• Cómo: torrente denso de fragmentos --color-text-muted desbordando arriba (sensación de inundación) vs. embudo estrecho abajo donde solo pasa una fracción. Las 3 cifras MEDIDAS entran como 3 haces --color-evidence que convergen al cuello = triangulación visible (3 métodos, una dirección).
• Guardarraíles: cada cifra con su id del corpus en mono (D1D5-001/002/003, MEDIDO); la 4.ª (D1D5-004) etiquetada ILUSTRATIVO y des-jerarquizada (borde hairline, no teal). El slot ROI [reducción de time-to-competence — a validar] en marco punteado que pulsa y se niega a llenarse (@keyframes refuse) — la honestidad como diferencial de due diligence. Nunca se rellena.

BEAT 2 — Escalera líquida ★R3F (ShaderMaterial fluido + dissolve en build)

• El reto de arte central: vender “el material que CUAJA” en claro, sin que el peldaño “se encienda”.
• Resolución claro+orgánica: el “cuajar” = degradado de material que solidifica (los peldaños guided/assisted son líquido translúcido hsl(168 .. / 0.30-0.42) con borde tenue; el peldaño verified es superficie opaca --color-evidence con highlight de borde superior = tensión superficial por material, no por emisión) + sombra --shadow-md que NACE al solidificar (los líquidos no tienen sombra; el cuajado sí) + contraste de superficie (el peldaño cuajado se eleva del pozo --color-surface-sunken). El andamiaje se DISUELVE (dissolve: las barras del scaffold pasan a hairline casi-transparente con @keyframes dissolve), no se apaga. autonomous queda como contorno dashed (futuro, no cuajado).
• Continuidad: el peldaño verified emite la partícula-semilla de evidencia hacia arriba (@keyframes eject) → es la semilla del loop del BEAT 3. Mismo “diseño” de partícula compartido entre escenas.
• Guardarraíl: la deuda se nombra en voz alta (autocrítica = credibilidad de instrumento). V1 mide execution; capability es claim de segundo orden.

BEAT 3 — Loop motor ★R3F (InstancedMesh + depth + barras scale.y en build)

• El “ajá”: no se trata de tener un mejor juez, se trata de no ser el juez.
• Resolución claro+orgánica: profundidad REAL por superposición + escala (las partículas/nodos lejanos son .far más pequeños/tenues; los cercanos opacos) + sombra --shadow-md bajo cada chip (sombra de contacto). El firewall = cristal translúcido (hsl(222 70% 45% / 0.04-0.10) + backdrop-filter + highlight de borde interior) — transmisión física, deja ver el fondo, NO emite. El criterio entra desde fuera del loop (flecha externa que cruza la membrana) → rompe la circularidad del LLM-judge visualmente.
• Firma de honestidad: cada nodo lleva una barra de error que RESPIRA (@keyframes breathe sobre scale.y, --color-error-bar cool-neutral, --dur-breath lento) — rigor como textura, no número falsamente preciso. (En reduced-motion no respira.)
• Guardarraíl: cifra D6-001 (g=0,86→0,40) con id; “Momentum mide lo que sobrevive a la demora”.

BEAT 4 — Mapa agregado (Canvas/SVG + GSAP + veto interactivo en build)

• VARIANT calma institucional (root #10/#12 acotado solo a este beat, no gobierna viewport completo).
• Resolución claro+orgánica: el mapa se rellena por intensidad de fill --color-audit slate (5 niveles i1..i5, opacidad 0.10→0.72), NO por luminosidad — “tranquiliza, no alarma”. Profundidad por borde + sombra interior sutil, cero glow.
• Guardarraíles duros: las zonas son proceso/rol/equipo, JAMÁS individuo (etiquetas literales: “proceso · onboarding”, “rol · analista”, “equipo · datos”). Candado permanente “nivel agregado · no es scoring”. El veto al zoom-a-persona materializado como overlay (“Zoom a persona vetado · la granularidad individual está físicamente fuera del sistema”) = la restricción hecha interacción. Texto contractual «No es scoring de rendimiento ni base para decisiones de RRHH.» en bloque slate (texto invertido 8.36:1), no nota al pie. Cifra D3-015 con verbos observacionales (cero “rol expuesto → rol desplazado”). “AI adoption you can audit.”

BEAT 5 — Grafo que se teje ★R3F (procedural + force-layout + depth en build) + CTA-epílogo

• Resolución claro+orgánica: crecimiento generativo por superposición + escala (nodos lg/md/sm por profundidad) + sombra que asienta el grafo estable. El GROSOR de la arista (no la luz) codifica evidencia de transferencia: .strong gruesas teal (bien-transferidas), .weak finas hairline (débiles). Barras de error por nodo (coherencia con BEAT 3). Cero neón.
• Cierre del círculo: la marca de agua del sello del BEAT 0 reaparece tenue al fondo (lo que prometió el hero, aquí construido). “2027+ · falsable” + “exportable · es tuyo” (portabilidad = parte del moat).
• Guardarraíles: la categoría (Verified Capability Graph, Verification Economy) vive en el cuerpo, nunca en titular. “2027+ hipótesis falsable” visible. Señal Nadella como telón de fondo. CTA único, sobrio, focus-visible inviolable.

BEAT 6 — Cierre / epílogo enterprise

• Decisión de conteo: el storyboard funde el CTA-epílogo dentro de BEAT 5 (6 escenas dramáticas 0-5). La tarea M-08 pide 6 keyframes (beats 1-6) + un cierre “AI adoption you can audit + señal Nadella” dedicado. Lo materializo como frame de cierre dedicado: el sello del hero reaparece completo (no marca de agua tenue, sino el sello cerrado), el claim “AI adoption you can audit” a pantalla con peso de display, y las 5 objeciones retiradas en chips con check teal (prueba de que cuando el visitante llega, ya no hay objeción viva — el arco hizo el trabajo). CTA único sin urgencia fabricada, “2027+ falsable”, señal Nadella.
• Es la salida del clímax (moat construido → acción), coherente con la nota de dirección del storyboard.

Fidelidad al hero aprobado

Tokens 1:1 (design-system.md §3), sombra editorial fría (--shadow-color:222 25% 18%, baja opacidad), grano de papel sutilísimo (radial-gradient 0.012), etiqueta FRAME mono discreta abajo-izquierda (no solapa, lección del hero que la tenía arriba), prefers-reduced-motion contemplado en cada frame (barras no respiran, dissolve para, partículas estáticas, CTA sin transform), focus-visible en todo elemento operable.

Verificación V-visual DC-2 (real, no self-report)

• Render: Python Playwright headless aislado, viewport 1440×900, DSF 2 (no toca Chrome 9255). 6 PNG + 1 full-page (beat-1).
• Vision pass por los 6: asimetría/triangulación (B1) ✅ · cuajar sin glow + fix de etiquetas recortadas (B2) ✅ · firewall cristal + barras respiran + “ajá” (B3) ✅ · slate por intensidad + veto + candado (B4) ✅ · grosor de arista + marca de agua del sello (B5) ✅ · cierre con sello completo + 5 objeciones + Nadella (B6) ✅.
• Fix aplicado: en BEAT 2 la etiqueta del peldaño “verified” se recortaba por overflow:hidden; reposicionada dentro del marco (sobre la superficie cuajada, texto blanco 8.36:1). Re-render verificado.

Cumplimiento de guardarraíles (los 6)

Pendiente para M-09 (build)

• Los frames son el contrato visual. El build implementa el motion real (R3F en 2/3/5, Canvas 2D en 1/4, SVG+GSAP en 0) contra estos keyframes.
• Tras checkpoint CEO de los frames: widgets standalone → page composition → V3-Visual (Premium Floor 6-7 human-eye + visual-critic adversarial 3-lens).
• Nota de continuidad de objeto (sello→embudo→escalera→partícula→loop→nodos→mapa→aristas→grafo→marca de agua) a preservar en el scroll continuo del build.

Ficheros

• landing/design/frames/beat-1.html · beat-2.html · beat-3.html · beat-4.html · beat-5.html · beat-6.html
• PNG: beat-1.png (+ beat-1-full.png) · beat-2.png · beat-3.png · beat-4.png · beat-5.png · beat-6.png

W-frames-scenes · A-retro + verdict (APPROVE)

Semáforo: GREEN. COMBO W-frames-scenes (M-08) cerrado.

A-heartbeat (CHECK)

• SKU registrados en Dev OS: A-heartbeat 779f78cc · A-retro 7743c6b2 (combo_state a3e08d20). Sin COMBO_SEQUENCE_VIOLATION.
• 6 keyframes hi-fi entregados (beat-1..beat-6.html + .png · beat-1-full.png). V-visual DC-2 real (screenshot+Vision) en las 6 escenas.
• Sin freeze.lock. Sin screenshots temporales sueltos en root (los PNG viven en landing/design/frames/, en scope). .playwright-mcp/ = salida temporal aislada, NO se commitea.

Cotejo guardarraíles (art-direction-locked.md = LEY)

• Fondo claro hueso en los 6 beats · cero glow/neón · profundidad por sombra/contraste/peso/micro-motion. ✔
• Headline no vetado (“El cuello de botella ya no es generar. Es verificar”). ✔
• Cifras medidas con id de corpus en mono (D6-001 g=0,86→g=0,40 · D3-015). Nivel agregado. ✔
• Slot ROI NO rellenado — copy explícito “no rellenamos con una cifra inventada” + “[reducción de time-to-competence — a validar con telemetría propia]”. ✔
• Veto a persona materializado (“Zoom a persona vetado · granularidad individual físicamente fuera del sistema”). Cero rol→desplazamiento (“la exposición a IA no predice desplazamiento”). ✔
• Sello VERIFIED OUTPUT persistente (anillo acento + check teal) · “2027+ hipótesis falsable” · CTA-epílogo único en acento azul. ✔
• Beat 4 color-audit por fill (no luminosidad) · bloque contractual “No es scoring”. ✔

A-retro (verdict)

• V-review id eb3ab8c4-41b2-49fa-8b74-6be3ce3614a9 → APPROVE (vvisual=true · scenes=6). Verdict no fabricado: replica el resultado de la review.
• Advisor verdict creado en Dev OS: f8e8d517-41f6-46b2-948b-7eed2c633313 (APPROVE · binario · §S24).
• Work item da6c9ab1 → DONE.
• Frames = checkpoint CEO. NO se construyó código. Build del sitio diferido a M-09.

Siguiente

• Checkpoint CEO sobre los 6 keyframes antes de M-09 (build). Preservar continuidad de objeto (sello→embudo→escalera→partícula→loop→nodos→mapa→aristas→grafo→marca de agua) en el scroll continuo.