From 9177164ddfb3fb7ef8087ebcb8efb662abd21ffa Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 18 Feb 2026 10:07:38 +0100
Subject: [PATCH] recipes: hero image view transition, skip transitions for
 recipe-to-recipe

---
 src/routes/[recipeLang=recipeLang]/+layout.svelte | 3 ++-
 src/routes/[recipeLang=recipeLang]/+page.svelte   | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte
index 8338a77..a6a89d4 100644
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -11,6 +11,7 @@ onNavigate((navigation) => {
 	const toRecipe = navigation.to?.params?.name;
 	const fromRecipe = navigation.from?.params?.name;
 	if (!toRecipe && !fromRecipe) return;
+	if (fromRecipe && toRecipe) return; // recipe-to-recipe: no view transition
 
 	// Measure title block position so the slide animation covers exactly the right distance
 	const title = document.querySelector('[style*="view-transition-name: recipe-title"]');
@@ -24,7 +25,7 @@ onNavigate((navigation) => {
 			resolve();
 			await navigation.complete;
 
-			// Set view-transition-name on the matching CompactCard image for reverse morph
+			// Set view-transition-name on the matching CompactCard/hero image for reverse morph
 			if (fromRecipe) {
 				const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
 				if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 8f64d46..dce8963 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -352,6 +352,7 @@
 				src="https://bocken.org/static/rezepte/full/{heroImg}"
 				alt=""
 				loading="eager"
+				data-recipe={heroRecipe.short_name}
 			/>
 			<div class="hero-overlay"></div>
 		</figure>
@@ -360,7 +361,11 @@
 			<div class="hero-text">
 				<h1>{labels.title}</h1>
 				<p class="subheading">{labels.subheading}</p>
-				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
+				<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured"
+				onclick={() => {
+					const img = document.querySelector('.hero-img');
+					if (img) img.style.viewTransitionName = `recipe-${heroRecipe.short_name}-img`;
+				}}>
 					<span class="recipe-name"><span class="recipe-icon">{heroRecipe.icon}</span> {@html heroRecipe.name}</span>
 					<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
 				</a>