Scroll to swing through the city
Every swing is momentum made visible — the arc, the release, the free-fall between skyscrapers.
Rendered frame by frame, the skyline reacts to your scroll like a living comic panel.
This is where friendly-neighborhood becomes legend. Keep scrolling.
A frame-sequence engine scrubs pre-rendered cinematics against your scroll position — buttery on desktop, tuned for mobile Safari. No video element, no jank, just pinned canvas magic.
A second pre-rendered sequence takes over — same engine, new set of frames, seamless hand-off.
Speed up, slow down, reverse — the animation obeys your wheel because it's tied to scroll math, not a clock.
Two canvases, one continuous story. That's the premium scroll-site pattern.
A 500vh section pins a full-screen canvas and scrubs through a pre-rendered image sequence based on clamped scroll progress — the exact Apple-AirPods / Igloo technique.
One queued frame at a time. Zero synchronous scroll writes.
Canvas draws & opacity via refs — state only flips visible cards.
Retina-crisp. Frames drawn like object-fit:cover, centered, with mobile 1.3× zoom.
Physics-based smoothing with Safari-safe defaults for that weightless glide.
Both hero sections are tall (500vh) parents holding a position:sticky canvas. As you scroll, we compute progress from the section's bounding rect, pick a frame index, and draw it with a cover-fit blit. No <video> tag — it's a scrubbed image sequence, which is why it never stutters.
Your two Spider-Man clips were exploded into JPG image sequences with ffmpeg, downsampled and quality-tuned, then preloaded up-front behind the loading bar so no frame ever renders blank.
Yes — passive scroll listeners, RAF batching, a device-pixel-ratio-aware canvas, and a 1.3× mobile zoom so the subject reads well on small screens. Scroll smoothing uses Safari-safe settings.
Absolutely. Swap the image sequence, update the frame count, and the same engine drives it. The downloadable project version loads frames from folders so you can drop in higher-res renders.
Two cinematic scroll scenes, a full neumorphic design system, and a performance-hardened frame engine — all in one page.