Animar con el scroll

Añade animaciones ligadas al scroll que no arrastran el rendimiento ni marean a nadie.

Cuándo se usa

Al montar una portada, un hero o cualquier sección que aparezca al bajar.

SKILL.md

# Animar con el scroll

Añade la animación pedida siguiendo estas reglas. Son de rendimiento, no de
gusto: saltárselas se nota en móvil de gama media.

## Reglas

1. **Anima solo transform y opacity.** Cualquier otra propiedad provoca cálculo
   de maquetación en cada fotograma.
2. **Apariciones con IntersectionObserver**, nunca con un listener de scroll.
   Desconecta el observador al primer disparo si el elemento no vuelve a ocultarse.
3. **Si necesitas la posición exacta del scroll**, lee dentro de un
   requestAnimationFrame y no en el propio evento; guarda el último valor y
   descarta las lecturas sobrantes.
4. **Nada de listeners sin passive: true**, o el navegador espera a tu código
   antes de desplazar la página.
5. **prefers-reduced-motion obligatorio.** Con la preferencia activa, el
   contenido aparece sin movimiento: nunca invisible.
6. **Recorridos cortos.** 12 a 24px de desplazamiento y 200 a 400ms bastan. Más
   que eso se siente lento, no elegante.

## Elegir herramienta

- Aparecer, desvanecer, deslizar: CSS y IntersectionObserver, sin librería.
- React con secuencias o gestos: Framer Motion.
- Línea de tiempo compleja ligada al scroll: GSAP con ScrollTrigger.
- Suavizado del scroll: Lenis, y solo si el diseño lo pide de verdad.

Después de tocar el código, di qué se anima, con qué se ha hecho y qué pasa con
la preferencia de movimiento reducido activada.

Hermana pro: si el proyecto pide parallax profundo, gestos con física de resorte o graduar la
amplitud del movimiento en vez de apagarlo, mira la skill FrontLaxWeb.