Direct answer
Use view transitions for same-origin navigations where a shared element (header, card) should persist. Do not use them to hide slow HTML. Honor `prefers-reduced-motion` by disabling the animation.
The CSS View Transitions Module Level 1 defines the opt-in. Support is no longer exotic in 2026, but it is still a progressive enhancement.
INP and motion
A transition that blocks input is a regression. web.dev’s INP guidance: keep event handling under 200 ms at p75. Animate transform and opacity, not layout.
A practical sequence
Enhance, do not require.
- Ship the site without transitions first
- Add a reduced-motion kill switch
- Name one shared element, not twenty
- Test keyboard focus after the transition
- Drop the effect if it adds layout shift
Portals and panels
Operator queues and portal tables rarely need cinematic route motion. Prefer instant updates and a visible selected state. Motion is not a substitute for a back button on mobile.
What to send if you want a senior review
Share whether the site is a static export (full page loads) or a client router. Related work at Kiwi: design system and product UX optimization.
Frequently asked questions
Do view transitions work on static export?
Cross-document transitions can, where the browser supports them. They are still optional. Do not make information appear only after the animation.
Are they an accessibility requirement?
No. If you animate, reduced-motion users must get an equivalent state without the motion. WAI fundamentals still apply.
Will this increase conversions?
It can make a site feel finished. It is not a conversion claim. Measure enquiry starts, not animation frames.
Sources
- W3C — CSS View Transitions Module Level 1
- web.dev — Interaction to Next Paint
- W3C WAI — Accessibility fundamentals
Figures cited above are drawn from the linked publications and are the responsibility of their sources; we date and scope them rather than presenting them as universal guarantees.