Back to Projects
Finished
DemoPrivate
AstroTypeScriptGSAPTailwind CSSReactCanvas2026

SPIDER-MAN: Brand New Day

Portfolio demo (unofficial) for a job brief that asked for fluid navigation and traffic spikes: the wow is Spider-Man swinging in sync with scroll, done with GSAP ScrollTrigger and a WebP sequence on canvas, no SSR. Includes hero, countdown/gallery/CTA holds, minimal React islands (timer and trailer modal), and copy in movie.ts. Honors prefers-reduced-motion.

View Demo

Project Screenshots

SPIDER-MAN: Brand New Day — vista previa

1 / 6

What I learned

  • Map scroll progress to a frame index with GSAP ScrollTrigger without loading every frame upfront
  • Keep Astro static and isolate interactivity in minimal React islands
  • Curate and version WebP frames (desktop/mobile) aligned with FRAME_COUNT
  • Centralize copy and beats in one source (movie.ts) so .astro files stay free of hardcoded text

Extra information

  • Fan-made / unofficial project; not affiliated with Sony or Marvel.
  • Frames are extracted from a source video with ffmpeg and curated by hand in public/frames.
  • Deployed on Vercel as a static site (output: static).

Technical Details

  • •Astro 7 (static output) + strict TypeScript
  • •GSAP + ScrollTrigger; canvas with a sliding frame window
  • •Tailwind CSS 4; React islands (countdown, trailer modal)
  • •ffmpeg for frame extraction; Prettier + format CI