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.

  • Cover: both sheets jump below the viewport, then slide up to cover it in 0.55s with cubic-bezier(.76,0,.24,1). The red sheet leads; the dark one follows 0.1s later, so a red edge leads the wipe.
  • Navigate: once covered, the new route is pushed (with scroll: false) and the window scrolls to the top (or to the #hash target) while still hidden.
  • Reveal: as soon as the new pathname renders, both sheets slide off the top in 0.8s — the dark one first, the red trailing by 0.1s.
  • Only intercepts plain left-clicks on same-origin links that change the pathname. Ignores ⌘/Ctrl/Shift-clicks, middle clicks, target="_blank", download, external links and links with data-no-transition. Same-page #hash links smooth-scroll instead.
  • useTransitionReady() is false while a page is covered, so entrance animations on the new page can wait for the reveal.
  • Safety nets: if the animation stalls (background tab), it navigates after 900ms and uncovers after 1.5s anyway.
  • Reduced motion: no curtain — normal instant navigation.

More prompts