Two riveted steel panels split apart down the middle as you scroll, revealing a glowing room behind them. Mechanical doors with a beam of light spilling through.
Two heavy panels meet down the middle of the screen — like elevator doors, a bank vault, an airlock. As you scroll, they slide apart in opposite directions. The space they reveal is bright, atmospheric, the actual content. A beam of warm light spills out from the gap as it widens. Used by event launches, immersive product reveals, and any moment that wants to feel "the show begins now."
Two 50%-width panels positioned at the left and right edges. The left panel transforms translateX(calc(var(--p) × -100%)) (slides off-screen to the left); the right panel does the opposite. Behind them, the "inside" is a full-bleed background — gradient + content that fades and scales up as it's revealed. A vertical light-beam div in the middle uses width: calc(var(--p) × 100%) and mix-blend-mode: screen to spill a warm tint outward as the doors widen.
Scroll inside. The vault doors slide apart and the room glows warm gold behind them.
Batch 12. Numbered. Signed. Waiting for you.
Build a scroll-driven "vault doors opening" animation. Sticky pin (top:0 height:100vh overflow:hidden) inside a 2400px section. Inside the pin, layer (back to front): (A) the INSIDE — a full-bleed dramatic gradient room (radial accent glow + violet gradient base + inner vignette) with hero copy centered (eyebrow + display headline with italic accent + paragraph). The copy starts at scale(0.85) opacity:0 and grows to scale(1) opacity:1 as --p increases — "comes into focus" as the doors open. (B) a "light beam" div centered horizontally, width:calc(var(--p) * 100%), with a horizontal gradient (transparent → warm-amber tint → transparent) and mix-blend-mode:screen so it tints the inside warmly as the gap widens. (C) TWO door panels, left and right, each 50% width, full height. Each door has a metallic linear-gradient background simulating brushed steel, a thin inset border for panel framing, and a column of rivets along the inner edge (background-image:radial-gradient pattern). The left door translateX(calc(var(--p) * -100%)) and the right door translateX(calc(var(--p) * 100%)) — they slide off-screen in opposite directions as --p approaches 1. Add a small "Lock SEALED / OPENING / OPEN" readout in the corner. Apply peak-at-middle easing so the doors open, hold, and close again as the user scrolls past.