fix: kill all view transition animations — instant swap, no artifacts

Author: michaelmcnees

site/src/components/DocsSidebar.astro

@@ -18,7 +18,7 @@ function isParentActive(item: NavItem): boolean {
 }
 ---
 
-<aside id="docs-sidebar" class="docs-sidebar hidden lg:block w-60 shrink-0" style="view-transition-name: sidebar;">
+<aside id="docs-sidebar" class="docs-sidebar hidden lg:block w-60 shrink-0">
   <div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-8 pr-4 pl-2">
     <nav aria-label="Documentation sidebar">
       {docsNav.map((group) => (

site/src/components/Nav.astro

@@ -6,7 +6,7 @@ const { isHome = false } = Astro.props;
 const prefix = isHome ? '' : '/';
 const isDocs = !isHome;
 ---
-<nav style="view-transition-name: nav;" class="fixed top-0 left-0 right-0 z-50 border-b border-outline-variant bg-surface/80 backdrop-blur-md">
+<nav class="fixed top-0 left-0 right-0 z-50 border-b border-outline-variant bg-surface/80 backdrop-blur-md">
   <div class={`nav-inner mx-auto px-6 flex items-center justify-between h-16 ${isHome ? 'max-w-[1200px]' : 'max-w-[1280px]'}`}>
     <!-- Logo -->
     <a href="/" class="font-mono text-lg font-bold text-on-surface tracking-tight">

site/src/layouts/Docs.astro

@@ -41,7 +41,7 @@ const { prev, next } = getPrevNext(currentPath);
       <DocsSidebar currentPath={currentPath} />
 
       <!-- Main content -->
-      <main id="main-content" class="flex-1 min-w-0 py-8 px-2 sm:px-6 lg:px-10" style="view-transition-name: docs-content;">
+      <main id="main-content" class="flex-1 min-w-0 py-8 px-2 sm:px-6 lg:px-10">
         <article class="prose max-w-3xl">
           <slot />
         </article>

site/src/styles/global.css

@@ -2,45 +2,15 @@
 
 /* ── View Transitions ────────────────────────────────────────────── */
 
-/* Instant swap on the root — no fade, no flash */
-::view-transition-old(root),
-::view-transition-new(root) {
+/* Kill ALL view transition animations — instant swap, no visual artifacts */
+::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) {
   animation: none !important;
-  mix-blend-mode: normal;
-}
-
-/* Shell elements stay completely static — no transition */
-::view-transition-old(nav),
-::view-transition-new(nav),
-::view-transition-old(sidebar),
-::view-transition-new(sidebar) {
-  animation: none !important;
-}
-
-/* Content area gets a subtle slide-up transition */
-::view-transition-old(docs-content) {
-  animation: vt-fade-out 150ms ease-out both;
-}
-::view-transition-new(docs-content) {
-  animation: vt-fade-in 150ms ease-in 50ms both;
-}
-
-@keyframes vt-fade-out {
-  to { opacity: 0; transform: translateY(-4px); }
-}
-@keyframes vt-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
 }
 
 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(docs-content),
-  ::view-transition-new(docs-content),
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
-    animation: none !important;
-  }
-
   [data-animate] {
     opacity: 1 !important;
     transform: none !important;