update orchestra, layout, theatre

components/footer/footer.module.scss

@@ -1,9 +1,23 @@
 .footer {
-  color: var(--theme-primary);
-  background-color: var(--theme-secondary);
-  padding: mobile-vw(20px) 0;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: currentColor;
+  }
+
+  padding-top: mobile-vw(20px);
+  padding-bottom: mobile-vw(20px);
 
   @include desktop {
-    padding: desktop-vw(40px) 0;
+    padding-top: desktop-vw(40px);
+    padding-bottom: desktop-vw(40px);
   }
 }

components/footer/index.js

@@ -1,16 +1,19 @@
 import { Link } from '@studio-freight/compono'
+import cn from 'clsx'
 import s from './footer.module.scss'
 
 export function Footer() {
   return (
-    <footer className={s.footer}>
-      <div className="layout-block">
-        <h2>
-          <Link href="mailto:[email protected]">mail</Link>
-          <Link href="/contact">contact</Link>
-          <Link>twitter</Link>
-        </h2>
-      </div>
+    <footer className={cn(s.footer, 'layout-block')}>
+      <Link href="mailto:[email protected]" className="link">
+        mail
+      </Link>
+      <Link href="/contact" className="link">
+        contact
+      </Link>
+      <Link href="https://twitter.com/studiofreight" className="link">
+        twitter
+      </Link>
     </footer>
   )
 }

components/header/index.js

