Overview

Each section (hero, character reveals, videos, outro) is orchestrated to the user’s scroll progress. Carefully tuned timelines with scrub and pin keep motion “frame‑perfect,” while targeted preloading and lazy media improve perceived smoothness.

Key sections

• Hero with masked headline and a bold, cinematic entry.
• Pinned video sequences that advance via currentTime tweening synced to scroll.
• Character reveals using gentle parallax and measured easing for depth.
• Outro that cleanly “lands” the narrative.

Animation and performance

• Per‑section timelines with calibrated start/end and debug markers in dev.
• Text masking via mask-image for elegant, low‑overhead reveals.
• Lightweight scroll parallax to avoid jank.
• Lower CLS/LCP through optimized assets and careful pinning.

UX and accessibility

Responsive Tailwind layout, readable contrast, and accessible video controls. The progression remains clear even with non‑linear input, and a few strategic highlights guide attention at key moments.