SPIDER-MAN: Brand New Day

Demo de portfolio (no oficial) para una oferta que pedía navegación fluida y aguantar picos de tráfico: el efecto wow es Spider-Man columpiándose al ritmo del scroll, resuelto con GSAP ScrollTrigger y una secuencia WebP en canvas, sin SSR. Incluye hero, holds de countdown/galería/CTA, islas React mínimas (timer y modal del tráiler) y contenido centralizado en movie.ts. Respeta prefers-reduced-motion.

Ver Demo

Capturas del Proyecto

1 / 6

Qué aprendí

Mapear el scroll a un índice de fotogramas con GSAP ScrollTrigger sin cargar todo a la vez
Mantener Astro estático y aislar interactividad en islas React mínimas
Curar y versionar fotogramas WebP (desktop/mobile) coherentes con FRAME_COUNT
Centralizar copy y beats en una sola fuente (movie.ts) para no duplicar en los .astro

Información extra

Proyecto fan-made / no oficial; sin vínculo con Sony ni Marvel.
Los fotogramas se extraen de un vídeo fuente con ffmpeg y se curan a mano en public/frames.
Desplegado en Vercel como sitio estático (output: static).

Detalles Técnicos

•Astro 7 (output static) + TypeScript strict
•GSAP + ScrollTrigger; canvas con ventana deslizante de fotogramas
•Tailwind CSS 4; islas React (countdown, modal tráiler)
•ffmpeg para extracción de frames; Prettier + CI de formato