Merge pull request #58 from basementstudio/visualizer-demo

Visualizer demo

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

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

@@ -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.

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

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

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