@@ -22,8 +22,9 @@ export const Header = forwardRef((_, ref) => {
           menu
         </button>
         <div>
-          <Link href="/">home</Link>/<Link href="/gsap">gsap</Link>/
-          <Link href="/contact">contact</Link>
+          <Link href="/_debug/orchestra" target="_blank" className="link">
+            debug
+          </Link>
         </div>
       </div>
     </header>

components/navigation/index.js

@@ -29,7 +29,6 @@ export function Navigation() {
     <Lenis className={cn(s.navigation, !navIsOpened && s.closed)}>
       <div className={s.content}>
         <Link href="/">home</Link>
-        <Link href="/gsap">gsap</Link>
         <Link href="/contact">contact</Link>
       </div>
     </Lenis>

components/navigation/navigation.module.scss

@@ -1,6 +1,6 @@
 .navigation {
   height: 0;
-  background-color: green;
+  background-color: var(--black);
   position: absolute;
   top: 0;
   left: 0;
@@ -19,5 +19,9 @@
 
   .content {
     height: 500vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50vh;
   }
 }

components/preload-fonts/index.js

@@ -0,0 +1,18 @@
+export function PreloadFonts({ fonts = [] }) {
+  return (
+    <>
+      {fonts.map((path) => {
+        return (
+          <link
+            key={path}
+            href={path}
+            as="font"
+            rel="preload prefetch"
+            type="font/woff2"
+            crossOrigin="anonymous"
+          />
+        )
+      })}
+    </>
+  )
+}

components/scrollbar/index.js

@@ -0,0 +1,73 @@
+import { useRect } from '@studio-freight/hamo'
+import { useLenis } from '@studio-freight/react-lenis'
+import { mapRange } from 'libs/maths'
+import { useEffect, useRef } from 'react'
+import s from './scrollbar.module.scss'
+
+export function Scrollbar() {
+  const thumbRef = useRef()
+  const lenis = useLenis()
+  const [innerMeasureRef, { height: innerHeight }] = useRect()
+  const [thumbMeasureRef, { height: thumbHeight }] = useRect()
+
+  useLenis(
+    ({ scroll, limit }) => {
+      const progress = scroll / limit
+
+      thumbRef.current.style.transform = `translate3d(0,${
+        progress * (innerHeight - thumbHeight)
+      }px,0)`
+    },
+    [innerHeight, thumbHeight],
+  )
+
+  useEffect(() => {
+    let start = null
+
+    function onPointerMove(e) {
+      if (!start) return
+      e.preventDefault()
+
+      const scroll = mapRange(
+        start,
+        innerHeight - (thumbHeight - start),
+        e.clientY,
+        0,
+        lenis.limit,
+      )
+      lenis.scrollTo(scroll, { immediate: true })
+    }
+
+    function onPointerDown(e) {
+      start = e.offsetY
+    }
+
+    function onPointerUp() {
+      start = null
+    }
+
+    thumbRef.current?.addEventListener('pointerdown', onPointerDown, false)
+    window.addEventListener('pointermove', onPointerMove, false)
+    window.addEventListener('pointerup', onPointerUp, false)
+
+    return () => {
+      thumbRef.current?.removeEventListener('pointerdown', onPointerDown, false)
+      window.removeEventListener('pointermove', onPointerMove, false)
+      window.removeEventListener('pointerup', onPointerUp, false)
+    }
+  }, [lenis, innerHeight])
+
+  return (
+    <div className={s.scrollbar}>
+      <div ref={innerMeasureRef} className={s.inner}>
+        <div
+          className={s.thumb}
+          ref={(node) => {
+            thumbRef.current = node
+            thumbMeasureRef(node)
+          }}
+        />
+      </div>
+    </div>
+  )
+}

components/scrollbar/scrollbar.module.scss

@@ -0,0 +1,26 @@
+.scrollbar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 2;
+
+  .inner {
+    height: 100%;
+    position: relative;
+  }
+
+  .thumb {
+    min-height: desktop-vw(80px);
+    width: desktop-vw(8px);
+    background-color: var(--theme-contrast);
+    position: absolute;
+    right: 0;
+    border-radius: 0;
+    cursor: grab;
+  }
+
+  @include mobile {
+    display: none;
+  }
+}

config/variables.js

@@ -1,16 +1,19 @@
 const colors = {
   black: '#000000',
   white: '#ffffff',
+  green: '#00ff6a',
 }
 
 const themes = {
   light: {
     primary: colors.white,
     secondary: colors.black,
+    contrast: colors.green,
   },
   dark: {
     primary: colors.black,
     secondary: colors.white,
+    contrast: colors.green,
   },
 }
 

hooks/use-fouc-fix.js

@@ -0,0 +1,72 @@
+import { useEffect } from 'react'
+
+// Temporary fix to avoid flash of unstyled content (FOUC) during route transitions.
+// Keep an eye on this issue and remove this code when resolved: https://github.com/vercel/next.js/issues/17464
+export function useFoucFix() {
+  useEffect(() => {
+    // Gather all server-side rendered stylesheet entries.
+    let stylesheets = Array.from(
+      document.querySelectorAll('link[rel="stylesheet"][data-n-p]'),
+    ).map((element) => ({
+      element,
+      href: element.getAttribute('href'),
+    }))
+
+    // Remove the `data-n-p` attribute to prevent Next.js from removing it early.
+    stylesheets.forEach(({ element }) => element.removeAttribute('data-n-p'))
+
+    const hrefs = []
+
+    const mutationHandler = (mutations) => {
+      // Gather all <style data-n-href="/..."> elements.
+      const entries = mutations
+        .filter(
+          ({ target }) =>
+            target.nodeName === 'STYLE' && target.hasAttribute('data-n-href'),
+        )
+        .map(({ target }) => ({
+          element: target,
+          href: target.getAttribute('data-n-href'),
+        }))
+
+      // Cycle through them and either:
+      // - Remove the `data-n-href` attribute to prevent Next.js from removing it early.
+      // - Remove the element if it's already present.
+      entries.forEach(({ element, href }) => {
+        const exists = hrefs.includes(href)
+
+        if (exists) {
+          element.remove()
+        } else {
+          element.setAttribute('data-fouc-fix-n-href', href)
+          element.removeAttribute('data-n-href')
+          hrefs.push(href)
+        }
+      })
+
+      // Cycle through the server-side rendered stylesheets and remove the ones that
+      // are already present as inline <style> tags added by Next.js, so that we don't have duplicate styles.
+      stylesheets = stylesheets.reduce((entries, entry) => {
+        const { element, href } = entry
+        const exists = hrefs.includes(href)
+
+        if (exists) {
+          element.remove()
+        } else {
+          entries.push(entry)
+        }
+
+        return entries
+      }, [])
+    }
+
+    const observer = new MutationObserver(mutationHandler)
+
+    observer.observe(document.head, {
+      subtree: true,
+      attributeFilter: ['media'],
+    })
+
+    return () => observer.disconnect()
+  }, [])
+}

layouts/default/index.js

@@ -1,8 +1,9 @@
-import { Cursor, CustomHead, Scrollbar } from '@studio-freight/compono'
+import { Cursor, CustomHead } from '@studio-freight/compono'
 import { Lenis, useLenis } from '@studio-freight/react-lenis'
 import cn from 'clsx'
 import { Footer } from 'components/footer'
 import { Header } from 'components/header'
+import { Scrollbar } from 'components/scrollbar'
 import Router from 'next/router'
 import { useEffect } from 'react'
 import s from './layout.module.scss'

libs/orchestra/grid/index.js

@@ -9,8 +9,8 @@ export function GridDebugger() {
   const columns = useMemo(() => {
     return parseInt(
       getComputedStyle(document.documentElement).getPropertyValue(
-        '--layout-columns-count'
-      )
+        '--layout-columns-count',
+      ),
     )
   }, [isMobile])