feat: add confetti

Author: ArcoMul

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.8",
+    "canvas-confetti": "^1.9.3",
     "tailwindcss": "^4.1.13"
   }
 }

package.json

@@ -39,12 +39,14 @@ import "../styles/global.css";
         >
           <ProductCard image={crepeMaker} name="Crepe Maker (30cm)" />
         </div>
-        <div
+        <button
+          data-click="confetti"
           data-rotate="follow-mouse"
-          class="absolute -right-5 -bottom-5 px-5 py-2 bg-gray-800 rounded-sm inline-block text-white font-semibold text-lg"
+          aria-hidden="true"
+          class="absolute z-200 cursor-pointer -right-5 -bottom-5 px-5 py-2 bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-sm inline-block text-white font-semibold text-lg"
         >
           Reserve
-        </div>
+        </button>
       </div>
     </div>
   </header>
@@ -138,26 +140,7 @@ import "../styles/global.css";
     </p>
   </footer>
   <script>
-    (() => {
-      const MAX_X = 3;
-      const MAX_Y = 10;
-      const RANGE_X = 700;
-      const RANGE_Y = 500;
-
-      const followMouse = Array.from(
-        document.querySelectorAll("[data-rotate=follow-mouse]")
-      ) as HTMLElement[];
-
-      document.addEventListener("mousemove", (e) => {
-        followMouse.forEach((elm) => {
-          const rect = elm.getBoundingClientRect();
-          const center = {
-            left: rect.left + rect.width / 2,
-            top: rect.top + rect.height / 2,
-          };
-          elm.style.transform = `rotateX(${Math.round((Math.min(center.top - e.clientY, RANGE_Y) / RANGE_Y) * MAX_X)}deg) rotateY(${Math.round((Math.min(center.left - e.clientX, RANGE_X) / RANGE_X) * MAX_Y * -1)}deg)`;
-        });
-      });
-    })();
+    import "../scripts/click-confetti";
+    import "../scripts/follow-mouse";
   </script>
 </Layout>

src/pages/index.astro

@@ -0,0 +1,23 @@
+import confetti from "canvas-confetti";
+import { isReducedMotion } from "./media";
+
+if (!isReducedMotion) {
+  const elms = Array.from(
+    document.querySelectorAll("[data-click=confetti]")
+  ) as HTMLElement[];
+  console.log(elms);
+  elms.forEach((elm) => {
+    elm.addEventListener("click", () => {
+      console.log("click");
+      const rect = elm.getBoundingClientRect();
+      confetti({
+        particleCount: 50,
+        spread: 50,
+        origin: {
+          x: (rect.left + rect.width / 2) / window.innerWidth,
+          y: (rect.top + rect.height / 2) / window.innerHeight,
+        },
+      });
+    });
+  });
+}

src/scripts/click-confetti.ts

@@ -0,0 +1,27 @@
+import { isReducedMotion } from "../scripts/media";
+
+const MAX_X = 3;
+const MAX_Y = 10;
+const RANGE_X = 700;
+const RANGE_Y = 500;
+
+if (!isReducedMotion) {
+  const followMouse = Array.from(
+    document.querySelectorAll("[data-rotate=follow-mouse]")
+  ) as HTMLElement[];
+
+  document.addEventListener("mousemove", (e) => {
+    followMouse.forEach((elm) => {
+      const rect = elm.getBoundingClientRect();
+      const center = {
+        left: rect.left + rect.width / 2,
+        top: rect.top + rect.height / 2,
+      };
+      elm.style.transform = `rotateX(${Math.round(
+        (Math.min(center.top - e.clientY, RANGE_Y) / RANGE_Y) * MAX_X
+      )}deg) rotateY(${Math.round(
+        (Math.min(center.left - e.clientX, RANGE_X) / RANGE_X) * MAX_Y * -1
+      )}deg)`;
+    });
+  });
+}

src/scripts/follow-mouse.ts

@@ -0,0 +1,2 @@
+export const isReducedMotion =
+  window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;