Six camera-shutter blades open from the center, revealing the scene behind them. As you scroll: closed → open → closed. Pure mechanical satisfaction.
A circular wipe-reveal modelled on a real camera aperture: 6 (or more) triangular "blades" pivot away from the center, exposing whatever is behind them. As you scroll, the blades open, hold open at peak, then close again. The mechanical satisfaction of physical photography hardware — used by film festival sites, photography portfolios, premium camera brands, and any "scene begins" hero.
Six absolutely-positioned blade divs at the center of the stage. Each blade is a triangle (via clip-path: polygon(50% 50%, 100% 0, 100% 100%)) rotated to its position around the iris (0°, 60°, 120°, ...). The whole blade also translates outward (translateX(-120px)) and rotates extra when closed, then settles into place when open. Drive everything with a single --p scroll variable that interpolates between closed and open states. The world behind reveals as the blades clear.
Scroll inside. The aperture opens, holds, and closes — like a real camera firing.
A short film about waiting.
Build a scroll-driven camera-iris reveal animation. Sticky pin (top:0 height:100vh) inside a tall 2400px section. Inside the pin, layer (back to front): (A) "world" div with a dramatic sunset gradient + the hero copy you want revealed (eyebrow + display headline with italic accent + paragraph); (B) "iris" container with 6 BLADE divs centered; (C) outer chrome ring of two faint circular borders (camera lens chrome). Each blade is a 80%-sized div clipped to a triangle wedge via clip-path:polygon(50% 50%, 100% 0, 100% 100%), pre-rotated to its angle (0/60/120/180/240/300 degrees via --rot custom property). Transform formula on every blade: translate(-50%,-50%) rotate(var(--rot)deg) translateX(calc((1 - var(--p)) * -120px)) rotate(calc((1 - var(--p)) * -40deg)) — when --p:0 blades are fully retracted to the center and rotated shut, when --p:1 they're spread open into their hexagonal aperture position. JS scroll listener computes 0-1 progress; map it with a peak-at-middle curve (1 - |p - 0.5| × 2) so the iris opens, holds, then closes. The world behind also scales 0.85 → 1 and fades 0 → 1 in sync. Display an f-stop readout (f/22 → f/1.4) and a "CLOSED / OPENING / OPEN / CLOSING" state label that update with progress.