4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T40fe,"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, type KeyboardEvent, type ReactNode } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; import { CustomEase } from "gsap/CustomEase"; import { SplitText } from "gsap/SplitText"; // A full-screen menu that sits behind the page. Opening it swings the page aside and tilts it, // like a door, so the menu shows in the gap. Every label rolls up letter by letter on hover: // each label is written twice, one copy on top of the other, and the letters of the top copy // slide up out of their masks while the letters of the copy below slide in. if (typeof window !== "undefined") { gsap.registerPlugin(useGSAP, CustomEase, SplitText); // The swing: slow start, quick middle, soft landing if (!CustomEase.get("tiltMenu")) CustomEase.create("tiltMenu", "M0,0 C0.55,0 0.45,1 1,1"); } export type TiltMenuLink = { /** The text of the link */ label: string; /** Where it goes */ href: string; /** A photo that opens next to the label on hover. Decorative, so it has no alt text. */ image?: string; }; export type TiltMenuProps = { /** The menu's links, top first. Three to six short words look best. */ links: TiltMenuLink[]; /** How far the page tilts when the menu is open, in degrees. */ tilt?: number; /** How far the page slides aside when the menu is open, as a share of its width (50 = half). */ shift?: number; /** How long the page takes to swing open or shut, in seconds. */ duration?: number; /** The side the menu opens on. The page swings away to the other side. */ side?: "left" | "right"; /** Opens the menu from outside. Leave it out and the component keeps its own state. */ open?: boolean; /** Whether the menu starts open (only when `open` is left out). */ defaultOpen?: boolean; /** Called with the new state when the menu opens or closes. */ onOpenChange?: (open: boolean) => void; /** The logo or name at the top of the page, next to the menu button. */ brand?: ReactNode; /** Text on the button that opens the menu. */ menuLabel?: string; /** Text on the button that closes it. */ closeLabel?: string; /** Small print at the bottom of the menu, e.g. an email address. */ menuFooter?: ReactNode; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Classes for the page: its background and text colour. */ pageClassName?: string; /** Classes for the menu: its background and text colour. */ menuClassName?: string; /** Classes for each link: its font and size. */ linkClassName?: string; /** Classes for the menu and close buttons. */ buttonClassName?: string; /** The page itself. It scrolls inside the box. */ children?: ReactNode; }; // prefers-reduced-motion, live function subscribeToMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; // A label written twice for the roll. Screen readers read the hidden copy once; the two visible // copies are aria-hidden. The bottom copy stays invisible until its letters are split and moved down. function RollText({ label }: { label: string }) { return ( {label} ); } export function TiltMenu({ links, tilt = 12, shift = 50, duration = 0.77, side = "right", open, defaultOpen = false, onOpenChange, brand, menuLabel = "Menu", closeLabel = "Close", menuFooter, className = "", pageClassName = "bg-white text-black dark:bg-neutral-950 dark:text-white", menuClassName = "bg-black text-white dark:bg-[#efede8] dark:text-black", linkClassName = "text-[clamp(2.5rem,8vw,4.5rem)] leading-[0.95] font-bold tracking-[-0.02em] uppercase", buttonClassName = "text-[1.5rem] leading-none uppercase", children, }: TiltMenuProps) { const rootRef = useRef(null); const pageRef = useRef(null); const navRef = useRef(null); const toggleRef = useRef(null); const closeRef = useRef(null); const menuId = useId(); const reducedMotion = useSyncExternalStore(subscribeToMotion, prefersReducedMotion, () => false); // Controlled when `open` is passed, otherwise the component keeps its own state const [ownOpen, setOwnOpen] = useState(defaultOpen); const isOpen = open ?? ownOpen; const onOpenChangeRef = useRef(onOpenChange); onOpenChangeRef.current = onOpenChange; const setOpen = (next: boolean) => { if (open === undefined) setOwnOpen(next); onOpenChangeRef.current?.(next); }; const setOpenRef = useRef(setOpen); setOpenRef.current = setOpen; // +1 when the menu is on the right (the page swings left), -1 when it's on the left const direction = side === "right" ? 1 : -1; // The rolls. Built again only when the labels change, not on every render. const labelsKey = [menuLabel, closeLabel, ...links.map((link) => `${link.label} ${link.image ?? ""}`)].join("|"); useGSAP( () => { const root = rootRef.current; if (!root) return; const cleanups: (() => void)[] = []; root.querySelectorAll("[data-roll]").forEach((roll) => { const front = roll.querySelector("[data-roll-front]"); const back = roll.querySelector("[data-roll-back]"); const trigger = roll.closest("a, button") ?? roll; const thumb = trigger.querySelector("[data-thumb]"); if (!front || !back) return; // The photo opens out of the label: from its right edge when it sits left of the label const hiddenClip = trigger.dataset.side === "right" ? "inset(0% 0% 0% 100%)" : "inset(0% 100% 0% 0%)"; let play: () => void; let reverse: () => void; if (reducedMotion) { // No roll: the photo just shows while the link is hovered or focused if (thumb) gsap.set(thumb, { clipPath: hiddenClip }); play = () => thumb && gsap.set(thumb, { clipPath: "inset(0% 0% 0% 0%)" }); reverse = () => thumb && gsap.set(thumb, { clipPath: hiddenClip }); } else { const outgoing = SplitText.create(front, { type: "chars", mask: "chars", aria: "none" }); const incoming = SplitText.create(back, { type: "chars", mask: "chars", aria: "none" }); gsap.set(incoming.chars, { yPercent: 100 }); gsap.set(back, { visibility: "visible" }); const label = front.textContent ?? ""; const roll = gsap.timeline({ paused: true, defaults: { duration: 0.45, ease: "power3.inOut", stagger: Math.min(0.022, 0.25 / Math.max(label.length, 1)) }, }); roll.to(outgoing.chars, { yPercent: -100 }).to(incoming.chars, { yPercent: 0 }, 0); if (thumb) { roll.fromTo(thumb, { clipPath: hiddenClip }, { clipPath: "inset(0% 0% 0% 0%)", duration: 0.6, ease: "power3.out", stagger: 0 }, 0); roll.fromTo(thumb.firstElementChild, { scale: 1.35 }, { scale: 1, duration: 0.7, ease: "power3.out", stagger: 0 }, 0); } play = () => roll.play(); reverse = () => roll.reverse(); cleanups.push(() => { roll.kill(); outgoing.revert(); incoming.revert(); }); } // Keyboard focus rolls it too, but not the focus a click leaves behind const onFocus = () => trigger.matches(":focus-visible") && play(); trigger.addEventListener("mouseenter", play); trigger.addEventListener("mouseleave", reverse); trigger.addEventListener("focus", onFocus); trigger.addEventListener("blur", reverse); cleanups.push(() => { trigger.removeEventListener("mouseenter", play); trigger.removeEventListener("mouseleave", reverse); trigger.removeEventListener("focus", onFocus); trigger.removeEventListener("blur", reverse); }); }); return () => cleanups.forEach((cleanup) => cleanup()); }, { scope: rootRef, dependencies: [labelsKey, side, reducedMotion], revertOnUpdate: true }, ); // The swing. A new tilt, shift or side while the menu is open moves the page straight there. const firstSwing = useRef(true); const wasOpen = useRef(isOpen); useGSAP( () => { const page = pageRef.current; const nav = navRef.current; if (!page || !nav) return; const items = nav.querySelectorAll("[data-menu-item]"); const instant = firstSwing.current; const toggled = wasOpen.current !== isOpen; firstSwing.current = false; wasOpen.current = isOpen; if (reducedMotion) { // No swing: the page fades out over the menu, and back in gsap.set(page, { xPercent: 0, rotation: 0, borderRadius: 0 }); gsap.set(items, { x: 0, autoAlpha: 1 }); const fade = instant ? 0 : 0.25; if (isOpen) { // Hidden only once the fade ends, so the faded page can't be clicked or focused gsap.to(page, { opacity: 0, duration: fade, ease: "none", overwrite: true, onComplete: () => gsap.set(page, { visibility: "hidden" }) }); } else { // Visible straight away (this runs before the focus effect), so focus can go back to the menu button gsap.set(page, { visibility: "visible" }); gsap.to(page, { opacity: 1, duration: fade, ease: "none", overwrite: true }); } } else { gsap.set(page, { opacity: 1, visibility: "visible" }); gsap.to(page, { xPercent: isOpen ? -direction * shift : 0, rotation: isOpen ? direction * tilt : 0, // The corners round off as it leaves, so it reads as a card lifted off the menu borderRadius: isOpen ? 18 : 0, duration: instant ? 0 : duration, ease: "tiltMenu", overwrite: true, }); if (instant) gsap.set(items, { x: 0, autoAlpha: isOpen ? 1 : 0 }); else if (toggled && isOpen) { // The links follow the page in from the menu's side, one after another gsap.fromTo( items, { x: direction * 70, autoAlpha: 0 }, { x: 0, autoAlpha: 1, duration: duration * 1.1, delay: duration * 0.22, ease: "power3.out", stagger: 0.055, overwrite: true }, ); } else if (toggled) { gsap.to(items, { x: direction * 30, autoAlpha: 0, duration: duration * 0.55, ease: "power2.in", overwrite: true }); } } return () => { // Unmounting (or React's StrictMode remount) starts over without a swing firstSwing.current = true; }; }, { scope: rootRef, dependencies: [isOpen, tilt, shift, duration, direction, reducedMotion] }, ); // Focus goes into the menu when the menu button opens it, and back to the button when it closes. // An open from outside (the `open` prop) leaves focus where it is; Tab still lands in the menu, // because the page is inert while the menu is open. const lastOpen = useRef(isOpen); const openedByButton = useRef(false); useEffect(() => { if (lastOpen.current === isOpen) return; lastOpen.current = isOpen; if (isOpen) { if (openedByButton.current) closeRef.current?.focus({ preventScroll: true }); openedByButton.current = false; } else { const active = document.activeElement; if (!active || active === document.body || navRef.current?.contains(active)) toggleRef.current?.focus({ preventScroll: true }); } }, [isOpen]); // Escape closes the menu, wherever focus is useEffect(() => { if (!isOpen) return; const onKeyDown = (event: globalThis.KeyboardEvent) => { if (event.key === "Escape") setOpenRef.current(false); }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [isOpen]); // Tab and Shift+Tab go round the menu instead of leaving it const trapFocus = (event: KeyboardEvent) => { if (event.key !== "Tab" || !navRef.current) return; const focusable = Array.from(navRef.current.querySelectorAll("a[href], button:not([disabled])")); const first = focusable[0]; const last = focusable[focusable.length - 1]; if (!first || !last) return; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }; const menuSide = side === "right" ? "right-[30px] text-right" : "left-[30px] text-left"; return (

{brand}

{children}

{/* While the menu is open, a click on the tilted page closes it (the page itself is inert) */} {isOpen && !reducedMotion ?

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/tilt-menu/tilt-menu.tsx","content":"$50","type":"registry:component","target":"components/dimaac/tilt-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]