From cdf5bef0345c173ec684c98ea0800678562e2155 Mon Sep 17 00:00:00 2001
From: Matias Perez <matiasperezpc@hotmail.com>
Date: Tue, 10 Oct 2023 17:24:31 +0200
Subject: [PATCH] add confetti

---
 .../src/app/sections/last-parallax/index.tsx  | 33 ++++++++++++++++++-
 .../last-parallax/last-parallax.module.scss   |  6 ++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/website/src/app/sections/last-parallax/index.tsx b/website/src/app/sections/last-parallax/index.tsx
index febdf7e..cbc63e5 100644
--- a/website/src/app/sections/last-parallax/index.tsx
+++ b/website/src/app/sections/last-parallax/index.tsx
@@ -1,12 +1,41 @@
+'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"
@@ -14,9 +43,11 @@ export const LastParallax = () => {
       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,
diff --git a/website/src/app/sections/last-parallax/last-parallax.module.scss b/website/src/app/sections/last-parallax/last-parallax.module.scss
index 7eb619e..5b1f714 100644
--- a/website/src/app/sections/last-parallax/last-parallax.module.scss
+++ b/website/src/app/sections/last-parallax/last-parallax.module.scss
@@ -58,4 +58,10 @@
       top: 55%;
     }
   }
+
+  .confetti {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 }