Merge pull request #4 from pathsim/feat/radial-theme-transition

Add radial theme transition

Author: milanofthe

src/app.css

@@ -2,6 +2,19 @@
  * Aligned with pathsim-docs for consistency
  */
 
+/* Theme transition — radial reveal via View Transitions API */
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+	z-index: 1;
+}
+::view-transition-new(root) {
+	z-index: 9999;
+}
+
 :root {
 	/* ===== SURFACES ===== */
 	--surface: #08080c;

src/routes/+layout.svelte

@@ -24,10 +24,24 @@
 		document.documentElement.setAttribute('data-theme', theme);
 	});
 
-	function toggleTheme() {
-		theme = theme === 'dark' ? 'light' : 'dark';
-		localStorage.setItem('theme', theme);
-		document.documentElement.setAttribute('data-theme', theme);
+	function toggleTheme(e: MouseEvent) {
+		const apply = () => {
+			theme = theme === 'dark' ? 'light' : 'dark';
+			localStorage.setItem('theme', theme);
+			document.documentElement.setAttribute('data-theme', theme);
+		};
+
+		if (!document.startViewTransition) { apply(); return; }
+
+		const x = e.clientX, y = e.clientY;
+		const maxRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+		const transition = document.startViewTransition(apply);
+		transition.ready.then(() => {
+			document.documentElement.animate(
+				{ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`] },
+				{ duration: 500, easing: 'ease-out', pseudoElement: '::view-transition-new(root)' }
+			);
+		});
 	}
 </script>