Merge pull request #3 from basementstudio/hero-header-es-parte-del-he…

…ro-not-sticky-oss-33 Hero & Header
basementstudio · Apr 13, 2023 · 799a16f · 799a16f · vercel · Apr 13, 2023
2 parents eb3d5f3 + 7066253
commit 799a16f
Show file tree

Hide file tree

Showing 18 changed files with 1,786 additions and 226 deletions.
diff --git a/.changeset/modern-poems-hunt.md b/.changeset/modern-poems-hunt.md
@@ -0,0 +1,5 @@
+---
+"@bsmnt/scrollytelling": minor
+---
+
+Add RegisterGsapPlugin component, so you can pass custom gsap plugins
diff --git a/scrollytelling/src/primitive.tsx b/scrollytelling/src/primitive.tsx
@@ -4,6 +4,7 @@ import { gsap } from "gsap";
 import ScrollTrigger from "gsap/dist/ScrollTrigger";
 import * as Portal from "@radix-ui/react-portal";
 import { buildDeclarativeTween } from "./util/build-declarative-tween";
+import { useIsoLayoutEffect } from "./hooks/use-iso-layout-effect";
 
 /* -------------------------------------------------------------------------------------------------
  * Root
@@ -491,8 +492,8 @@ const Pin = React.forwardRef<
   HTMLDivElement,
   {
     children?: React.ReactNode;
-    start?: number;
-    end?: number;
+    // start?: number;
+    // end?: number;
     top: string | number;
     childHeight: string | number;
     pinSpacerHeight: string | number;
@@ -530,6 +531,21 @@ const Pin = React.forwardRef<
 
 Pin.displayName = "Pin";
 
+/* -------------------------------------------------------------------------------------------------
+ * RegisterGsapPlugins
+ * -----------------------------------------------------------------------------------------------*/
+
+type Plugin = Parameters<typeof gsap.registerPlugin>[number];
+
+const RegisterGsapPlugins = ({ plugins }: { plugins: Plugin[] }) => {
+  // this needs to run before scrolltrigger does any animations
+  useIsoLayoutEffect(() => {
+    gsap.registerPlugin(...plugins);
+  }, []);
+
+  return null;
+};
+
 /* -------------------------------------------------------------------------------------------------
  * useScrollToLabel
  * -----------------------------------------------------------------------------------------------*/
