EIS-008 — Crear los componentes de presentación: ScrollStory, AntesAhora y CitaLibro

EIS-008 — Componentes de presentación (scrollytelling)

1. Contexto técnico

Infraestructura visual reutilizada por 3a, 3b, 3c y la comparativa:

• ScrollStory: secuencia de paneles a pantalla (casi) completa con revelado al hacer scroll.
• AntesAhora: dos paneles enfrentados (antes: tinta/rojo desaturado · ahora: claro/oro).
• CitaLibro: cita textual con capítulo y página, estilo editorial (Fraunces).
• LineaTiempo y contadores animados para datos (p. ej. 40-50 % retrabajo).

2. Restricciones de arquitectura

• Animación por CSS scroll-driven con fallback IntersectionObserver (isla única compartida, <15 KB gz). Prohibidas librerías de animación externas.
• prefers-reduced-motion: paneles estáticos apilados, contenido íntegro.
• Los paneles se alimentan de la colección presentaciones (contenido como datos).
• Cada afirmación de un panel lleva capitulo_origen obligatorio (esquema Zod lo exige).

3. Criterios de aceptación (Test-Driven Intent)

criterios:
  - id: C1
    given: "una presentación de prueba con 5 paneles"
    when: "el usuario hace scroll"
    then: "los paneles se revelan secuencialmente sin saltos de layout (CLS < 0.1)"
  - id: C2
    given: "un panel sin capitulo_origen en su frontmatter"
    when: "se ejecuta el build"
    then: "el build FALLA (cada afirmación debe anclar capítulo del libro)"
  - id: C3
    given: "reduced-motion activo o JS deshabilitado"
    when: "se visita la presentación"
    then: "el 100% del contenido es legible en orden, sin animación"

4. Definition of Done

• Componentes documentados en /styleguide con una demo; peso de la isla auditado.