Review

Cross-fade kiln glaze sheets on navigate

Kiln Journal's glaze recipe browser still hard-swaps pages when potters move between cone charts. Wrap client navigations in document.startViewTransition so the sheet title and swatch strip morph, and skip the API entirely when the user prefers reduced motion or the browser lacks support.

ReactTier 2view-transitiona11yreact

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

src/studio/useGlazeNavigate.ts+20-6

8	8		import { useCallback } from "react";
9	9		import { useNavigate } from "react-router-dom";
10	10
	11	+	function prefersReducedMotion(): boolean {
	12	+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
	13	+	}
	14	+
11	15		export function useGlazeNavigate() {
12	16		const navigate = useNavigate();
13	17
14		-	return useCallback(
15		-	(glazeId: string) => {
16		-	navigate(`/studio/glazes/${glazeId}`);
17		-	},
18		-	[navigate],
19		-	);
	18	+	return useCallback(
	19	+	(glazeId: string) => {
	20	+	const go = () => navigate(`/studio/glazes/${glazeId}`);
	21	+	if (
	22	+	prefersReducedMotion() \|\|
	23	+	typeof document.startViewTransition !== "function"
	24	+	) {
	25	+	go();
	26	+	return;
	27	+	}
	28	+	document.startViewTransition(() => {
	29	+	go();
	30	+	});
	31	+	},
	32	+	[navigate],
	33	+	);
20	34		}