fix: improve view transition handling for notes and static pages

app/cli/page.mdx

@@ -1,6 +1,8 @@
 import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "CLI",
   description: "AKA, the most useless Node module ever published, in history, by anyone, ever.",

app/globals.css

@@ -210,8 +210,14 @@
     cursor: pointer;
   }
 
-  /* Disable the default cross-fade on root (header/footer/chrome stay static) */
-  ::view-transition-old(root),
+  /*
+   * Live root: hide the frozen old snapshot and show the new one un-animated, so unnamed content
+   * swaps instantly instead of stacking both snapshots at full opacity (they blend with
+   * plus-lighter) while page-level groups animate above it.
+   */
+  ::view-transition-old(root) {
+    display: none;
+  }
   ::view-transition-new(root) {
     animation: none;
   }
@@ -227,17 +233,6 @@
     animation: var(--duration-enter) ease-out var(--duration-exit) both enter;
   }
 
-  ::view-transition-old(.slide-down) {
-    --tw-exit-opacity: 0;
-    --tw-exit-translate-y: 10px;
-    animation: var(--duration-exit) ease-out both exit;
-  }
-  ::view-transition-new(.slide-up) {
-    --tw-enter-opacity: 0;
-    --tw-enter-translate-y: 10px;
-    animation: var(--duration-enter) ease-in var(--duration-exit) both enter;
-  }
-
   ::view-transition-new(.slide-from-right) {
     --tw-enter-opacity: 0;
     --tw-enter-translate-x: 60px;
@@ -319,11 +314,11 @@
     z-index: 100;
   }
 
