create hover animations and add files

parfum-shop/package-lock.json

@@ -8,6 +8,7 @@
       "name": "parfum-shop",
       "version": "0.0.0",
       "dependencies": {
+        "gsap": "^3.14.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -1582,6 +1583,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",

parfum-shop/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "gsap": "^3.14.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

parfum-shop/src/App.css

@@ -8,7 +8,9 @@
 .hero {
   position: relative;
   min-height: 720px;
-  margin: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 0px;
   border-radius: 0 0 18px 18px;
   overflow: hidden;
   background-image: url("/HERO.jpeg");
@@ -143,6 +145,9 @@
 }
 
 .product-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   background: #f5f5f5;
   border: 1px solid #d9d9d9;
   border-radius: 18px;
@@ -153,7 +158,52 @@
   justify-content: space-between;
 }
 
+.product-card:focus-visible {
+  outline: 2px solid #ff6a00;
+  outline-offset: 3px;
+}
+
+.product-hover-fill {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.product-hover-image,
+.product-hover-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.product-hover-image {
+  background-size: cover;
+  background-position: center;
+}
+
+.product-hover-video {
+  display: block;
+  object-fit: cover;
+}
+
+.product-hover-fill::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.08),
+    rgba(0, 0, 0, 0.18)
+  );
+}
+
 .product-top {
+  position: relative;
+  z-index: 4;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -174,6 +224,8 @@
 }
 
 .product-image-wrap {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -184,6 +236,8 @@
 }
 
 .product-image {
+  position: relative;
+  z-index: 1;
   width: 100%;
   max-width: 600px;
   height: auto;
@@ -192,6 +246,8 @@
 }
 
 .product-bottom {
+  position: relative;
+  z-index: 4;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
@@ -212,6 +268,25 @@
   line-height: 1;
 }
 
+.product-id,
+.product-top h3,
+.product-bottom p,
+.arrow {
+  transition: color 0.25s ease;
+}
+
+.product-card:hover .product-id,
+.product-card:hover .product-top h3,
+.product-card:hover .product-bottom p,
+.product-card:hover .arrow,
+.product-card:focus-within .product-id,
+.product-card:focus-within .product-top h3,
+.product-card:focus-within .product-bottom p,
+.product-card:focus-within .arrow {
+  color: #fff;
+  mix-blend-mode: difference;
+}
+
 /* DISCOVERY */
 .discovery-section {
   display: grid;
@@ -326,4 +401,4 @@
   .product-card {
     min-height: 320px;
   }
-}
+}

