51: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"] 52: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"] 53:T17af,.staggered-menu-wrapper { position: relative; width: 100%; height: 100%; z-index: 40; pointer-events: none; } .staggered-menu-wrapper.fixed-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 40; overflow: hidden; } .staggered-menu-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 2em; background: transparent; pointer-events: none; z-index: 20; } .staggered-menu-header > * { pointer-events: auto; } .sm-logo { display: flex; align-items: center; user-select: none; } .sm-logo-img { display: block; height: 32px; width: auto; object-fit: contain; } .sm-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; cursor: pointer; color: #e9e9ef; font-weight: 500; line-height: 1; overflow: visible; } .sm-toggle:focus-visible { outline: 2px solid #ffffffaa; outline-offset: 4px; border-radius: 4px; } .sm-line:last-of-type { margin-top: 6px; } .sm-toggle-textWrap { position: relative; display: inline-block; height: 1em; overflow: hidden; white-space: nowrap; width: var(--sm-toggle-width, auto); min-width: var(--sm-toggle-width, auto); } .sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; } .sm-toggle-line { display: block; height: 1em; line-height: 1; } .sm-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; } .sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; } .sm-icon-line { position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); will-change: transform; } .sm-line { display: none !important; } .staggered-menu-panel { position: absolute; top: 0; right: 0; width: clamp(260px, 38vw, 420px); height: 100%; background: white; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 6em 2em 2em 2em; overflow-y: auto; z-index: 10; pointer-events: auto; opacity: 0; } [data-position='left'] .staggered-menu-panel { right: auto; left: 0; } .sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(260px, 38vw, 420px); pointer-events: none; z-index: 5; opacity: 0; } [data-position='left'] .sm-prelayers { right: auto; left: 0; } .sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: 100%; transform: translateX(0); opacity: 0; } .sm-panel-inner { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; } .sm-socials { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .sm-socials-title { margin: 0; font-size: 1rem; font-weight: 500; color: var(--sm-accent, #ff0000); } .sm-socials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; } .sm-socials-list .sm-socials-link { opacity: 1; } .sm-socials-list:hover .sm-socials-link { opacity: 0.35; } .sm-socials-list:hover .sm-socials-link:hover { opacity: 1; } .sm-socials-link:focus-visible { outline: 2px solid var(--sm-accent, #ff0000); outline-offset: 3px; } .sm-socials-list:focus-within .sm-socials-link { opacity: 0.35; } .sm-socials-list:focus-within .sm-socials-link:focus-visible { opacity: 1; } .sm-socials-link { font-size: 1.2rem; font-weight: 500; color: #111; text-decoration: none; position: relative; padding: 2px 0; display: inline-block; transition: color 0.3s ease, opacity 0.3s ease; } .sm-socials-link:hover { color: var(--sm-accent, #ff0000); } .sm-panel-title { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; } .sm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .sm-panel-item { position: relative; color: #000; font-weight: 600; font-size: 3.5rem; cursor: pointer; line-height: 1; letter-spacing: -2px; text-transform: uppercase; transition: background 0.25s, color 0.25s; display: inline-block; text-decoration: none; padding-right: 1.4em; } .staggered-menu-panel .sm-socials-list .sm-socials-link { opacity: 1; transition: opacity 0.3s ease; } .staggered-menu-panel .sm-socials-list:hover .sm-socials-link:not(:hover) { opacity: 0.35; } .staggered-menu-panel .sm-socials-list:focus-within .sm-socials-link:not(:focus-visible) { opacity: 0.35; } .staggered-menu-panel .sm-socials-list .sm-socials-link:hover, .staggered-menu-panel .sm-socials-list .sm-socials-link:focus-visible { opacity: 1; } .sm-panel-itemLabel { display: inline-block; will-change: transform; transform-origin: 50% 100%; } .sm-panel-item:hover { color: var(--sm-accent, #5227ff); } .sm-panel-list[data-numbering] { counter-reset: smItem; } .sm-panel-list[data-numbering] .sm-panel-item::after { counter-increment: smItem; content: counter(smItem, decimal-leading-zero); position: absolute; top: 0.1em; right: 2.8em; font-size: 18px; font-weight: 400; color: var(--sm-accent, #5227ff); letter-spacing: 0; pointer-events: none; user-select: none; opacity: var(--sm-num-opacity, 0); } @media (max-width: 1024px) { .staggered-menu-panel { width: 100%; left: 0; right: 0; } .sm-prelayers { width: 100%; } .staggered-menu-wrapper[data-open] .sm-logo-img { filter: invert(100%); } } @media (max-width: 640px) { .staggered-menu-panel { width: 100%; left: 0; right: 0; } .staggered-menu-wrapper[data-open] .sm-logo-img { filter: invert(100%); } } 54:T38d3,'use client'; import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; import { gsap } from 'gsap'; import './StaggeredMenu.css'; export const StaggeredMenu = ({ position = 'right', colors = ['#B497CF', '#5227FF'], items = [], socialItems = [], displaySocials = true, displayItemNumbering = true, className, logoUrl = '/src/assets/logos/reactbits-gh-white.svg', menuButtonColor = '#fff', openMenuButtonColor = '#fff', accentColor = '#5227FF', changeMenuColorOnOpen = true, isFixed = false, closeOnClickAway = true, onMenuOpen, onMenuClose }) => { const [open, setOpen] = useState(false); const openRef = useRef(false); const panelRef = useRef(null); const preLayersRef = useRef(null); const preLayerElsRef = useRef([]); const plusHRef = useRef(null); const plusVRef = useRef(null); const iconRef = useRef(null); const textInnerRef = useRef(null); const textWrapRef = useRef(null); const [textLines, setTextLines] = useState(['Menu', 'Close']); const openTlRef = useRef(null); const closeTweenRef = useRef(null); const spinTweenRef = useRef(null); const textCycleAnimRef = useRef(null); const colorTweenRef = useRef(null); const toggleBtnRef = useRef(null); const busyRef = useRef(false); const itemEntranceTweenRef = useRef(null); useLayoutEffect(() => { const ctx = gsap.context(() => { const panel = panelRef.current; const preContainer = preLayersRef.current; const plusH = plusHRef.current; const plusV = plusVRef.current; const icon = iconRef.current; const textInner = textInnerRef.current; if (!panel || !plusH || !plusV || !icon || !textInner) return; let preLayers = []; if (preContainer) { preLayers = Array.from(preContainer.querySelectorAll('.sm-prelayer')); } preLayerElsRef.current = preLayers; const offscreen = position === 'left' ? -100 : 100; gsap.set([panel, ...preLayers], { xPercent: offscreen, opacity: 1 }); if (preContainer) { gsap.set(preContainer, { xPercent: 0, opacity: 1 }); } gsap.set(plusH, { transformOrigin: '50% 50%', rotate: 0 }); gsap.set(plusV, { transformOrigin: '50% 50%', rotate: 90 }); gsap.set(icon, { rotate: 0, transformOrigin: '50% 50%' }); gsap.set(textInner, { yPercent: 0 }); if (toggleBtnRef.current) gsap.set(toggleBtnRef.current, { color: menuButtonColor }); }); return () => ctx.revert(); }, [menuButtonColor, position]); const buildOpenTimeline = useCallback(() => { const panel = panelRef.current; const layers = preLayerElsRef.current; if (!panel) return null; openTlRef.current?.kill(); if (closeTweenRef.current) { closeTweenRef.current.kill(); closeTweenRef.current = null; } itemEntranceTweenRef.current?.kill(); const itemEls = Array.from(panel.querySelectorAll('.sm-panel-itemLabel')); const numberEls = Array.from(panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item')); const socialTitle = panel.querySelector('.sm-socials-title'); const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link')); const offscreen = position === 'left' ? -100 : 100; const layerStates = layers.map(el => ({ el, start: offscreen })); const panelStart = offscreen; if (itemEls.length) { gsap.set(itemEls, { yPercent: 140, rotate: 10 }); } if (numberEls.length) { gsap.set(numberEls, { '--sm-num-opacity': 0 }); } if (socialTitle) { gsap.set(socialTitle, { opacity: 0 }); } if (socialLinks.length) { gsap.set(socialLinks, { y: 25, opacity: 0 }); } const tl = gsap.timeline({ paused: true }); layerStates.forEach((ls, i) => { tl.fromTo(ls.el, { xPercent: ls.start }, { xPercent: 0, duration: 0.5, ease: 'power4.out' }, i * 0.07); }); const lastTime = layerStates.length ? (layerStates.length - 1) * 0.07 : 0; const panelInsertTime = lastTime + (layerStates.length ? 0.08 : 0); const panelDuration = 0.65; tl.fromTo( panel, { xPercent: panelStart }, { xPercent: 0, duration: panelDuration, ease: 'power4.out' }, panelInsertTime ); if (itemEls.length) { const itemsStartRatio = 0.15; const itemsStart = panelInsertTime + panelDuration * itemsStartRatio; tl.to( itemEls, { yPercent: 0, rotate: 0, duration: 1, ease: 'power4.out', stagger: { each: 0.1, from: 'start' } }, itemsStart ); if (numberEls.length) { tl.to( numberEls, { duration: 0.6, ease: 'power2.out', '--sm-num-opacity': 1, stagger: { each: 0.08, from: 'start' } }, itemsStart + 0.1 ); } } if (socialTitle || socialLinks.length) { const socialsStart = panelInsertTime + panelDuration * 0.4; if (socialTitle) { tl.to( socialTitle, { opacity: 1, duration: 0.5, ease: 'power2.out' }, socialsStart ); } if (socialLinks.length) { tl.to( socialLinks, { y: 0, opacity: 1, duration: 0.55, ease: 'power3.out', stagger: { each: 0.08, from: 'start' }, onComplete: () => { gsap.set(socialLinks, { clearProps: 'opacity' }); } }, socialsStart + 0.04 ); } } openTlRef.current = tl; return tl; }, []); const playOpen = useCallback(() => { if (busyRef.current) return; busyRef.current = true; const tl = buildOpenTimeline(); if (tl) { tl.eventCallback('onComplete', () => { busyRef.current = false; }); tl.play(0); } else { busyRef.current = false; } }, [buildOpenTimeline]); const playClose = useCallback(() => { openTlRef.current?.kill(); openTlRef.current = null; itemEntranceTweenRef.current?.kill(); const panel = panelRef.current; const layers = preLayerElsRef.current; if (!panel) return; const all = [...layers, panel]; closeTweenRef.current?.kill(); const offscreen = position === 'left' ? -100 : 100; closeTweenRef.current = gsap.to(all, { xPercent: offscreen, duration: 0.32, ease: 'power3.in', overwrite: 'auto', onComplete: () => { const itemEls = Array.from(panel.querySelectorAll('.sm-panel-itemLabel')); if (itemEls.length) { gsap.set(itemEls, { yPercent: 140, rotate: 10 }); } const numberEls = Array.from(panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item')); if (numberEls.length) { gsap.set(numberEls, { '--sm-num-opacity': 0 }); } const socialTitle = panel.querySelector('.sm-socials-title'); const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link')); if (socialTitle) gsap.set(socialTitle, { opacity: 0 }); if (socialLinks.length) gsap.set(socialLinks, { y: 25, opacity: 0 }); busyRef.current = false; } }); }, [position]); const animateIcon = useCallback(opening => { const icon = iconRef.current; if (!icon) return; spinTweenRef.current?.kill(); if (opening) { spinTweenRef.current = gsap.to(icon, { rotate: 225, duration: 0.8, ease: 'power4.out', overwrite: 'auto' }); } else { spinTweenRef.current = gsap.to(icon, { rotate: 0, duration: 0.35, ease: 'power3.inOut', overwrite: 'auto' }); } }, []); const animateColor = useCallback( opening => { const btn = toggleBtnRef.current; if (!btn) return; colorTweenRef.current?.kill(); if (changeMenuColorOnOpen) { const targetColor = opening ? openMenuButtonColor : menuButtonColor; colorTweenRef.current = gsap.to(btn, { color: targetColor, delay: 0.18, duration: 0.3, ease: 'power2.out' }); } else { gsap.set(btn, { color: menuButtonColor }); } }, [openMenuButtonColor, menuButtonColor, changeMenuColorOnOpen] ); React.useEffect(() => { if (toggleBtnRef.current) { if (changeMenuColorOnOpen) { const targetColor = openRef.current ? openMenuButtonColor : menuButtonColor; gsap.set(toggleBtnRef.current, { color: targetColor }); } else { gsap.set(toggleBtnRef.current, { color: menuButtonColor }); } } }, [changeMenuColorOnOpen, menuButtonColor, openMenuButtonColor]); const animateText = useCallback(opening => { const inner = textInnerRef.current; if (!inner) return; textCycleAnimRef.current?.kill(); const currentLabel = opening ? 'Menu' : 'Close'; const targetLabel = opening ? 'Close' : 'Menu'; const cycles = 3; const seq = [currentLabel]; let last = currentLabel; for (let i = 0; i < cycles; i++) { last = last === 'Menu' ? 'Close' : 'Menu'; seq.push(last); } if (last !== targetLabel) seq.push(targetLabel); seq.push(targetLabel); setTextLines(seq); gsap.set(inner, { yPercent: 0 }); const lineCount = seq.length; const finalShift = ((lineCount - 1) / lineCount) * 100; textCycleAnimRef.current = gsap.to(inner, { yPercent: -finalShift, duration: 0.5 + lineCount * 0.07, ease: 'power4.out' }); }, []); const toggleMenu = useCallback(() => { const target = !openRef.current; openRef.current = target; setOpen(target); if (target) { onMenuOpen?.(); playOpen(); } else { onMenuClose?.(); playClose(); } animateIcon(target); animateColor(target); animateText(target); }, [playOpen, playClose, animateIcon, animateColor, animateText, onMenuOpen, onMenuClose]); const closeMenu = useCallback(() => { if (openRef.current) { openRef.current = false; setOpen(false); onMenuClose?.(); playClose(); animateIcon(false); animateColor(false); animateText(false); } }, [playClose, animateIcon, animateColor, animateText, onMenuClose]); React.useEffect(() => { if (!closeOnClickAway || !open) return; const handleClickOutside = event => { if ( panelRef.current && !panelRef.current.contains(event.target) && toggleBtnRef.current && !toggleBtnRef.current.contains(event.target) ) { closeMenu(); } }; document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [closeOnClickAway, open, closeMenu]); return (

{(() => { const raw = colors && colors.length ? colors.slice(0, 4) : ['#1e1e22', '#35353c']; let arr = [...raw]; if (arr.length >= 3) { const mid = Math.floor(arr.length / 2); arr.splice(mid, 1); } return arr.map((c, i) =>

); })()}

); }; export default StaggeredMenu; 50:["$","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@^3.13.0",{"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@^3.13.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"StaggeredMenu.css","content":"$53","type":"registry:file","target":"@components/StaggeredMenu.css"},{"path":"StaggeredMenu.jsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]