Band Transition

npx shadcn@latest add @atelier/band-transition

npm install motion

"use client"

import type { Easing } from "motion"
import { motion } from "motion/react"
import { type ReactNode, useRef, useState } from "react"
import { type CoverAnimation, TransitionProvider } from "../page-transition/page-transition"

const JITTER = [0.2, 0, 0.25, 0.1, 0.15]
const EASE: Easing = [0.2, 1, 0.22, 1]
const REDUCED_DURATION = 0.15

type Phase = "idle" | "in" | "out" | "reduced-in" | "reduced-out"

type BandTransitionProps = {
    children: ReactNode
    color?: string
    bands?: number
    duration?: number
    stagger?: number
}

export function BandTransition({
    children,
    color = "#151515",
    bands = 5,
    duration = 0.6,
    stagger = 0.5,
}: BandTransitionProps) {
    const [phase, setPhase] = useState<Phase>("idle")
    const pending = useRef(0)
    const resolveRef = useRef<(() => void) | null>(null)

    const settle = (next?: Phase) => () => {
        pending.current -= 1
        if (pending.current !== 0) return
        resolveRef.current?.()
        if (next) setPhase(next)
    }

    const coverIn: CoverAnimation = (reduced) =>
        new Promise((resolve) => {
            resolveRef.current = resolve
            pending.current = bands
            setPhase(reduced ? "reduced-in" : "in")
        })

    const coverOut: CoverAnimation = (reduced) =>
        new Promise((resolve) => {
            resolveRef.current = resolve
            pending.current = bands
            setPhase(reduced ? "reduced-out" : "out")
        })

    const covering = phase === "in" || phase === "reduced-in"
    const reduced = phase === "reduced-in" || phase === "reduced-out"

    return (
        <TransitionProvider coverIn={coverIn} coverOut={coverOut}>
            {children}

            <div
                aria-hidden
                className={`pointer-events-none fixed inset-0 z-70 flex flex-col ${phase === "idle" ? "invisible" : ""}`}
            >
                {Array.from({ length: bands }, (_, i) => (
                    <motion.div
                        key={i}
                        className="flex-1"
                        style={{ backgroundColor: color, originX: covering ? 1 : 0 }}
                        animate={
                            reduced
                                ? { opacity: covering ? 1 : 0, scaleX: 1 }
                                : { opacity: 1, scaleX: covering ? 1 : 0 }
                        }
                        transition={
                            reduced
                                ? { duration: REDUCED_DURATION }
                                : {
                                      duration,
                                      ease: EASE,
                                      delay: JITTER[i % JITTER.length] * stagger,
                                  }
                        }
                        onAnimationComplete={settle(
                            phase === "out" || phase === "reduced-out" ? "idle" : undefined,
                        )}
                    />
                ))}
            </div>
        </TransitionProvider>
    )
}

"use client"

import { useProgress, useTexture } from "@react-three/drei"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import {
    type ComponentProps,
    type ComponentType,
    createContext,
    type ReactNode,
    useCallback,
    useContext,
    useEffect,
    useRef,
    useState,
    useTransition,
} from "react"

export type CoverAnimation = (reduced: boolean) => Promise<void>
type PageComponent = ComponentType<{ children: ReactNode }>
type TransitionLinkProps = Omit<ComponentProps<typeof Link>, "href"> & {
    href: string
    preload?: string[]
}

const trimSlash = (path: string) => path.replace(/(.)\/+$/, "$1")

const NavigateContext = createContext<((href: string) => void) | null>(null)
const PageContext = createContext<PageComponent | null>(null)

type TransitionProviderProps = {
    children: ReactNode
    coverIn: CoverAnimation
    coverOut: CoverAnimation
    page?: PageComponent
}

export function TransitionProvider({ children, coverIn, coverOut, page }: TransitionProviderProps) {
    const router = useRouter()
    const pathname = usePathname()
    const busy = useRef(false)
    const reduced = useRef(false)
    const animations = useRef({ coverIn, coverOut })
    animations.current = { coverIn, coverOut }
    const [covered, setCovered] = useState(false)
    const [isPending, startTransition] = useTransition()
    const loaderActive = useProgress((state) => state.active)

    const locationPath = useRef("")
    useEffect(() => {
        locationPath.current = window.location.pathname
    }, [pathname])

    const navigate = useCallback(
        async (href: string) => {
            if (busy.current) return
            const target = new URL(href, `http://n${pathname}`).pathname
            if (trimSlash(target) === trimSlash(pathname)) return

            busy.current = true
            router.prefetch(href)
            document.documentElement.setAttribute("data-atelier-transitioning", "")
            reduced.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches
            await animations.current.coverIn(reduced.current)
            startTransition(() => router.push(href))
            setCovered(true)
        },
        [router, pathname],
    )

    useEffect(() => {
        const onPopState = (event: PopStateEvent) => {
            if (busy.current) return
            if (window.location.pathname === locationPath.current) return

            event.stopImmediatePropagation()
            busy.current = true
            document.documentElement.setAttribute("data-atelier-transitioning", "")
            const href = window.location.href
            reduced.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches
            animations.current.coverIn(reduced.current).then(() => {
                startTransition(() => router.replace(href, { scroll: false }))
                setCovered(true)
            })
        }

        window.addEventListener("popstate", onPopState, { capture: true })
        return () => {
            window.removeEventListener("popstate", onPopState, { capture: true })
            document.documentElement.removeAttribute("data-atelier-transitioning")
        }
    }, [router])

    /*
     * After the route commits, WebGL planes mount into the canvas a frame
     * later, so asset loading has not started yet when this effect first
     * runs. The reveal waits two frames and re-checks the live store: if
     * loading began, the effect re-runs when it ends.
     */
    useEffect(() => {
        if (!covered || isPending || loaderActive) return

        let cancelled = false
        const raf = requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                if (cancelled || useProgress.getState().active) return
                setCovered(false)
                animations.current.coverOut(reduced.current).then(() => {
                    document.documentElement.removeAttribute("data-atelier-transitioning")
                    busy.current = false
                })
            })
        })

        return () => {
            cancelled = true
            cancelAnimationFrame(raf)
        }
    }, [covered, isPending, loaderActive])

    return (
        <NavigateContext.Provider value={navigate}>
            <PageContext.Provider value={page ?? null}>{children}</PageContext.Provider>
        </NavigateContext.Provider>
    )
}

export function TransitionPage({ children }: { children: ReactNode }) {
    const Page = useContext(PageContext)
    return Page ? <Page>{children}</Page> : children
}

export function TransitionLink({ href, preload, ...rest }: TransitionLinkProps) {
    const navigate = useContext(NavigateContext)

    const preloadAssets = () => {
        for (const url of preload ?? []) useTexture.preload(url)
    }

    return (
        <Link
            {...rest}
            href={href}
            onPointerEnter={(event) => {
                rest.onPointerEnter?.(event)
                preloadAssets()
            }}
            onNavigate={(event) => {
                if (!navigate) return
                event.preventDefault()
                preloadAssets()
                navigate(href)
            }}
        />
    )
}

import { BandTransition } from "@/components/band-transition/band-transition"
import { TransitionLink, TransitionPage } from "@/components/page-transition/page-transition"

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <BandTransition>
            <nav>
                <TransitionLink href="/">Home</TransitionLink>
                <TransitionLink href="/work">Work</TransitionLink>
                <TransitionLink href="/about">About</TransitionLink>
            </nav>

            <TransitionPage>{children}</TransitionPage>
        </BandTransition>
    )
}