60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T4c2e,'use client'; import { useCallback, useEffect, useId, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type MouseEvent, type ReactNode, } from 'react'; import { useGSAP } from '@gsap/react'; import gsap from 'gsap'; import { CustomEase } from 'gsap/CustomEase'; import { cn } from '@/lib/utils'; gsap.registerPlugin(useGSAP, CustomEase); if (!CustomEase.get('navbar-push')) CustomEase.create('navbar-push', '0.5,0,0,1'); const prefersReducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; export interface NavbarPushMenuLink { label: string; href: string; image: string; } export interface NavbarPushMenuProps extends Omit, 'children'> { brand?: string; logo?: ReactNode; homeHref?: string; links?: NavbarPushMenuLink[]; currentHref?: string; children?: ReactNode; } const SITE = 'https://tween-ui.vercel.app'; const REPO = 'https://github.com/StaticMania/tween-ui'; const poster = (kind: 'block' | 'component', name: string) => `${SITE}/media/${kind}s/${name}-poster.webp`; const DEFAULT_LINKS: NavbarPushMenuLink[] = [ { label: 'Home', href: '/', image: poster('block', 'gyro-gallery') }, { label: 'Components', href: '/components', image: poster('component', 'sliding-tabs') }, { label: 'Blocks', href: '/components#blocks', image: poster('block', 'shutter-slider') }, { label: 'Changelog', href: `${REPO}/blob/main/CHANGELOG.md`, image: poster('block', 'kinetic-type-ring'), }, { label: 'Contribute', href: `${REPO}/blob/main/CONTRIBUTING.md`, image: poster('block', 'integration-hub'), }, { label: 'GitHub', href: REPO, image: poster('block', 'footer-wordmark-rise') }, ]; const TWEEN_MARK = ( ); const CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'; const SHOW_BLUR_AFTER = 80; const SCROLL_TOLERANCE = 6; const CARD_RADIUS = 16; const EASE_OUT = 'ease-[cubic-bezier(0.22,1,0.36,1)]'; const focusRing = 'rounded-xs focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#c6f56f]'; const blurLayers = [0, 1, 2, 3, 4, 5].map((layer): CSSProperties => { const reach = 100 - 14 * layer; const mask = `linear-gradient(to bottom, #000 0%, #000 ${Math.max(0, reach - 30)}%, transparent ${reach}%)`; const blur = `blur(${18 * 2 ** (layer - 5)}px)`; return { backdropFilter: blur, WebkitBackdropFilter: blur, maskImage: mask, WebkitMaskImage: mask, }; }); const cleanHref = (href: string) => href.split(/[?#]/)[0]?.replace(/\/+$/, '') || '/'; const isExternal = (href: string) => /^https?:/.test(href); const externalProps = (href: string) => isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {}; const RollLabel = ({ label }: { label: string }) => { return ( ); }; const ArrowIcon = () => { return ( ); }; const SamplePage = ({ linkCount }: { linkCount: number }) => { const headingId = useId(); return (

The page steps back.
The menu was always there.

