50: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"] 51: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"] 52:T1478,.bubble-menu { left: 0; right: 0; top: 2em; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2em; pointer-events: none; z-index: 99; } .bubble-menu.fixed { position: fixed; } .bubble-menu.absolute { position: absolute; } .bubble-menu .bubble { --bubble-size: 48px; width: var(--bubble-size); height: var(--bubble-size); border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; } .bubble-menu .logo-bubble, .bubble-menu .toggle-bubble { will-change: transform; } .bubble-menu .logo-bubble { width: auto; min-height: var(--bubble-size); height: var(--bubble-size); padding: 0 16px; border-radius: calc(var(--bubble-size) / 2); gap: 8px; } .bubble-menu .toggle-bubble { width: var(--bubble-size); height: var(--bubble-size); } .bubble-menu .bubble-logo { max-height: 60%; max-width: 100%; object-fit: contain; display: block; } .bubble-menu .logo-content { --logo-max-height: 60%; --logo-max-width: 100%; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 100%; } .bubble-menu .logo-content > .bubble-logo, .bubble-menu .logo-content > img, .bubble-menu .logo-content > svg { max-height: var(--logo-max-height); max-width: var(--logo-max-width); } .bubble-menu .menu-btn { border: none; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } .bubble-menu .menu-line { width: 26px; height: 2px; background: #111; border-radius: 2px; display: block; margin: 0 auto; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .bubble-menu .menu-line + .menu-line { margin-top: 6px; } .bubble-menu .menu-btn.open .menu-line:first-child { transform: translateY(4px) rotate(45deg); } .bubble-menu .menu-btn.open .menu-line:last-child { transform: translateY(-4px) rotate(-45deg); } @media (min-width: 768px) { .bubble-menu .bubble { --bubble-size: 56px; } .bubble-menu .logo-bubble { padding: 0 16px; } } .bubble-menu-items { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 98; } .bubble-menu-items.fixed { position: fixed; } .bubble-menu-items.absolute { position: absolute; } .bubble-menu-items .pill-list { list-style: none; margin: 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 0; row-gap: 4px; width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; pointer-events: auto; justify-content: stretch; } .bubble-menu-items .pill-list .pill-spacer { width: 100%; height: 0; pointer-events: none; } .bubble-menu-items .pill-list .pill-col { display: flex; justify-content: center; align-items: stretch; flex: 0 0 calc(100% / 3); box-sizing: border-box; } .bubble-menu-items .pill-list .pill-col:nth-child(4):nth-last-child(2) { margin-left: calc(100% / 6); } .bubble-menu-items .pill-list .pill-col:nth-child(4):last-child { margin-left: calc(100% / 3); } .bubble-menu-items .pill-link { --pill-bg: #ffffff; --pill-color: #111; --pill-border: rgba(0, 0, 0, 0.12); --item-rot: 0deg; --pill-min-h: 160px; --hover-bg: #f3f4f6; --hover-color: #111; width: 100%; min-height: var(--pill-min-h); padding: clamp(1.5rem, 3vw, 8rem) 0; font-size: clamp(1.5rem, 4vw, 4rem); font-weight: 400; line-height: 0; border-radius: 999px; background: var(--pill-bg); color: var(--pill-color); text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.3s ease, color 0.3s ease; will-change: transform; box-sizing: border-box; white-space: nowrap; overflow: hidden; height: 10px; } @media (min-width: 900px) { .bubble-menu-items .pill-link { transform: rotate(var(--item-rot)); } .bubble-menu-items .pill-link:hover { transform: rotate(var(--item-rot)) scale(1.06); background: var(--hover-bg); color: var(--hover-color); } .bubble-menu-items .pill-link:active { transform: rotate(var(--item-rot)) scale(0.94); } } .bubble-menu-items .pill-link .pill-label { display: inline-block; will-change: transform, opacity; height: 1.2em; line-height: 1.2; } @media (max-width: 899px) { .bubble-menu-items { padding-top: 0px; align-items: flex-start; padding-top: 120px; } .bubble-menu-items .pill-list { row-gap: 16px; } .bubble-menu-items .pill-list .pill-col { flex: 0 0 100%; margin-left: 0 !important; overflow: visible; } .bubble-menu-items .pill-link { font-size: clamp(1.2rem, 3vw, 4rem); padding: clamp(1rem, 2vw, 2rem) 0; min-height: 80px; } .bubble-menu-items .pill-link:hover { transform: scale(1.06); background: var(--hover-bg); color: var(--hover-color); } .bubble-menu-items .pill-link:active { transform: scale(0.94); } } 53:T1b17,'use client'; import type { CSSProperties, ReactNode } from 'react'; import { useState, useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import './BubbleMenu.css'; type MenuItem = { label: string; href: string; ariaLabel?: string; rotation?: number; hoverStyles?: { bgColor?: string; textColor?: string; }; }; export type BubbleMenuProps = { logo: ReactNode | string; onMenuClick?: (open: boolean) => void; className?: string; style?: CSSProperties; menuAriaLabel?: string; menuBg?: string; menuContentColor?: string; useFixedPosition?: boolean; items?: MenuItem[]; animationEase?: string; animationDuration?: number; staggerDelay?: number; }; const DEFAULT_ITEMS: MenuItem[] = [ { label: 'home', href: '#', ariaLabel: 'Home', rotation: -8, hoverStyles: { bgColor: '#3b82f6', textColor: '#ffffff' } }, { label: 'about', href: '#', ariaLabel: 'About', rotation: 8, hoverStyles: { bgColor: '#10b981', textColor: '#ffffff' } }, { label: 'projects', href: '#', ariaLabel: 'Documentation', rotation: 8, hoverStyles: { bgColor: '#f59e0b', textColor: '#ffffff' } }, { label: 'blog', href: '#', ariaLabel: 'Blog', rotation: 8, hoverStyles: { bgColor: '#ef4444', textColor: '#ffffff' } }, { label: 'contact', href: '#', ariaLabel: 'Contact', rotation: -8, hoverStyles: { bgColor: '#8b5cf6', textColor: '#ffffff' } } ]; export default function BubbleMenu({ logo, onMenuClick, className, style, menuAriaLabel = 'Toggle menu', menuBg = '#fff', menuContentColor = '#111', useFixedPosition = false, items, animationEase = 'back.out(1.5)', animationDuration = 0.5, staggerDelay = 0.12 }: BubbleMenuProps) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [showOverlay, setShowOverlay] = useState(false); const overlayRef = useRef(null); const bubblesRef = useRef([]); const labelRefs = useRef([]); const menuItems = items?.length ? items : DEFAULT_ITEMS; const containerClassName = ['bubble-menu', useFixedPosition ? 'fixed' : 'absolute', className] .filter(Boolean) .join(' '); const handleToggle = () => { const nextState = !isMenuOpen; if (nextState) setShowOverlay(true); setIsMenuOpen(nextState); onMenuClick?.(nextState); }; useEffect(() => { const overlay = overlayRef.current; const bubbles = bubblesRef.current.filter(Boolean); const labels = labelRefs.current.filter(Boolean); if (!overlay || !bubbles.length) return; if (isMenuOpen) { gsap.set(overlay, { display: 'flex' }); gsap.killTweensOf([...bubbles, ...labels]); gsap.set(bubbles, { scale: 0, transformOrigin: '50% 50%' }); gsap.set(labels, { y: 24, autoAlpha: 0 }); bubbles.forEach((bubble, i) => { const delay = i * staggerDelay + gsap.utils.random(-0.05, 0.05); const tl = gsap.timeline({ delay }); tl.to(bubble, { scale: 1, duration: animationDuration, ease: animationEase }); if (labels[i]) { tl.to( labels[i], { y: 0, autoAlpha: 1, duration: animationDuration, ease: 'power3.out' }, `-=${animationDuration * 0.9}` ); } }); } else if (showOverlay) { gsap.killTweensOf([...bubbles, ...labels]); gsap.to(labels, { y: 24, autoAlpha: 0, duration: 0.2, ease: 'power3.in' }); gsap.to(bubbles, { scale: 0, duration: 0.2, ease: 'power3.in', onComplete: () => { gsap.set(overlay, { display: 'none' }); setShowOverlay(false); } }); } }, [isMenuOpen, showOverlay, animationEase, animationDuration, staggerDelay]); useEffect(() => { const handleResize = () => { if (isMenuOpen) { const bubbles = bubblesRef.current.filter(Boolean); const isDesktop = window.innerWidth >= 900; bubbles.forEach((bubble, i) => { const item = menuItems[i]; if (bubble && item) { const rotation = isDesktop ? (item.rotation ?? 0) : 0; gsap.set(bubble, { rotation }); } }); } }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [isMenuOpen, menuItems]); return ( <> {showOverlay && (

)} ); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"BubbleMenu.css","content":"$52","type":"registry:file","target":"@components/BubbleMenu.css"},{"path":"BubbleMenu.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]