parfum-shop/src/App.jsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
 import "./App.css";
 
 const perfumes = [
@@ -5,7 +7,9 @@ const perfumes = [
     id: "01",
     name: "KALTER BETON",
     image:
-      "/KALTER BETON.png",
+      "/kalter-beton-product.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/kalter-beton-hover.webm",
     text: "Mineralisch. Roh. Unberührt.",
   },
   {
@@ -13,6 +17,8 @@ const perfumes = [
     name: "NASSER MARMOR",
     image:
       "/NASSER MARMOR.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/nasser-marmor-hover.webm",
     text: "Kühl. Glatt. Sinnlich.",
   },
   {
@@ -20,6 +26,8 @@ const perfumes = [
     name: "BLASSE SEIDE",
     image:
       "/BLASSE SEIDE.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/blasse-seide-hover.webm",
     text: "Blass. Sanft. Kostbar.",
   },
   {
@@ -27,6 +35,8 @@ const perfumes = [
     name: "WEISSE ASCHE",
     image:
       "/WEISSE ASCHE.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/weisse-asche-hover.webm",
     text: "Still. Staubig. Erhaben.",
   },
   {
@@ -34,6 +44,8 @@ const perfumes = [
     name: "VERBRANNTES CHROM",
     image:
       "/VERBRANNTES CHROM.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/verbranntes-chrom-hover.webm",
     text: "Metallisch. Verzehrt. Edel.",
   },
   {
@@ -41,11 +53,157 @@ const perfumes = [
     name: "SCHWARZES BENZIN",
     image:
       "/SCHWARZES BENZIN.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/schwarzes-benzin-hover.webm",
     text: "Dunkel. Glänzend. Verboten.",
   },
 ];
 
 function App() {
+  const cardRefs = useRef([]);
+
+  useEffect(() => {
+    const cards = cardRefs.current.filter(Boolean);
+    const cardStates = cards
+      .map((card) => {
+        const hoverFill = card.querySelector(".product-hover-fill");
+        const hoverVideo = card.querySelector(".product-hover-video");
+        const productImage = card.querySelector(".product-image");
+        const arrow = card.querySelector(".arrow");
+
+        if (!hoverFill || !productImage || !arrow) {
+          return null;
+        }
+
+        gsap.set(hoverFill, { autoAlpha: 0, scale: 1.08 });
+        gsap.set(productImage, { autoAlpha: 1, scale: 1 });
+        gsap.set(arrow, { x: 0 });
+
+        return { card, hoverFill, hoverVideo, productImage, arrow };
+      })
+      .filter(Boolean);
+
+    const stopVideo = (video) => {
+      if (!video) {
+        return;
+      }
+
+      video.pause();
+      try {
+        video.currentTime = 0;
+      } catch {
+        // Ignore if browser blocks random access while buffering.
+      }
+    };
+
+    const playVideo = (video) => {
+      if (!video) {
+        return;
+      }
+
+      try {
+        video.currentTime = 0;
+      } catch {
+        // Ignore if browser blocks random access while buffering.
+      }
+
+      const playAttempt = video.play();
+      if (playAttempt && typeof playAttempt.catch === "function") {
+        playAttempt.catch(() => {});
+      }
+    };
+
+    const deactivate = (state) => {
+      gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]);
+      stopVideo(state.hoverVideo);
+
+      gsap.to(state.hoverFill, {
+        autoAlpha: 0,
+        scale: 1.08,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.productImage, {
+        scale: 1,
+        autoAlpha: 1,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.arrow, {
+        x: 0,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const activate = (state) => {
+      cardStates.forEach((item) => {
+        if (item !== state) {
+          deactivate(item);
+        }
+      });
+
+      gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]);
+      playVideo(state.hoverVideo);
+
+      gsap.to(state.hoverFill, {
+        autoAlpha: 1,
+        scale: 1,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.productImage, {
+        scale: 0.92,
+        autoAlpha: 0.35,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.arrow, {
+        x: 8,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const cardCleanups = cardStates.map((state) => {
+      const onEnter = () => activate(state);
+      const onLeave = () => deactivate(state);
+
+      state.card.addEventListener("pointerenter", onEnter);
+      state.card.addEventListener("pointerleave", onLeave);
+
+      return () => {
+        state.card.removeEventListener("pointerenter", onEnter);
+        state.card.removeEventListener("pointerleave", onLeave);
+      };
+    });
+
+    const resetAll = () => {
+      cardStates.forEach((state) => deactivate(state));
+    };
+
+    const onMouseOutWindow = (event) => {
+      if (!event.relatedTarget) {
+        resetAll();
+      }
+    };
+
+    window.addEventListener("blur", resetAll);
+    document.addEventListener("mouseout", onMouseOutWindow);
+
+    return () => {
+      window.removeEventListener("blur", resetAll);
+      document.removeEventListener("mouseout", onMouseOutWindow);
+      cardCleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
   return (
     <div className="page">
       <header className="hero">
@@ -99,8 +257,32 @@ function App() {
           </div>
 
           <div className="product-grid">
-            {perfumes.map((item) => (
+            {perfumes.map((item, index) => (
-              <article className="product-card" key={item.id}>
+              <article
+                className="product-card"
+                key={item.id}
+                ref={(el) => {
+                  cardRefs.current[index] = el;
+                }}
+              >
+                <div className="product-hover-fill" aria-hidden="true">
+                  {item.fillVideo ? (
+                    <video
+                      className="product-hover-video"
+                      src={item.fillVideo}
+                      muted
+                      loop
+                      playsInline
+                      preload="metadata"
+                    />
+                  ) : (
+                    <div
+                      className="product-hover-image"
+                      style={{ backgroundImage: `url(${item.fillImage || item.image})` }}
+                    />
+                  )}
+                </div>
+
                 <div className="product-top">
                   <span className="product-id">{item.id}</span>
                   <h3>{item.name}</h3>
@@ -148,4 +330,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;