Press Menu at the top right. This page drops into a card and the links behind it wipe up one after another. Click the card or press Escape to bring it back.

); }; const NavbarPushMenu = ({ brand = 'Tween UI', logo = TWEEN_MARK, homeHref = '/', links = DEFAULT_LINKS, currentHref = '/', children, className, ...props }: NavbarPushMenuProps) => { const [isOpen, setIsOpen] = useState(false); const menuId = useId(); const rootRef = useRef(null); const headroomRef = useRef(null); const blurRef = useRef(null); const toggleRef = useRef(null); const circleRef = useRef(null); const barTopRef = useRef(null); const barBottomRef = useRef(null); const menuRef = useRef(null); const listRef = useRef(null); const pageRef = useRef(null); const scrollerRef = useRef(null); const timelineRef = useRef(null); const isOpenRef = useRef(false); const syncHeadroomRef = useRef<() => void>(() => {}); const current = links.findIndex((link) => cleanHref(link.href) === cleanHref(currentHref)); const measureCard = useCallback(() => { const root = rootRef.current; const list = listRef.current; if (!root || !list) return { y: 0, scale: 1, radius: 0 }; const width = root.clientWidth; const gutter = width < 640 ? 12 : 24; const scale = 1 - (2 * gutter) / width; const y = Math.round( list.getBoundingClientRect().bottom - root.getBoundingClientRect().top + 32 ); return { y, scale, radius: CARD_RADIUS / scale }; }, []); const { contextSafe } = useGSAP({ scope: rootRef }); const animate = contextSafe((open: boolean) => { const menu = menuRef.current; const page = pageRef.current; if (!menu || !page) return; const media = [...menu.querySelectorAll('[data-menu-media]')]; const images = [...menu.querySelectorAll('[data-menu-image]')]; const labels = [...menu.querySelectorAll('[data-menu-label]')]; const barTop = barTopRef.current; const barBottom = barBottomRef.current; timelineRef.current?.kill(); if (open) { const card = measureCard(); gsap.set(menu, { visibility: 'visible' }); gsap.set(page, { transformOrigin: '50% 0%' }); timelineRef.current = gsap .timeline({ defaults: { ease: 'navbar-push' } }) .to(page, { y: card.y, scale: card.scale, borderRadius: card.radius, duration: 1.2 }, 0) .to( circleRef.current, { backgroundColor: '#c6f56f', borderColor: '#c6f56f', color: '#03110f', duration: 0.6, ease: 'power2.out', }, 0.1 ) .to(barTop, { y: 3, rotate: 45, duration: 0.8 }, 0.1) .to(barBottom, { y: -3, rotate: -45, duration: 0.8 }, 0.1) .set([...media, ...labels], { autoAlpha: 1 }, 0) .fromTo( media, { clipPath: 'inset(100% 0% 0% 0% round 8px)' }, { clipPath: 'inset(0% 0% 0% 0% round 8px)', duration: 1.1, stagger: 0.06 }, 0.3 ) .fromTo(images, { scale: 1.3 }, { scale: 1, duration: 1.3, stagger: 0.06 }, 0.3) .fromTo(labels, { yPercent: 110 }, { yPercent: 0, duration: 1, stagger: 0.06 }, 0.45); } else { timelineRef.current = gsap .timeline({ defaults: { ease: 'navbar-push' }, onComplete: () => { gsap.set(menu, { clearProps: 'visibility' }); gsap.set([...media, ...labels], { clearProps: 'opacity,visibility' }); gsap.set(page, { clearProps: 'transform,transformOrigin,borderRadius' }); }, }) .to([...media, ...labels], { autoAlpha: 0, duration: 0.35, ease: 'power1.out' }, 0) .to(page, { y: 0, scale: 1, borderRadius: 0, duration: 1 }, 0) .to( circleRef.current, { backgroundColor: 'rgba(198,245,111,0)', borderColor: 'rgba(232,243,242,0.24)', color: '#e8f3f2', duration: 0.5, ease: 'power2.out', clearProps: 'backgroundColor,borderColor,color', }, 0 ) .to([barTop, barBottom], { y: 0, rotate: 0, duration: 0.7 }, 0); } if (prefersReducedMotion()) timelineRef.current.progress(1); }); const setOpen = useCallback( (open: boolean) => { if (open === isOpenRef.current) return; isOpenRef.current = open; setIsOpen(open); animate(open); syncHeadroomRef.current(); }, [animate] ); useEffect(() => { const scroller = scrollerRef.current; const headroom = headroomRef.current; const blur = blurRef.current; if (!scroller || !headroom || !blur) return; let lastY = scroller.scrollTop; let isHidden = false; let isQueued = false; const sync = () => { isQueued = false; const y = scroller.scrollTop; const delta = y - lastY; const isNearTop = y <= SHOW_BLUR_AFTER; if (isOpenRef.current || isNearTop) isHidden = false; else if (Math.abs(delta) >= SCROLL_TOLERANCE) isHidden = delta > 0; if (isOpenRef.current || isNearTop || Math.abs(delta) >= SCROLL_TOLERANCE) lastY = y; headroom.style.transform = isHidden ? 'translateY(calc(-100% - 48px))' : ''; blur.style.opacity = !isOpenRef.current && !isNearTop ? '1' : '0'; }; const queue = () => { if (isQueued) return; isQueued = true; requestAnimationFrame(sync); }; syncHeadroomRef.current = queue; scroller.addEventListener('scroll', queue, { passive: true }); sync(); return () => { syncHeadroomRef.current = () => {}; scroller.removeEventListener('scroll', queue); }; }, []); useEffect(() => { const root = rootRef.current; const page = pageRef.current; if (!isOpen || !root || !page) return; const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== 'Escape') return; setOpen(false); toggleRef.current?.focus(); }; const observer = new ResizeObserver(() => { if (timelineRef.current?.isActive()) return; const card = measureCard(); gsap.set(page, { y: card.y, scale: card.scale, borderRadius: card.radius }); }); document.addEventListener('keydown', handleKeyDown); observer.observe(root); return () => { document.removeEventListener('keydown', handleKeyDown); observer.disconnect(); }; }, [isOpen, measureCard, setOpen]); const handleLinkClick = (event: MouseEvent, index: number) => { if (index !== current) return; event.preventDefault(); setOpen(false); }; return (

{blurLayers.map((style, index) => (

))}

{logo} {brand}

{children ?? }

{isOpen ? (

); }; export default NavbarPushMenu; 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@tween-ui","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/tweenui/navbar-push-menu.tsx","content":"$62","type":"registry:component","target":"components/tweenui/navbar-push-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]