Skip to content
The Design Stack

How it behaves

Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.

  • Old page: it moves up by 30% of its height, scales to 0.9 and fades to 20% opacity.
  • New page: it is revealed from the bottom edge upward. A clip starting as a flat line along the bottom grows to cover the whole screen.
  • Timing: both run together over 1.5s on cubic-bezier(0.87, 0, 0.13, 1) (slow start, fast middle, soft landing).
  • Which clicks: only plain left-clicks on same-origin links that change the pathname. It ignores ⌘/Ctrl/Shift/Alt-clicks, middle clicks, target="_blank", download, external links and links with data-no-transition. Same-page #hash links behave normally.
  • Waiting for the new page: the transition captures the new page as soon as its route has rendered, or after 1.5s at the latest.
  • Fallbacks: browsers without the View Transitions API (and reduced motion) navigate normally with no animation.

More prompts