From d3f059dc656a2506bff87adc4304d45667a3ac00 Mon Sep 17 00:00:00 2001
From: Julian Benegas <julianbenegas99@gmail.com>
Date: Thu, 12 Oct 2023 15:46:57 +0200
Subject: [PATCH] set debug to true

---
 .../src/app/components/cyllinder/index.tsx    | 10 +++----
 .../src/app/sections/falling-caps/index.tsx   | 18 +------------
 website/src/app/sections/footer/index.tsx     | 19 +++++++------
 website/src/app/sections/hero/index.tsx       |  2 +-
 .../app/sections/horizontal-marquee/index.tsx |  2 +-
 .../app/sections/lab-cylinder/intro/index.tsx |  2 +-
 .../src/app/sections/last-parallax/index.tsx  | 27 +++++++++++++++----
 7 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/website/src/app/components/cyllinder/index.tsx b/website/src/app/components/cyllinder/index.tsx
index a454348..4829dbc 100644
--- a/website/src/app/components/cyllinder/index.tsx
+++ b/website/src/app/components/cyllinder/index.tsx
@@ -5,9 +5,8 @@ import Image from "next/image";
 
 import s from "./cyllinder.module.scss";
 import clsx from "clsx";
-import { defaultConfig, useMapToCylinder } from "./helpers";
+import { useMapToCylinder } from "./helpers";
 import { Experiment } from "../../../lib/types";
-import { useMedia } from "../../../hooks/use-media";
 import Link from "next/link";
 import { useViewportSize } from "~/hooks/use-viewport";
 
