A horizontal filmstrip with 8 frames passes through a projector gate as you scroll. Each frame fills the gate, then exits stage-right. Cinema/agency-portfolio vibe.
A horizontal strip of frames (think 35mm film) moves left across a fixed "gate" as you scroll vertically. The strip has sprocket holes above and below; each frame is a small scene or chapter. It's a way to take a horizontal sequence of content and turn vertical scroll into temporal playback — perfect for portfolios that present projects sequentially, conference-day timelines, or a "year in review" format.
A fixed-position "gate" — a window-shaped div with thick black/bronze borders and overflow: hidden. Inside the gate, an absolutely-positioned filmstrip display: flex with 8 frame divs (320px wide each, 40px margin between). The strip's transform: translateX is driven by scroll progress: translateX(calc(--p × -2240px + 230px)) — total travel is exactly (8 frames × 360px) − gate width, so the strip travels precisely through all frames. Decorative sprocket-hole patterns above and below the gate use repeating-linear-gradient.
Scroll inside. The filmstrip slides left through the gate — eight frames, each its own scene.
Build a scroll-driven cinema filmstrip. Sticky pin (top:0 height:100vh) inside a 2800px-tall section. Inside the pin, center a "projector gate" — a 460×280 div with thick black inner border, surrounded by chunky 14px brown/bronze outer borders, with overflow:hidden and deep box-shadow. Inside the gate, an absolutely-positioned filmstrip with display:flex containing 8 frame divs (each 320px wide, 40px right-margin), each with a different gradient background and content (number "01 / 08" + serif headline with italic accent — write a short film treatment across the frames). The filmstrip's transform is translateX(calc(var(--p, 0) * -2240px + 230px)) — so as --p goes 0→1, the strip slides left through the gate, presenting each frame in turn. Above and below the gate (extending sideways past the edges) place decorative sprocket-hole strips using repeating-linear-gradient (transparent 0 14px, dark 14px 22px) for the iconic 35mm film perforations. Add a "Reel 04 · 35mm · 24 fps" header label and a "Frame N · Now playing" counter that updates with current visible frame index. JS scroll listener computes 0→1 and assigns --p.