Video

scrollytelling/src/components/debugger/visualizer/visualizer.module.scss

@@ -27,6 +27,8 @@
   visibility: hidden;
   color: var(--color-white);
 
+  animation: fade-in 1s ease-out forwards;
+
   &.initialized {
     visibility: visible;
   }
@@ -219,6 +221,17 @@
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
 .tween {
   --duration-percentage: 0;
   --start-offset-percentage: 0;

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,9 @@ export const Cyllinder: React.FC<CyllinderProps> = ({ experiments }) => {
       callbacks={{
         onRefresh: () => update(progress.value),
       }}
-      // debug={{
-      //   label: "cylinder",
-      // }}
+      debug={{
+        label: "Cylinder",
+      }}
     >
       <div
         className={s["section"]}

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"]}>

website/src/app/sections/footer/index.tsx

@@ -20,10 +20,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"]}>

website/src/app/sections/hero/hero.module.scss

@@ -3,6 +3,8 @@
 .pin-spacer {
   position: relative;
   z-index: 1;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
 }
 
 .header {

website/src/app/sections/hero/index.tsx

@@ -8,14 +8,34 @@ import { LogoBasement } from "../../logos/logo";
 import { CanvasWithMacModel } from "./mac-model";
 import { toVw } from "~/lib/utils";
 import { useMedia } from "~/hooks/use-media";
+import { useEffect } from "react";
 
 export const Hero = () => {
   const isMobileSize = useMedia("(max-width: 768px)");
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k") {
+        const el = document.querySelector<HTMLDivElement>(
+          `.${s["pin-spacer"]}`
+        );
+        if (el) {
+          el.style.opacity = "1";
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   return (
     <Scrollytelling.Root
       defaults={{ ease: "linear" }}
-      // debug={{ label: "hero" }}
+      debug={{ label: "Hero" }}
     >
       <Scrollytelling.Pin
         childHeight={"100vh"}

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}>

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

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

@@ -11,7 +11,7 @@ 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">