🇪🇸 React Alicante 2026

Visual Continuity on the Web: My Journey With View Transitions

View transitions promise app-like fluidity on the web, but integrating them into real products isn’t always just about a few API calls—it’s a journey.

In this talk, I’ll share my story of adopting view transitions at work. We’ll discuss how browsers implement them (e.g., how snapshots are taken, how animation pseudo-elements are orchestrated, and how promises let you hook into the lifecycle). We’ll also explore how frameworks like Astro and React integrate view transitions into both SPA and MPA workflows.

Last but not least, we’ll discuss real-world patterns, gotchas, and lessons learned around edge cases, accessibility concerns, fallback strategies, and performance considerations.

Transcript

1. Hola, Alicante! 👋 🇪🇸 VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS • SEPTEMBER 26, 2026.
2. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚛ CHAIR @ REACT SUMMIT NYC ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ ✍ YTHECOMBINATOR
4. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS Preamble
5. #question 🤔 Who here has heard of View Transitions?
6. #question 🤔 Who here has worked with View Transitions?
7. #disclaimer 🚨 This is not an introduction to View Transitions.
9. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS
10. #question 🤔 fi Who here likes to ll out surveys?
11. OUR CONTEXT
12. OUR CHALLENGES
13. OUR CHALLENGES ↝ SURVEY FATIGUE IS A WELL-DOCUMENTED PHENOMENON THAT LEADS TO ABANDONMENT AND INCOMPLETE RESPONSES. ↝ LONG SURVEYS CAN SEE COMPLETION RATES DROP DRAMATICALLY AS THE NUMBER OF QUESTIONS AND PAGES INCREASES.
14. #insight 💡 What if we could make survey navigation feel less like page loads and more like a conversation?
15. #insight 💡 Actual Performance ≠ Perceived Performance
16. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS
17. ACTUAL PERF ≠ PERCEIVED PERF
18. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS The Basics
19. THE BASICS: APP-LIKE NAVIGATIONS — SMOOTH TRANSITIONS WITH THE VIEW TRANSITION API • BRAMUS
20. THE BASICS: APP-LIKE NAVIGATIONS
21. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS
22. THE BASICS: ONE MODEL, TWO WORLDS SAME-DOCUMENT • SPA document.startViewTransition(async () CROSS-DOCUMENT • MPA { @view-transition { await updateTheCurrentDocument(); navigation: auto; > } = });
23. THE BASICS: ONE MODEL, TWO WORLDS I) CAPTURE OLD VISUAL STATE. II) ESTABLISH THE NEW APPLICATION/DOCUMENT STATE. III) CAPTURE NEW VISUAL STATE. IV) BUILD THE SAME TRANSITION PSEUDO-ELEMENT TREE. V) ANIMATE WITH THE SAME CSS MODEL.
24. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS Same-Document (SPAs)
25. SINGLE-PAGE APPLICATIONS ↝ ONE DOCUMENT SURVIVES THE ENTIRE CHANGE. ↝ YOUR APPLICATION OWNS THE DOM MUTATION. ↝ startViewTransition CAPTURES THE OLD STATE, RUNS THE UPDATE, THEN CAPTURES THE NEW STATE. ↝ RENDERING AND INPUT ARE SUPPRESSED DURING THE STATE CHANGE.
26. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS Cross-Document (MPAs)
27. MULTI-PAGE APPLICATIONS ↝ THE OUTGOING AND INCOMING VIEWS BELONG TO DIFFERENT DOCUMENT OBJECTS. ↝ THE BROWSER OWNS NAVIGATION AND STATE CAPTURE. IT’S ALSO THE ONLY ACTOR THAT SEES BOTH SIDES. ↝ BOTH DOCUMENTS OPT IN DECLARATIVELY. ↝ JAVASCRIPT IS OPTIONAL FOR THE BASIC TRANSITION.
28. Hunt esley ject L y b ro ed Creat he Noun P t m fro MULTI-PAGE APPLICATIONS — CROSS-DOCUMENT VIEW TRANSITIONS FOR MULTI-PAGE APPLICATIONS • BRAMUS
29. #win 🏆 No need to force an MPA to become an SPA just to get continuity.
30. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS Our Context
31. OUR CHALLENGES…
32. OUR CHALLENGES…
33. OUR CHALLENGES… — SUPERCHARGE WEB UX WITH VIEW TRANSITIONS! • BRAMUS, REACT BRUSSELS 2024
34. OUR CHALLENGES…
35. OUR CONTEXT: VISITORS
37. OUR CONTEXT: ARCHITECTURE MANAGEMENT PLATFORM AUTHOR SURVEY DEFINITIONS GENERATE RESPONSE RECORDS ANALYTICS & REPORTING
38. OUR CONTEXT: ARCHITECTURE RENDERING LAYER LOADING DEFINITIONS MANAGEMENT PLATFORM AUTHOR SURVEY DEFINITIONS GENERATE RESPONSE RECORDS DEFINITIONS ⇢ SERVER-RENDERING HTML ANALYTICS & REPORTING INLINING DATA AS JSON
39. OUR CONTEXT: ARCHITECTURE MANAGEMENT PLATFORM RENDERING LAYER AUTHOR SURVEY DEFINITIONS LOADING DEFINITIONS GENERATE RESPONSE RECORDS ANALYTICS & REPORTING DEFINITIONS ⇢ SERVER-RENDERING HTML INLINING DATA AS JSON ⇣ HTML SHELL + INLINED JSON ⇡ POSTS ANSWERS CLIENT (BROWSER) SPA BUNDLE BOOTS FROM INLINED DATA RENDERS/CAPTURES ANSWERS
40. OUR CONTEXT: ARCHITECTURE LOAD BALANCER MANAGEMENT PLATFORM RENDERING LAYER AUTHOR SURVEY DEFINITIONS LOADING DEFINITIONS DISTRIBUTED KV STORE DEFINITIONS ⇆ READ/WRITE ⇆ GENERATE RESPONSE RECORDS ANALYTICS & REPORTING DEFINITIONS ⇢ SERVER-RENDERING HTML INLINING DATA AS JSON ⇣ HTML SHELL + INLINED JSON ⇡ POSTS ANSWERS CLIENT (BROWSER) RECORDS ENQUEUE ⇢ MESSAGE BUS ⇣ DEQUEUE ASYNC WORKERS SPA BUNDLE BOOTS FROM INLINED DATA RENDERS/CAPTURES ANSWERS ⇠ VERSIONED BUNDLE CDN/EDGE CACHE
41. OUR CONTEXT: ARCHITECTURE LOAD BALANCER MANAGEMENT PLATFORM RENDERING LAYER AUTHOR SURVEY DEFINITIONS LOADING DEFINITIONS DISTRIBUTED KV STORE DEFINITIONS ⇆ READ/WRITE ⇆ GENERATE RESPONSE RECORDS ANALYTICS & REPORTING DEFINITIONS ⇢ SERVER-RENDERING HTML INLINING DATA AS JSON ⇣ HTML SHELL + INLINED JSON ⇡ POSTS ANSWERS CLIENT (BROWSER) RECORDS ENQUEUE ⇢ MESSAGE BUS ⇣ DEQUEUE ASYNC WORKERS SPA BUNDLE BOOTS FROM INLINED DATA RENDERS/CAPTURES ANSWERS ⇠ VERSIONED BUNDLE CDN/EDGE CACHE
42. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS
43. OUR CONTEXT: ARCHITECTURE
44. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS Lessons Learned
45. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS #1 SPA MPA Intent ≠ Identity
46. INTENT ≠ IDENTITY
47. INTENT ≠ IDENTITY ↝ AVOID ENCODING DIRECTION INTO EVERY viewtransition-name. ↝ TRANSITION TYPES KEEP INTENT IN THE RIGHT PLACE: NAMES IDENTIFY OBJECTS, TYPES IDENTIFY THE TRANSITION MODE. ↝ USEFUL FOR DIRECTION, ROUTE CATEGORY, OR GENERAL ACTION SEMANTICS.
48. INTENT ≠ IDENTITY document.startViewTransition({ update: () go("/settings"), types: ["forward"] > = });
49. INTENT ≠ IDENTITY :root:active-view-transition-type(forward) view-transition-old(root) { anim ation-name: slide-out-left; } :root:active-view-transition-type(forward) anim ation-name: slide-in-right; : : : : } view-transition-new(root) {
50. INTENT ≠ IDENTITY :root:active-view-transition-type(forward) view-transition-old(root) { animation-name: slide-out-left; } :root:active-view-transition-type(forward) animation-name: slide-in-right; : : : : } view-transition-new(root) {
51. INTENT ≠ IDENTITY :root:active-view-transition-type(backward) view-transition-old(root) { animation-name: slide-out-right; } :root:active-view-transition-type(backward) animation-name: slide-in-left; : : : : } view-transition-new(root) {
52. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS MPA #2 The First Frame Is the New Snapshot
53. THE FIRST FRAME IS THE NEW SNAPSHOT ↝ INCOMING CAPTURE HAPPENS BEFORE THE FIRST PRESENTED FRAME AND THE MATCHING ELEMENT MUST EXIST BY THEN. ↝ ABOVE-THE-FOLD STRUCTURE IS PART OF A TRANSITION CONTRACT. ↝ LATE CRITICAL MARKUP TURNS A NICE MORPH EFFECT INTO A WEIRD EXIT/ENTRY.
54. THE FIRST FRAME IS THE NEW SNAPSHOT
55. THE FIRST FRAME IS THE NEW SNAPSHOT
56. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS MPA #3 Think About Both Ends
57. #protip 📝 State does not automatically cross documents: an SPA gives us one callback in one world while an MPA gives us two hooks in two worlds.
58. THINK ABOUT BOTH ENDS addEventListener("pageswap", (event) { event.viewTransition.types.add("leaving-list"); }); addEventListener("pagereveal", (event) { event.viewTransition.types.add("entering-detail"); > = > = });
59. VISUAL CONTINUITY ON THE WEB: MY JOURNEY WITH VIEW TRANSITIONS
60. THINK ABOUT BOTH ENDS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const activation const type navigation.activation; activation.navigationType; if (type === "traverse") { event.viewTransition.types.add("history"); } else { event.viewTransition.types.add("forward"); } > = = = });
61. THINK ABOUT BOTH ENDS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const activation = navigation.activation; const type = activation.navigationType; if (type === "traverse") { event.viewTransition.types.add("history"); } else { event.viewTransition.types.add("forward"); } > = });
62. THINK ABOUT BOTH ENDS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const activation const type navigation.activation; activation.navigationType; if (type === "traverse") { event.viewTransition.types.add("history"); } else { event.viewTransition.types.add("forward"); } > = = = });
63. VISUAL CONTINUITY ON THE WEB Encoding Intent in Session Storage
64. ENCODING INTENT IN SESSION STORAGE
65. ENCODING INTENT IN SESSION STORAGE sessionStorage.setItem("vt:pending", JSON.stringify({ type: "list-to-detail", productId: "42" }));
66. ENCODING INTENT IN SESSION STORAGE document.addEventListener("click", (event) const link { event.target.closest("a[data-vt]"); if (!link) return; sessionStorage.setItem("vt:intent", JSON.stringify({ "list-to-detail" type: link.dataset.vt, from: location.href, to: link.href, ts: Date.now() })); > = = / / });
67. ENCODING INTENT IN SESSION STORAGE document.addEventListener("click", (event) const link { event.target.closest("a[data-vt]"); if (!link) return; sessionStorage.setItem("vt:intent", JSON.stringify({ "list-to-detail" type: link.dataset.vt, from: location.href, to: link.href, ts: Date.now() })); > = = / / });
68. ENCODING INTENT IN SESSION STORAGE <Link href="/products/42" vt="list-to-detail"> View product </Link>
69. ENCODING INTENT IN SESSION STORAGE addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const raw sessionStorage.getItem("vt:intent"); sessionStorage.removeItem("vt:intent"); if (!raw) return; const intent JSON.parse(raw); const fresh Date.now() - intent.ts < 3000; const target new URL(intent.to).href === location.href; if (fresh target) { event.viewTransition.types.add(intent.type); } > = = = = & = & });
70. ENCODING INTENT IN SESSION STORAGE addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const raw sessionStorage.getItem("vt:intent"); sessionStorage.removeItem("vt:intent"); if (!raw) return; const intent JSON.parse(raw); const fresh Date.now() - intent.ts < 3000; const target new URL(intent.to).href === location.href; if (fresh target) { event.viewTransition.types.add(intent.type); } > = = = = & = & });
71. ENCODING INTENT IN SESSION STORAGE addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const raw = sessionStorage.getItem("vt:intent"); sessionStorage.removeItem("vt:intent"); if (!raw) return; const intent JSON.parse(raw); const fresh Date.now() - intent.ts < 3000; const target new URL(intent.to).href === location.href; if (fresh target) { event.viewTransition.types.add(intent.type); } > = = = = & & });
72. ENCODING INTENT IN SESSION STORAGE addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const raw sessionStorage.getItem("vt:intent"); sessionStorage.removeItem("vt:intent"); if (!raw) return; const intent = JSON.parse(raw); const fresh = Date.now() - intent.ts < 3000; const target = new URL(intent.to).href === location.href; if (fresh target) { event.viewTransition.types.add(intent.type); } > = & & = });
73. ENCODING INTENT IN SESSION STORAGE IT SHOULD NOT APPLY IF: ↝ THE USER OPENS THE LINK IN A NEW TAB. ↝ THE USER COPIES THE URL AND SENDS IT TO SOMEONE. ↝ THE USER RE-VISITS THE PAGE LATER. ↝ ANOTHER TAB IS ALREADY OPEN ON THE DESTINATION PAGE.
74. VISUAL CONTINUITY ON THE WEB Encoding Intent in Search Params
75. ENCODING INTENT IN SEARCH PARAMS <a href="/product/42?vt=list-to-detail&dir=forward"> View product </a>
76. ENCODING INTENT IN SEARCH PARAMS <a href="/product/42?vt=list-to-detail&dir=forward"> View product </a>
77. ENCODING INTENT IN SEARCH PARAMS <a href="/product/42?vt=list-to-detail&dir=forward"> View product </a>
78. ENCODING INTENT IN SEARCH PARAMS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const url new URL(location.href); const intent url.searchParams.get("vt"); const direction url.searchParams.get("dir"); if (intent) event.viewTransition.types.add(intent); if (direction) event.viewTransition.types.add(direction); url.searchParams.delete("vt"); url.searchParams.delete("dir"); history.replaceState(history.state, "", url); > = = = = });
79. ENCODING INTENT IN SEARCH PARAMS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const url new URL(location.href); const intent url.searchParams.get("vt"); const direction url.searchParams.get("dir"); if (intent) event.viewTransition.types.add(intent); if (direction) event.viewTransition.types.add(direction); url.searchParams.delete("vt"); url.searchParams.delete("dir"); history.replaceState(history.state, "", url); > = = = = });
80. ENCODING INTENT IN SEARCH PARAMS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const url = new URL(location.href); const intent = url.searchParams.get("vt"); const direction = url.searchParams.get("dir"); if (intent) event.viewTransition.types.add(intent); if (direction) event.viewTransition.types.add(direction); url.searchParams.delete("vt"); url.searchParams.delete("dir"); history.replaceState(history.state, "", url); > = });
81. ENCODING INTENT IN SEARCH PARAMS addEventListener("pagereveal", (event) { if (!event.viewTransition) return; const url new URL(location.href); const intent url.searchParams.get("vt"); const direction url.searchParams.get("dir"); if (intent) event.viewTransition.types.add(intent); if (direction) event.viewTransition.types.add(direction); url.searchParams.delete("vt"); url.searchParams.delete("dir"); history.replaceState(history.state, "", url); > = = = = });
82. ENCODING INTENT IN SEARCH PARAMS DOWNSIDES: ↝ DURABLE AND VISIBLE: POLLUTE COPIED URLS. ↝ CAN LEAK UI METADATA. ↝ MAY AFFECT ANALYTICS AND CACHING. ↝ REQUIRES CLEANUP.
83. ENCODING INTENT IN SEARCH PARAMS
84. ENCODING INTENT IN SEARCH PARAMS
85. ENCODING INTENT IN SEARCH PARAMS
86. ENCODING INTENT IN SEARCH PARAMS
87. VISUAL CONTINUITY ON THE WEB SPA #4 MPA Follow User Preferences
88. FOLLOW USER PREFERENCES
89. FOLLOW USER PREFERENCES
90. VISUAL CONTINUITY ON THE WEB
91. FOLLOW USER PREFERENCES
92. FOLLOW USER PREFERENCES if (matchMedia("(prefers-reduced-motion: reduce)").matches){ SPA updateDOM(); } else { document.startViewTransition(updateDOM); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } MPA
93. FOLLOW USER PREFERENCES: BONUS
94. FOLLOW USER PREFERENCES: BONUS
95. VISUAL CONTINUITY ON THE WEB SPA #5 MPA The "Cancellation Catalog"
96. VISUAL CONTINUITY ON THE WEB Navigation Takes Too Long
97. #1 NAVIGATION TAKES TOO LONG
98. #1 NAVIGATION TAKES TOO LONG
99. VISUAL CONTINUITY ON THE WEB Redirects & Cross-Origin Hops
100. #2 REDIRECTS & CROSS-ORIGIN HOPS
101. #2 REDIRECTS & CROSS-ORIGIN HOPS
102. VISUAL CONTINUITY ON THE WEB Stale Names in BFCache
103. #3 STALE NAMES IN BFCACHE
104. VISUAL CONTINUITY ON THE WEB Snapshot & Layout Failures
105. #4 SNAPSHOT & LAYOUT FAILURES
106. VISUAL CONTINUITY ON THE WEB SPA #6 MPA Capture-Time Global Namespace
107. CAPTURE-TIME GLOBAL NAMESPACE
108. CAPTURE-TIME GLOBAL NAMESPACE ↝ EVERY ACTIVE view-transition-name MUST BE UNIQUE IN THE CAPTURED STATE. ↝ DUPLICATE NAMES CAN PREVENT THE VISUAL TRANSITION FROM BEING CREATED. ↝ CROSS-DOCUMENT MATCHING REQUIRES STABLE NAMES IN BOTH DOCUMENTS.
109. CAPTURE-TIME GLOBAL NAMESPACE async function openProduct(id) { const card document.querySelector(`[data-product="${id}"]`); card.style.viewTransitionName const vt `product-${id}`; document.startViewTransition(() try { await vt.finished; } finally { card.style.viewTransitionName ""; } > = = = = = } renderDetail(id));
110. CAPTURE-TIME GLOBAL NAMESPACE async function openProduct(id) { const card document.querySelector(`[data-product="${id}"]`); card.style.viewTransitionName const vt `product-${id}`; document.startViewTransition(() try { await vt.finished; } finally { card.style.viewTransitionName = ""; } > = = = = } renderDetail(id));
111. CAPTURE-TIME GLOBAL NAMESPACE
112. CAPTURE-TIME GLOBAL NAMESPACE
113. CAPTURE-TIME GLOBAL NAMESPACE
114. VISUAL CONTINUITY ON THE WEB View Transitions in the Wild
115. VIEW TRANSITIONS IN THE WILD
116. VIEW TRANSITIONS IN THE WILD
117. VISUAL CONTINUITY ON THE WEB View Transitions in React
118. TRANSITIONS IN REACT: OVERVIEW
119. TRANSITIONS IN REACT: OVERVIEW ↝ REACT’S IMPLEMENTATION IS THE DEEPEST ONE BECAUSE IT SITS INSIDE FIBER ITSELF. ↝ THE OLD HOST TREE IS INSPECTED IN THE PRE-MUTATION PHASE. DOM MUTATIONS RUN INSIDE THE VIEW TRANSITION UPDATE CALLBACK. ↝ LAYOUT/AFTER-MUTATION/PASSIVE WORK IS SCHEDULED AROUND THAT SPLIT.
120. TRANSITIONS IN REACT: RECONCILIATION ↝ FIBER SEES THE OPERATION THAT CREATED THE VISUAL EVENT. REACT CAN THEN CLASSIFY IT BECAUSE IT IS ALREADY CLASSIFYING THE TREE OPERATION. ↝ <ViewTransition> IS NOT SYNTACTIC SUGAR OVER viewtransition-name. IT CAN MAP RENDER SEMANTICS TO ANIMATION SEMANTICS.
121. TRANSITIONS IN REACT: SNAPSHOT
122. ⨯ TRANSITIONS IN REACT: SSR IDENTITY
123. VISUAL CONTINUITY ON THE WEB View Transitions in Astro
124. TRANSITIONS IN ASTRO: OVERVIEW
125. TRANSITIONS IN ASTRO: GESTURES
126. VISUAL CONTINUITY ON THE WEB
127. VISUAL CONTINUITY ON THE WEB View Transitions Elsewhere
128. TRANSITIONS IN REACT ROUTER
129. TRANSITIONS IN ANGULAR
130. TRANSITIONS IN SVELTE
131. TRANSITIONS IN RAILS
132. TRANSITIONS IN LARAVEL
133. VISUAL CONTINUITY ON THE WEB View Transitions & Me
134. VIEW TRANSITIONS & ME
135. VIEW TRANSITIONS & ME: MOBILE
136. VIEW TRANSITIONS & ME: ISSUES
137. VISUAL CONTINUITY ON THE WEB Closing Thoughts
138. VISUAL CONTINUITY ON THE WEB #1 Visual continuity is a budget. …AND A GOOD TRANSITION IS THE SMALLEST ONE THAT PRESERVES CONTEXT.
139. VISUAL CONTINUITY ON THE WEB The API is small #2 because you know better about your product.
140. VISUAL CONTINUITY ON THE WEB Reducing friction #3 and preserving context can help users stay engaged longer.
141. VISUAL CONTINUITY ON THE WEB THAT’S ALL, FOLKS! GRACIAS! 👋 🇪🇸 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator