style: improve view transitions and make them accessible

Author: WarningImHack3r

package.json

@@ -60,7 +60,6 @@
 		"svelte-exmarkdown": "^5.0.1",
 		"svelte-meta-tags": "^4.3.0",
 		"svelte-sonner": "^1.0.3",
-		"sveltekit-view-transition": "^0.5.3",
 		"tailwind-merge": "^3.3.0",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.1.7",

pnpm-lock.yaml

@@ -2,12 +2,12 @@
 	import "../app.css";
 	import { scrollY } from "svelte/reactivity/window";
 	import { dev } from "$app/environment";
+	import { onNavigate } from "$app/navigation";
 	import { page } from "$app/state";
 	import { ChevronDown, type Icon, Monitor, Moon, Sun, X } from "@lucide/svelte";
 	import { ProgressBar } from "@prgm/sveltekit-progress-bar";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { MetaTags, deepMerge } from "svelte-meta-tags";
-	import { setupViewTransition } from "sveltekit-view-transition";
 	import { news } from "$lib/news/news.json";
 	import type { Entries } from "$lib/types";
 	import { cn } from "$lib/utils";
@@ -19,7 +19,18 @@
 
 	let { data, children } = $props();
 
-	setupViewTransition();
+	// View Transitions API
+	// https://svelte.dev/blog/view-transitions
+	onNavigate(({ complete }) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise(resolve => {
+			document.startViewTransition(async () => {
+				resolve();
+				await complete;
+			});
+		});
+	});
 
 	// SEO
 	let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));

src/routes/+layout.svelte

@@ -102,8 +102,8 @@
 		<div class="flex flex-col">
 			<div class="my-8">
 				<h1
-					class="text-3xl font-semibold text-primary text-shadow-sm md:text-5xl"
-					style:view-transition-name="title-{viewTransitionName}"
+					class="text-3xl font-semibold text-primary text-shadow-sm md:text-5xl motion-safe:[view-transition-name:var(--vt-name)]"
+					style:--vt-name="title-{viewTransitionName}"
 				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html data.currentPackage.pkg.name.replace(/\//g, "/<wbr />")}
@@ -117,9 +117,15 @@
 								target="_blank"
 								class="underline-offset-2 group-hover:underline after:ml-0.5 after:inline-block after:font-sans after:text-sm after:content-['↗']"
 							>
-								<span style:view-transition-name="owner-{viewTransitionName}">
+								<span
+									class="motion-safe:[view-transition-name:var(--vt-name)]"
+									style:--vt-name="owner-{viewTransitionName}"
+								>
 									{data.currentPackage.repoOwner}
-								</span>/<wbr /><span style:view-transition-name="repo-name-{viewTransitionName}">
+								</span>/<wbr /><span
+									class="motion-safe:[view-transition-name:var(--vt-name)]"
+									style:--vt-name="repo-name-{viewTransitionName}"
+								>
 									{data.currentPackage.repoName}
 								</span>
 							</a>
@@ -161,7 +167,10 @@
 					</Collapsible.Root>
 				</div>
 				{#if data.currentPackage.pkg.description}
-					<h3 class="mt-4 italic" style:view-transition-name="desc-{viewTransitionName}">
+					<h3
+						class="mt-4 italic motion-safe:[view-transition-name:var(--vt-name)]"
+						style:--vt-name="desc-{viewTransitionName}"
+					>
 						{data.currentPackage.pkg.description}
 					</h3>
 				{/if}

src/routes/package/[...package]/+page.svelte

@@ -73,8 +73,8 @@
 						>
 							<div class="flex flex-col">
 								<h4
-									class="font-medium inline-flex flex-col xs:flex-row items-start xs:items-center gap-2"
-									style:view-transition-name="title-{viewTransitionName}"
+									class="font-medium inline-flex flex-col xs:flex-row items-start motion-safe:[view-transition-name:var(--vt-name)] xs:items-center gap-2"
+									style:--vt-name="title-{viewTransitionName}"
 								>
 									<span
 										class={[
@@ -91,16 +91,25 @@
 									{/if}
 								</h4>
 								<span class="text-muted-foreground">
-									<span style:view-transition-name="desc-{viewTransitionName}">
+									<span
+										class="motion-safe:[view-transition-name:var(--vt-name)]"
+										style:--vt-name="desc-{viewTransitionName}"
+									>
 										{pkg.description}
 									</span>
 									<span class="font-bold">
 										{#if pkg.description}
 											•
 										{/if}
-										<span style:view-transition-name="owner-{viewTransitionName}">
+										<span
+											class="motion-safe:[view-transition-name:var(--vt-name)]"
+											style:--vt-name="owner-{viewTransitionName}"
+										>
 											{repoOwner}
-										</span>/<span style:view-transition-name="repo-name-{viewTransitionName}">
+										</span>/<span
+											class="motion-safe:[view-transition-name:var(--vt-name)]"
+											style:--vt-name="repo-name-{viewTransitionName}"
+										>
 											{repoName}
 										</span>
 									</span>