@@ -601,6 +617,7 @@ export {
   Waypoint,
   Parallax,
   Pin,
+  RegisterGsapPlugins,
   //
   useScrollytelling,
   useScrollToLabel,

diff --git a/website/package.json b/website/package.json
@@ -11,11 +11,17 @@
   },
   "dependencies": {
     "@bsmnt/scrollytelling": "*",
+    "@react-three/drei": "^9.65.3",
+    "@react-three/fiber": "^8.12.0",
+    "@types/three": "^0.150.1",
     "clsx": "^1.2.1",
-    "gsap": "file:./src/lib/gsap/gsap-bonus.tgz",
+    "gsap": "^3.11.5",
+    "leva": "^0.9.34",
     "next": "^13.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "three": "^0.151.3",
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.2.5",

diff --git a/website/public/models/Mac128k-light.glb b/website/public/models/Mac128k-light.glb
diff --git a/website/src/app/css/global.scss b/website/src/app/css/global.scss
@@ -10,6 +10,9 @@
   --color-black: #000;
   --color-white: #efefef;
   --color-orange: #ff4d00;
+
+  // Layout
+  --header-height: #{tovw(152px, 'desktop-large')}
 }
 
 html {
@@ -42,3 +45,18 @@ body:not(.user-is-tabbing) select:focus,
 body:not(.user-is-tabbing) textarea:focus {
   outline: none;
 }
+
+.wrapper {
+  width: 100%;
+  padding: 0 tovw(32px, 'desktop-large', 16px);
+}
+
+.canvas {
+  position: fixed !important;
+  top: 0;
+  left: 0; 
+  width: 100vw !important; 
+  height: 100vh !important;
+  z-index: 10;
+}
+
diff --git a/website/src/app/hooks/use-iso-layout-effect.ts b/website/src/app/hooks/use-iso-layout-effect.ts
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+export const useIsoLayoutEffect =
+  typeof document === 'undefined' ? useEffect : useLayoutEffect
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "./css/global.scss";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import { Providers } from "./providers";
 
 const basementGrotesque = localFont({
   src: [
@@ -33,7 +34,9 @@ export default function RootLayout({
         ["--font-basement-grotesque" as string]: `${basementGrotesque.style.fontFamily}, var(--font-system), sans-serif`,
       }}
     >
-      <body>{children}</body>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/website/src/app/logos/logo.tsx b/website/src/app/logos/logo.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export type IconType = {
+  className?: string;
+};
+
+export const LogoBasement = ({ className }: IconType) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 251 36"
+    >
+      <path
+        fill="#fff"
+        d="M0 0v34.8h8.048v-6.263c.87 4.524 3.697 6.786 8.526 6.786 8.091 0 9.918-1.958 9.918-11.702v-3.74c0-9.745-1.784-11.703-9.483-11.703-5.22 0-7.743 1.175-8.744 5.22V0H0zm8.309 18.88c.217-2.35 1.783-3.48 4.741-3.48 4.002 0 4.742.87 4.742 4.74v3.307c0 3.828-.74 4.698-4.742 4.698-2.914 0-4.48-.87-4.741-2.566v-6.7zM44.268 8.11h-2.002c-10.178 0-12.093 1.392-12.093 8.57v1.043h8.266c-.088-3.002.652-3.523 4.741-3.523 3.654 0 4.35.521 4.35 3.523v1.48l-8.265.043c-8.396 0-9.962 1.261-9.962 7.96 0 7.004 1.566 8.309 10.092 8.048 4.09-.043 7.004-1.653 8.135-5.133v4.61h8.265V17.159c0-7.613-1.827-9.049-11.528-9.049zm-6.265 19.183c0-1.653.436-1.957 2.697-1.957l6.83-.044v1.131c0 2.089-1.348 2.871-5.046 2.958h-.435c-3.393 0-4.046-.348-4.046-2.088zm28.433-.74v-.565h-7.83v.566c0 7.308 1.826 8.7 11.397 8.7h2c10.963 0 12.964-1.218 12.964-7.482 0-4.046-1-6.395-5.177-7.613-2.218-.652-4.22-1.174-8.482-1.87-2.828-.435-3.61-.957-3.61-2.045 0-1.61.87-2.044 4.088-2.044 3.35 0 4.263.609 4.263 2.74v.783h8.266v-.783c0-7.438-1.827-8.83-11.528-8.83h-2.001c-9.918 0-11.789 1.217-11.789 7.873 0 3.48.914 5.438 4.48 6.786 2.61 1 6.57 1.61 8.092 1.914 3.828.696 4.741 1.392 4.741 2.48 0 1.566-1 2-4.741 2-4.046 0-5.133-.565-5.133-2.61zm48.201-.13h-8.7c0 2.262-.74 2.74-4.742 2.74-4.263 0-5.046-.739-5.046-4.567v-.13h18.705V20.42c0-10.353-2.001-12.31-12.702-12.31h-2.001c-10.701 0-12.702 2.131-12.702 13.572 0 11.44 2 13.572 12.702 13.572h2.001c10.527 0 12.485-1.392 12.485-8.83zm-18.488-8.047v-.13c0-3.394.783-4.046 5.046-4.046 4.046 0 4.916.652 4.959 4.176H96.149zm22.363-9.745v26.1h8.266V19.638c0-3.045 1.435-4.567 4.306-4.567 3.35 0 3.959.652 3.959 4.045v15.617h8.221l-.043-15.356c.087-2.871 1.522-4.306 4.307-4.306 3.305 0 3.915.652 3.915 4.045v15.617h8.221l-.043-16.878c0-8.178-1.479-9.745-9.44-9.745-4.394 0-7.047 1.915-8.004 6.047-.348-4.96-1.784-6.047-8.352-6.047-3.915 0-6.134 1.61-7.047 5.525V8.631h-8.266zm71.565 17.792h-8.7c0 2.262-.74 2.74-4.742 2.74-4.263 0-5.046-.739-5.046-4.567v-.13h18.705V20.42c0-10.353-2.001-12.31-12.702-12.31h-2.001c-10.701 0-12.702 2.131-12.702 13.572 0 11.44 2.001 13.572 12.702 13.572h2.001c10.527 0 12.485-1.392 12.485-8.83zm-18.488-8.047v-.13c0-3.394.783-4.046 5.046-4.046 4.046 0 4.916.652 4.959 4.176h-10.005zm22.286-9.745v26.1h8.265V19.203c.043-2.784 1.566-4.132 4.567-4.132 3.828 0 4.524.74 4.524 4.741v14.92h8.266l-.044-16.877c0-8.178-1.435-9.745-9.005-9.745-4.741 0-7.308 1.61-8.308 5.83V8.63h-8.265zm46.402 18.703h-4.829c-2.523 0-3.001-.435-3.001-2.653v-9.092h7.395v-6.96h-7.395V3.06h-7.83v5.568h-3.045v6.96h2.61v10.353c0 7.395 1.696 8.787 10.44 8.787h5.655v-7.395zm10.723.057h-7.395v7.395H251V27.39z"
+      ></path>
+    </svg>
+  );
+};
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
@@ -1,22 +1,26 @@
+"use client";
+
+import { useAppStore } from "../context/use-app-store";
+import { useIsoLayoutEffect } from "./hooks/use-iso-layout-effect";
 import { FallingCaps } from "./sections/falling-caps";
 import { Footer } from "./sections/footer";
 import { Hero } from "./sections/hero";
 import { HorizontalMarquee } from "./sections/horizontal-marquee";
 import { LastParallax } from "./sections/last-parallax";
 import { MysteriousSection } from "./sections/mysterious";
 
+import gsap from "gsap";
+
 export default function HomePage() {
-  return (
-    <main>
-      {/* fonts preview: */}
-      <h1 style={{ fontWeight: 900, fontSize: "5vw" }}>
-        We Make Cool Shit That Performs
-      </h1>
-      <p style={{ fontWeight: 400 }}>Regular</p>
-      <p style={{ fontWeight: 800 }}>Black Expanded</p>
-      <p style={{ fontWeight: 900 }}>Ultra Black Expanded</p>
-      {/* end fonts preview */}
+  const { fontsLoaded, canvasLoaded, loading } = useAppStore();
 
+  useIsoLayoutEffect(() => {
+    if (!fontsLoaded || !canvasLoaded || loading) return;
+    gsap.to("main", { autoAlpha: 1, duration: 0.3 });
+  }, [fontsLoaded, canvasLoaded, loading]);
+
+  return (
+    <main style={{ opacity: 0 }}>
       <Hero />
       <FallingCaps />
       <HorizontalMarquee />

diff --git a/website/src/app/providers.tsx b/website/src/app/providers.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAppStore } from "../context/use-app-store";
+import { useIsoLayoutEffect } from "./hooks/use-iso-layout-effect";
+import { useProgress } from "@react-three/drei";
+
+const useFontsLoaded = () => {
+  useEffect(() => {
+    const maxWaitTime = 1500; // tweak this as needed.
+
+    const timeout = window.setTimeout(() => {
+      onReady();
+    }, maxWaitTime);
+
+    function onReady() {
+      window.clearTimeout(timeout);
+      useAppStore.setState({ fontsLoaded: true });
+      document.documentElement.classList.add("fonts-loaded");
+    }
+
+    try {
+      document.fonts.ready
+        .then(() => {
+          onReady();
+        })
+        .catch((error: unknown) => {
+          console.error(error);
+          onReady();
+        });
+    } catch (error) {
+      console.error(error);
+      onReady();
+    }
+  }, []);
+};
+
+const useLoader = () => {
+  const { active } = useProgress();
+
+  useIsoLayoutEffect(() => {
+    useAppStore.setState({ loading: false });
+  }, [active]);
+
+  return null;
+};
+
+export const Providers = ({ children }: { children?: React.ReactNode }) => {
+  useFontsLoaded();
+  useLoader();
+
+  return <>{children}</>;
+};