---
id: animacion-entrada
status: proposed
kind: new
sprint: 6                        # pestaña "Sprint Nueva Arquitectura" del sheet de arquitectura

target:
  block: global
  based_on: sek-motion.js
  see: https://institucioneducativaseki5.sg-host.com/

evidence:
  used_in:
    - output/pages/sek-schools/educacion-infantil.html
    - output/pages/sek/ucjc.html
  figma: "1708:35304"

fields:
  - { name: wave_base, type: number, default: 40, label: "Amplitud de la primera pieza" }
  - { name: wave_step, type: number, default: 60, label: "Incremento por pieza" }

tokens: []

behaviour:
  - **Escalón de entrada** con la **ola del propio theme** (`[data-sek-wave]` en el contenedor
    y `[data-sek-wave-col]` con la amplitud en cada hijo): 40 la primera pieza y 60 más por
    cada siguiente, hasta la quinta. No se implementa aparte: el theme ya lo tiene y su rAF es
    compartido con el parallax
  - **Regla del overtitle**: se dibuja de izquierda a derecha al entrar en pantalla
    (`scaleX` desde el origen izquierdo, 900 ms), una sola vez
  - **Contadores**: los números suben desde cero hasta su valor, respetando el formato del
    texto — «+25», «100 %» o «50/50» terminan leyéndose igual
  - Todo se apaga con `prefers-reduced-motion: reduce`

accept:
  - El escalón sigue al scroll: al parar a media altura, las piezas se quedan a medio camino
  - La regla no se redibuja al volver a pasar por la sección
  - Un contador con signo o símbolo termina exactamente con el texto original

built:
  branch:
  commit:
  notes:
---

# Animación de entrada

Tres gestos que hoy no existen en el theme y que la maqueta ya lleva en las siete páginas.

El **escalón** no se implementa aparte: **es la ola que ya tiene `sek-motion.js`**. Marcar el
contenedor con `data-sek-wave` y cada hijo con su `data-sek-wave-col` basta, y así el gesto
comparte el rAF con el parallax —el propio theme lo comenta: *"the wave and the media parallax
that reads these moved frames stay in lock-step, smooth, no stepping"*—.

Lo intentamos con un script propio y se veía **a saltos**: dos animaciones escribiendo el mismo
`transform` desde bucles distintos. Ajustar la amplitud aquí es un cambio **global del
componente**, que es como debe funcionar.

La **regla del overtitle** y los **contadores** sí son de una sola pasada, con
`IntersectionObserver`.