@@ -22,8 +21,7 @@ const itemsInViewAtOnce = 7;
 const itemsPadding = 4;
 
 export const Cyllinder: React.FC<CyllinderProps> = ({ experiments }) => {
-  const { height, aspect } = useViewportSize();
-  const isMobileSize = useMedia("(max-width: 768px)");
+  const { height } = useViewportSize();
   const pinSpacerHeight = `calc(3 * ${itemHeight} * ${
     Math.max(itemsInViewAtOnce, experiments.length) + itemsPadding
   })`;
@@ -51,9 +49,7 @@ export const Cyllinder: React.FC<CyllinderProps> = ({ experiments }) => {
       callbacks={{
         onRefresh: () => update(progress.value),
       }}
-      // debug={{
-      //   label: "cylinder",
-      // }}
+      debug={{ label: "Cylinder" }}
     >
       <div
         className={s["section"]}
diff --git a/website/src/app/sections/falling-caps/index.tsx b/website/src/app/sections/falling-caps/index.tsx
index b1be492..8ceeda1 100644
--- a/website/src/app/sections/falling-caps/index.tsx
+++ b/website/src/app/sections/falling-caps/index.tsx
@@ -6,7 +6,6 @@ import s from "./falling-caps.module.scss";
 import { CapsModel } from "./caps";
 import { Canvas } from "@react-three/fiber";
 import { useMemo } from "react";
-import { getTimeline } from "../../../lib/utils";
 
 const splitText = (text: string, wordClass?: string) => {
   const wordsArray = text.split(" ");
@@ -45,23 +44,8 @@ export const FallingCaps = () => {
     []
   );
 
-  const perWordTimeline = useMemo(
-    () =>
-      getTimeline({
-        start: 0,
-        end: 50,
-        /* Chunk per word */
-        chunks: splittedText.length,
-        overlap: 0.7,
-      }),
-    [splittedText]
-  );
-
   return (
-    <Scrollytelling.Root
-      end="bottom bottom"
-      // debug={{ label: "falling caps" }}
-    >
+    <Scrollytelling.Root end="bottom bottom" debug={{ label: "Falling Caps" }}>
       <section className={s["spacer"]}>
         <div className={s["pin"]}>
           <div className={s["canvas-container"]}>
diff --git a/website/src/app/sections/footer/index.tsx b/website/src/app/sections/footer/index.tsx
index 95d49f4..e24ab08 100644
--- a/website/src/app/sections/footer/index.tsx
+++ b/website/src/app/sections/footer/index.tsx
@@ -4,8 +4,7 @@ import Image from "next/image";
 import bsmtTeamImg from "../../../../public/footer/basement-team-footer.jpg";
 import * as Scrollytelling from "~/lib/scrollytelling-client";
 import QRImg from "../../../../public/footer/QR.svg";
-import confetti from "canvas-confetti"
-
+import confetti from "canvas-confetti";
 
 import s from "./footer.module.scss";
 import Link from "next/link";
@@ -22,10 +21,7 @@ export const Footer = () => {
   const isDesktopSm = useMedia("(min-width: 1024px)");
 
   return (
-    <Scrollytelling.Root
-      start="top 80%"
-      // debug={{ label: "footer" }}
-    >
+    <Scrollytelling.Root start="top 80%" debug={{ label: "Footer" }}>
       <footer className={s.footer}>
         <PreFooter />
         <div className={s["imgs-container"]}>
@@ -100,7 +96,7 @@ export const Footer = () => {
 
 const PreFooter = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  
+
   const triggerConfetti = useCallback(() => {
     const canvas = canvasRef.current;
 
@@ -130,7 +126,14 @@ const PreFooter = () => {
     <div className={s["pre-footer"]}>
       <canvas ref={canvasRef} className={s.confetti} />
       <Scrollytelling.Waypoint at={50} onCall={triggerConfetti} />
-      <Scrollytelling.Waypoint at={75} tween={{ target: ['body'], to: { background: 'black', color: 'white' }, duration: 0.35 }} />
+      <Scrollytelling.Waypoint
+        at={75}
+        tween={{
+          target: ["body"],
+          to: { background: "black", color: "white" },
+          duration: 0.35,
+        }}
+      />
       <div className={s["left-content"]}>
         <p>
           Now we are talking! Say hello to our brand new scrollytelling library.
diff --git a/website/src/app/sections/hero/index.tsx b/website/src/app/sections/hero/index.tsx
index e04e690..b3f9bb1 100644
--- a/website/src/app/sections/hero/index.tsx
+++ b/website/src/app/sections/hero/index.tsx
@@ -15,7 +15,7 @@ export const Hero = () => {
   return (
     <Scrollytelling.Root
       defaults={{ ease: "linear" }}
-      // debug={{ label: "hero" }}
+      debug={{ label: "Hero" }}
     >
       <Scrollytelling.Pin
         childHeight={"100vh"}
diff --git a/website/src/app/sections/horizontal-marquee/index.tsx b/website/src/app/sections/horizontal-marquee/index.tsx
index 6875d5c..5278894 100644
--- a/website/src/app/sections/horizontal-marquee/index.tsx
+++ b/website/src/app/sections/horizontal-marquee/index.tsx
@@ -11,7 +11,7 @@ export const HorizontalMarquee = () => {
   return (
     <Scrollytelling.Root
       start="top top+=300px"
-      // debug={{ label: "horizontal marquee" }}
+      debug={{ label: "Horizontal Marquee" }}
     >
       <section className={s.section}>
         <div className={s.pinned}>
diff --git a/website/src/app/sections/lab-cylinder/intro/index.tsx b/website/src/app/sections/lab-cylinder/intro/index.tsx
index 1d129b1..44edd55 100644
--- a/website/src/app/sections/lab-cylinder/intro/index.tsx
+++ b/website/src/app/sections/lab-cylinder/intro/index.tsx
@@ -9,7 +9,7 @@ export const LabIntro = () => {
       start="top bottom"
       end="bottom top"
       scrub={1.1}
-      // debug={{ label: "lab intro" }}
+      debug={{ label: "Lab Intro" }}
     >
       <div className={s.container}>
         <Scrollytelling.Parallax
diff --git a/website/src/app/sections/last-parallax/index.tsx b/website/src/app/sections/last-parallax/index.tsx
index 432bb7f..dd8a062 100644
--- a/website/src/app/sections/last-parallax/index.tsx
+++ b/website/src/app/sections/last-parallax/index.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import * as Scrollytelling from "~/lib/scrollytelling-client";
 import Image from "next/image";
@@ -12,12 +12,29 @@ export const LastParallax = () => {
     <Scrollytelling.Root
       start="top bottom"
       scrub={0.75}
-      // debug={{ label: "last parallax" }}
+      debug={{ label: "Last Parallax" }}
     >
       <section className={s["section"]}>
         <div className="wrapper">
-          <Scrollytelling.Waypoint at={50} tween={{ target: ['body'], to: { background: 'white', color: 'black' }, duration: 0.35 }} />
-          <Scrollytelling.Waypoint at={75} tween={{ target: ['#smile-image', '#pc-image'], fromTo: [{ opacity: 0, scale: 0.4 }, { opacity: 1, scale: 1, ease: 'elastic.out(1,0.5)' }], duration: 1.2 }} />
+          <Scrollytelling.Waypoint
+            at={50}
+            tween={{
+              target: ["body"],
+              to: { background: "white", color: "black" },
+              duration: 0.35,
+            }}
+          />
+          <Scrollytelling.Waypoint
+            at={75}
+            tween={{
+              target: ["#smile-image", "#pc-image"],
+              fromTo: [
+                { opacity: 0, scale: 0.4 },
+                { opacity: 1, scale: 1, ease: "elastic.out(1,0.5)" },
+              ],
+              duration: 1.2,
+            }}
+          />
           <Image
             alt="PC"
             className={s["pc"]}
@@ -47,7 +64,7 @@ export const LastParallax = () => {
               ],
             }}
           >
-            <h2 className={s['title']}>
+            <h2 className={s["title"]}>
               THAT&apos;S ALL, <br />
               FOLKS
             </h2>