Sticky Hero

A hero section that stays pinned to the top of the viewport while the user scrolls past it, then scales down and fades as it exits. The effect makes the transition into the article body feel cinematic without hijacking scroll.

Anatomy:

• An outer .stage taller than the viewport — its height controls how long the hero stays pinned
• The hero is position: sticky inside the stage
• animation-timeline: view() on the hero binds a scale/fade animation to its exit progress
• Browsers without scroll-driven animation support see a normal sticky hero — no broken layout

If you'd rather use the unified trigger system, swap the custom animation for an entrance-slot effect plus data-trigger="view-progress:exit":

This gives a fade only. For combined scale-out you currently still want the custom keyframe shown above — bundled scale+fade is a future addition. See the view-progress trigger docs.

• Stage height controls timing. A 2× viewport stage gives a comfortable hero pin. Make it 3× for a slower exit, 1.5× for a quicker one.
• The animation-range negative start (exit -10%) starts the animation just before the hero actually begins exiting, so it feels responsive at the top of the scroll-out.
• Don't set overflow: hidden on the stage — it breaks position: sticky.