add confetti

website/src/app/sections/last-parallax/index.tsx

@@ -1,22 +1,53 @@
+'use client'
+
 import * as Scrollytelling from "~/lib/scrollytelling-client";
 import Image from "next/image";
-
+import confetti from "canvas-confetti"
 import SMILE_IMAGE from "../../../../public/images/parallax/smile.png";
 import PC_IMAGE from "../../../../public/images/parallax/pc.png";
 
 import s from "./last-parallax.module.scss";
+import { useCallback, useEffect, useRef } from "react";
 
 export const LastParallax = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const triggerConfetti = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    confetti.create(canvas, {
+      resize: true,
+      useWorker: true,
+    })({
+      startVelocity: 20,
+      particleCount: 120,
+      spread: 1500,
+      gravity: 0.6,
+      origin: { y: 0.42 },
+      colors: [
+        "#ff4d00",
+        "#ff5e00",
+        "#ff8000",
+        "#ffa200",
+        "#b23500",
+        "#d84000",
+      ],
+    });
+  }, []);
+
   return (
     <Scrollytelling.Root
       start="top bottom"
       scrub={0.75}
       debug={{ label: "last parallax" }}
     >
       <section className={s["section"]}>
+        <canvas ref={canvasRef} className={s["confetti"]} />
         <div className="wrapper">
           <Scrollytelling.Waypoint at={50} tween={{ target: ['body'], to: { background: 'white', color: 'black' }, duration: 0.35 }} />
           <Scrollytelling.Waypoint at={100} tween={{ target: ['body'], to: { background: 'black', color: 'white' }, duration: 0.35 }} />
+          <Scrollytelling.Waypoint at={90} onCall={triggerConfetti} />
           <Scrollytelling.Parallax
             tween={{
               start: 0,

website/src/app/sections/last-parallax/last-parallax.module.scss

@@ -58,4 +58,10 @@
       top: 55%;
     }
   }
+
+  .confetti {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 }