-  ::view-transition-old(persistent-nav) {
+  ::view-transition-old(persistent-nav),
+  ::view-transition-old(persistent-footer) {
     display: none;
   }
   ::view-transition-new(persistent-nav),
-  ::view-transition-old(persistent-footer),
   ::view-transition-new(persistent-footer) {
     animation: none;
   }

app/license/page.mdx

@@ -1,6 +1,8 @@
 import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "License",
   description: "This site's content is licensed under CC-BY-4.0.",

app/notes/[slug]/page.tsx

@@ -79,125 +79,120 @@ const Page = async ({ params }: PageProps<"/notes/[slug]">) => {
 
   return (
     <DirectionalTransition>
-      <JsonLd<BlogPosting>
-        item={{
-          "@context": "https://schema.org",
-          "@type": "BlogPosting",
-          headline: post.title,
-          description: post.description,
-          url: post.permalink,
-          image: {
-            "@type": "ImageObject",
-            contentUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${post.slug}/opengraph-image`,
-            width: `${ogImageSize.width}`,
-            height: `${ogImageSize.height}`,
-          },
-          keywords: post.tags?.join(", "),
-          datePublished: post.date,
-          dateModified: post.date,
-          inLanguage: process.env.NEXT_PUBLIC_SITE_LOCALE,
-          license: `https://spdx.org/licenses/${siteConfig.license}.html`,
-          author: {
-            // defined in app/layout.tsx
-            "@id": `${process.env.NEXT_PUBLIC_BASE_URL}/#person`,
-          },
-        }}
-      />
+      {/* crossfades post-to-post links, which stay on this route and carry no transition type */}
+      <ViewTransition key={post.slug} name="note-content" share="auto" default="none">
+        <JsonLd<BlogPosting>
+          item={{
+            "@context": "https://schema.org",
+            "@type": "BlogPosting",
+            headline: post.title,
+            description: post.description,
+            url: post.permalink,
+            image: {
+              "@type": "ImageObject",
+              contentUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${post.slug}/opengraph-image`,
+              width: `${ogImageSize.width}`,
+              height: `${ogImageSize.height}`,
+            },
+            keywords: post.tags?.join(", "),
+            datePublished: post.date,
+            dateModified: post.date,
+            inLanguage: process.env.NEXT_PUBLIC_SITE_LOCALE,
+            license: `https://spdx.org/licenses/${siteConfig.license}.html`,
+            author: {
+              // defined in app/layout.tsx
+              "@id": `${process.env.NEXT_PUBLIC_BASE_URL}/#person`,
+            },
+          }}
+        />
 
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5 text-[13px] tracking-wide text-foreground/70">
-        <Link
-          href={`/${POSTS_DIR}/${post.slug}`}
-          className={
-            "flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
-          }
-        >
-          <IconCalendarEvent className="inline size-3.5 shrink-0" aria-hidden="true" />
-          <time
-            dateTime={formattedDates.dateISO}
-            title={formattedDates.dateTitle}
-            suppressHydrationWarning
-          >
-            {formattedDates.dateDisplay}
-          </time>
-        </Link>
-
-        {post.tags && (
-          <div className="flex flex-wrap items-center gap-1.5">
-            <IconTag className="inline size-3.5 shrink-0" aria-hidden="true" />
-            {post.tags.map((tag) => (
-              <span
-                key={tag}
-                title={tag}
-                className="mx-px lowercase before:pr-0.5 before:text-foreground/40 before:content-['#'] first-of-type:ml-0 last-of-type:mr-0"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
-
-        <Link
-          href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${post.slug}/index.mdx`}
-          title={`Edit "${post.title}" on GitHub`}
-          className={
-            "flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
-          }
-        >
-          <IconEdit className="inline size-3.5 shrink-0" aria-hidden="true" />
-          <span>Improve This Post</span>
-        </Link>
-
-        <Link
-          href={`/${POSTS_DIR}/${post.slug}#comments`}
-          className="flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
-        >
-          <IconMessages className="inline size-3.5 shrink-0" aria-hidden="true" />
-          <CommentCount slug={`${POSTS_DIR}/${post.slug}`} />
-        </Link>
-
-        <div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
-          <IconEye className="inline size-3.5 shrink-0" aria-hidden="true" />
-          <ViewCounter slug={`${POSTS_DIR}/${post.slug}`} />
-        </div>
-      </div>
-
-      <ViewTransition name={`note-title-${post.slug}`} share="text-morph" default="none">
-        <h1 className="my-5 text-2xl font-medium tracking-tight">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5 text-[13px] tracking-wide text-foreground/70">
           <Link
             href={`/${POSTS_DIR}/${post.slug}`}
-            dangerouslySetInnerHTML={{
-              __html: post.htmlTitle || post.title,
-            }}
-            className="text-foreground hover:no-underline"
-          />
-        </h1>
-      </ViewTransition>
-
-      <article className="markdown">
-        <MDXContent />
-      </article>
-
-      <section id="comments" className="isolate my-8 w-full border-t-2 pt-8">
-        <div className="mx-auto w-full max-w-3xl space-y-6">
-          {post.noComments ? (
-            <div className="flex justify-center rounded-lg bg-muted/40 px-6 py-12">
-              <p className="text-center text-lg font-medium">Comments are closed.</p>
-            </div>
-          ) : (
-            <Suspense
-              fallback={
-                <ViewTransition exit="slide-down">
-                  <CommentsSkeleton />
-                </ViewTransition>
-              }
+            className={
+              "flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
+            }
+          >
+            <IconCalendarEvent className="inline size-3.5 shrink-0" aria-hidden="true" />
+            <time
+              dateTime={formattedDates.dateISO}
+              title={formattedDates.dateTitle}
+              suppressHydrationWarning
             >
-              <ViewTransition enter="slide-up" default="none">
-                <Comments slug={`${POSTS_DIR}/${post.slug}`} />
-              </ViewTransition>
-            </Suspense>
+              {formattedDates.dateDisplay}
+            </time>
+          </Link>
+
+          {post.tags && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              <IconTag className="inline size-3.5 shrink-0" aria-hidden="true" />
+              {post.tags.map((tag) => (
+                <span
+                  key={tag}
+                  title={tag}
+                  className="mx-px lowercase before:pr-0.5 before:text-foreground/40 before:content-['#'] first-of-type:ml-0 last-of-type:mr-0"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
           )}
+
+          <Link
+            href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${post.slug}/index.mdx`}
+            title={`Edit "${post.title}" on GitHub`}
+            className={
+              "flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
+            }
+          >
+            <IconEdit className="inline size-3.5 shrink-0" aria-hidden="true" />
+            <span>Improve This Post</span>
+          </Link>
+
+          <Link
+            href={`/${POSTS_DIR}/${post.slug}#comments`}
+            className="flex flex-nowrap items-center gap-1.5 whitespace-nowrap text-inherit hover:no-underline"
+          >
+            <IconMessages className="inline size-3.5 shrink-0" aria-hidden="true" />
+            <CommentCount slug={`${POSTS_DIR}/${post.slug}`} />
+          </Link>
+
+          <div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
+            <IconEye className="inline size-3.5 shrink-0" aria-hidden="true" />
+            <ViewCounter slug={`${POSTS_DIR}/${post.slug}`} />
+          </div>
         </div>
-      </section>
+
+        <ViewTransition name={`note-title-${post.slug}`} share="text-morph" default="none">
+          <h1 className="my-5 text-2xl font-medium tracking-tight">
+            <Link
+              href={`/${POSTS_DIR}/${post.slug}`}
+              dangerouslySetInnerHTML={{
+                __html: post.htmlTitle || post.title,
+              }}
+              className="text-foreground hover:no-underline"
+            />
+          </h1>
+        </ViewTransition>
+
+        <article className="markdown">
+          <MDXContent />
+        </article>
+
+        <section id="comments" className="isolate my-8 w-full border-t-2 pt-8">
+          <div className="mx-auto w-full max-w-3xl space-y-6">
+            {post.noComments ? (
+              <div className="flex justify-center rounded-lg bg-muted/40 px-6 py-12">
+                <p className="text-center text-lg font-medium">Comments are closed.</p>
+              </div>
+            ) : (
+              <Suspense fallback={<CommentsSkeleton />}>
+                <Comments slug={`${POSTS_DIR}/${post.slug}`} />
+              </Suspense>
+            )}
+          </div>
+        </section>
+      </ViewTransition>
     </DirectionalTransition>
   );
 };

app/previously/page.mdx

@@ -4,6 +4,8 @@ import { Win95Icon } from "@/components/icons";
 import { createMetadata } from "@/lib/metadata";
 import { PageStyles } from "./page-styles";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "Previously on...",
   description:

app/privacy/page.mdx

@@ -1,6 +1,8 @@
 import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "Privacy",
   description: "This website's extremely simple privacy policy.",

app/uses/page.mdx

@@ -1,6 +1,8 @@
 import { PageTitle } from "@/components/layout/page-title";
 import { createMetadata } from "@/lib/metadata";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "/uses",
   description: "Things I use daily.",

app/zip/page.mdx

@@ -3,6 +3,8 @@ import { createMetadata } from "@/lib/metadata";
 
 import backgroundImg from "./sundar.jpg";
 
+export { FadeTransition as default } from "@/components/page-transition";
+
 export const metadata = createMetadata({
   title: "fuckyougoogle.zip 🖕",
   description: "This is a horrible idea.",