refactor: split layered hero image from layered recipe image

Author: benruehl

src/components/hero/HeroBowl.astro

@@ -1,21 +1,18 @@
 ---
-import { Image } from 'astro:assets';
-import heroBowl from "../../images/hero-bowl.png";
 import heroBowl1 from "../../images/hero-bowl-1.png";
 import heroBowl2 from "../../images/hero-bowl-2.png";
 import heroBowl3 from "../../images/hero-bowl-3.png";
 import heroBowl4 from "../../images/hero-bowl-4.png";
-import LayeredRecipeImage from '../recipe-card/LayeredRecipeImage.astro';
+import LayeredHeroImage from './LayeredHeroImage.astro';
 
 const baseUrl = import.meta.env.BASE_URL;
 ---
 
 <div class="image-container">
-    <LayeredRecipeImage
+    <LayeredHeroImage
         class="bowl-image"
         imageLayers={[heroBowl1, heroBowl2, heroBowl3, heroBowl4]}
         title="Signature Bowl"
-        animate={true}
     />
     <video width="1280" height="720" autoplay muted loop playsinline>
         <source src=`${baseUrl}/steam.webm` type="video/webm">

src/components/hero/LayeredHeroImage.astro

@@ -0,0 +1,80 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    imageLayers: ImageMetadata[];
+    title: string;
+    width?: number;
+    height?: number;
+    class?: string;
+}
+
+const { imageLayers, title, width, height, class: className } = Astro.props;
+---
+
+<div class:list={["overlay-container", "animate", className]}>
+    {imageLayers.map((img, index) => (
+        <Image
+            src={img}
+            alt={title}
+            width={width}
+            height={height}
+            class={`hero-image-layer-${index}`}
+        />
+    ))}
+</div>
+
+<style lang="scss">
+    .overlay-container {
+        display: grid;
+        grid-template-areas: "overlay";
+
+        :global(> *) {
+            grid-area: overlay;
+            min-width: 0;
+        }
+    }
+
+    img {
+        box-sizing: border-box;
+        max-width: 100%;
+        height: auto;
+        object-fit: contain;
+        object-position: center;
+    }
+
+    .animate {
+        img {
+            animation: MoveUpDown 5s ease infinite;
+        }
+        
+        .hero-image-layer-0 {
+            --move-distance: 10px;
+            animation-delay: 0s;
+        }
+        
+        .hero-image-layer-1 {
+            --move-distance: 8px;
+            animation-delay: -0.4s;
+        }
+        
+        .hero-image-layer-2 {
+            --move-distance: 7px;
+            animation-delay: -0.8s;
+        }
+        
+        .hero-image-layer-3 {
+            --move-distance: 6px;
+            animation-delay: -1.2s;
+        }
+
+        @keyframes MoveUpDown {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(var(--move-distance));
+            }
+        }
+    }
+</style>

src/components/recipe-card/LayeredRecipeImage.astro

@@ -7,14 +7,13 @@ interface Props {
     title: string;
     width?: number;
     height?: number;
-    animate?: boolean;
     class?: string;
 }
 
-const { imageLayers, title, width, height, animate, class: className } = Astro.props;
+const { imageLayers, title, width, height, class: className } = Astro.props;
 ---
 
-<div class:list={["overlay-container", animate ? "animate" : undefined, className]}>
+<div class:list={["overlay-container", className]}>
     {imageLayers.map((img, index) => (
         <CardContent translateZ={(imageLayers.length * -5) + (index + 1) * 10}>
             <Image
@@ -23,7 +22,6 @@ const { imageLayers, title, width, height, animate, class: className } = Astro.p
                 width={width}
                 height={height}
                 transition:name={`recipe-image-${title}-${index}`}
-                class={`recipe-image-layer-${index}`}
             />
         </CardContent>
     ))}
@@ -49,39 +47,4 @@ const { imageLayers, title, width, height, animate, class: className } = Astro.p
         object-position: center;
         transition: transform .2s;
     }
-
-    .animate {
-        img {
-            animation: MoveUpDown 5s ease infinite;
-        }
-        
-        .recipe-image-layer-0 {
-            --move-distance: 10px;
-            animation-delay: 0s;
-        }
-        
-        .recipe-image-layer-1 {
-            --move-distance: 8px;
-            animation-delay: -0.4s;
-        }
-        
-        .recipe-image-layer-2 {
-            --move-distance: 7px;
-            animation-delay: -0.8s;
-        }
-        
-        .recipe-image-layer-3 {
-            --move-distance: 6px;
-            animation-delay: -1.2s;
-        }
-
-        @keyframes MoveUpDown {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(var(--move-distance));
-            }
-        }
-    }
 </style>