A giant outlined word fills the screen, then shrinks dramatically as a glowing orb emerges from inside it — and the hero copy fades in over the top. The Apple "camera diving in" moment.
A choreographed scroll moment where one element scales massively as you scroll — usually from huge to small, sometimes the reverse — while a second element grows from invisible to fill the same space. The visual effect is the camera "diving in" or "pulling out." Used a lot for product launches, brand reveals, and any moment where you want a scroll gesture to feel like a cut in a film.
Sticky-pinned stage. Inside, two main elements with opposite scale curves driven by the same --p scroll variable. The hero word starts at scale(20) (fills the screen, partially clipped) and scales to scale(0.4) as --p goes 0→1. Simultaneously, a centered orb starts at scale(0.05) with a heavy filter: blur(20px), scales up to scale(1.4) and unblurs as it grows. A second progress value (--p2) — only active in the last 40% of the scroll — fades in the hero copy text on top.
Scroll inside. The huge outlined "AURORA" shrinks and the orb grows. At the end, the hero copy appears.
v0.4 is live · scroll up to replay
Build a cinematic pin-and-zoom scroll moment. Outer scroll container (overflow-y:scroll) with a tall inner section (2200px). Inside the tall section put a sticky pin (position:sticky top:0 height:100vh overflow:hidden). Inside the pin: (A) A huge outlined display-serif WORD ("AURORA" or your brand) absolutely centered, font-size 80px, color:transparent, -webkit-text-stroke:1.5px white-70%. Its transform is translate(-50%,-50%) scale(calc(20 - var(--p) * 19.6)) — so at --p:0 it's scaled 20× (essentially fills the screen, clipped), and at --p:1 it shrinks to 0.4×. Add opacity fade so it disappears in the last 25% of the scroll. (B) A centered orb (380px circle, radial-gradient white→amber→pink→violet→dark) with filter:blur(20px) and transform: translate(-50%,-50%) scale(calc(0.05 + var(--p)² * 1.4)). Filter blur decreases as --p grows (unblurring as it comes into focus). (C) The final hero copy (eyebrow + display headline + caption) absolutely centered, opacity:var(--p2) where --p2 is a sub-progress = max(0, (--p - 0.6) * 2.5), so the copy fades in only in the last 40% of the scroll. Scroll listener computes both --p and --p2 from the tall section's scroll progress. Bottom progress bar and top "Phase N / 3" counter complete the cinematic chrome.