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:Tfeb2,'use client'; import { useCallback, useEffect, useId, useRef, useState, type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode, } from 'react'; import { useGSAP } from '@gsap/react'; import gsap from 'gsap'; import { cn } from '@/lib/utils'; import DotBloomButton from './dot-bloom-button'; gsap.registerPlugin(useGSAP); const prefersReducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; export type NavbarGooeyBloomIcon = 'bloom' | 'drop' | 'orbit' | 'spark' | 'layers' | 'wave' | 'bolt' | 'shield'; export interface NavbarGooeyBloomLink { label: string; href: string; description?: string; icon?: NavbarGooeyBloomIcon; } export interface NavbarGooeyBloomFeature { title: string; description: string; href: string; cta?: string; image?: string; } export interface NavbarGooeyBloomMenu { label: string; href?: string; columns?: NavbarGooeyBloomLink[][]; feature?: NavbarGooeyBloomFeature; } export interface NavbarGooeyBloomProps extends Omit< ComponentPropsWithoutRef<'section'>, 'children' > { brand?: string; logo?: ReactNode; homeHref?: string; menus?: NavbarGooeyBloomMenu[]; currentHref?: string; actionLabel?: string; onActionClick?: MouseEventHandler; children?: ReactNode; } const CLOSE_DELAY = 160; const HOVER_INTENT = 70; const HIDE_AFTER = 220; const PANEL_GAP = 12; const PANEL_RADIUS = 26; const DROP_SIZE = 22; const EDGE_LEAD = 520; const EDGE_TRAIL = 170; const TAIL_PULL = 110; const PANEL_LEAD = 300; const PANEL_TRAIL = 140; const PANEL_PULL = 260; const BUMP_RADIUS = 14; const BUMP_RISE = 6; const BUMP_PULL = 150; const ICON_SIZE = 32; const ICON_DROP = 14; const SCROLL_TOLERANCE = 6; const DESKTOP_QUERY = '(min-width: 1024px)'; const CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'; const EASE_OUT_EXPO = 'ease-[cubic-bezier(0.16,1,0.3,1)]'; const focusRing = 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#c6f56f]'; const TWEEN_MARK = ( ); const ICON_PATHS: Record = { bloom: ( <> ), drop: , orbit: ( <> ), spark: , layers: ( <> ), wave: , bolt: , shield: , }; const DEFAULT_MENUS: NavbarGooeyBloomMenu[] = [ { label: 'Work', columns: [ [ { label: 'Case studies', href: '#', description: 'Shipped products, start to finish.', icon: 'bloom', }, { label: 'Experiments', href: '#', description: 'Small ideas, pushed too far.', icon: 'spark', }, { label: 'Playground', href: '#', description: 'Live code you can poke at.', icon: 'orbit', }, { label: 'Archive', href: '#', description: 'Everything since 2019.', icon: 'layers', }, ], [ { label: 'Motion kit', href: '#', description: 'Easing, springs and timing.', icon: 'wave', }, { label: 'Interface kit', href: '#', description: 'Bars, panels and overlays.', icon: 'drop', }, { label: 'Brand systems', href: '#', description: 'Marks that know how to move.', icon: 'shield', }, { label: 'Performance', href: '#', description: 'Sixty frames, no excuses.', icon: 'bolt', }, ], ], feature: { title: 'Bloom 2.0', description: 'The metaball engine under this bar, documented end to end.', href: '#', cta: 'Read the notes', }, }, { label: 'Components', columns: [ [ { label: 'Navbars', href: '/components', description: 'Eleven ways to hold a menu.', icon: 'layers', }, { label: 'Buttons', href: '/components', description: 'Press, roll, bloom.', icon: 'drop', }, { label: 'Carousels', href: '/components', description: 'Arcs, shutters and reels.', icon: 'orbit', }, { label: 'Loaders', href: '/components', description: 'Waiting, but on purpose.', icon: 'spark', }, { label: 'Type', href: '/components', description: 'Letters that misbehave.', icon: 'wave', }, ], ], }, { label: 'Studio', columns: [ [ { label: 'About', href: '#', description: 'Four people, one room.', icon: 'bloom' }, { label: 'Team', href: '#', description: 'Who makes what.', icon: 'shield' }, { label: 'Careers', href: '#', description: 'Two seats open.', icon: 'bolt' }, { label: 'Press', href: '#', description: 'Logos and words.', icon: 'layers' }, ], [ { label: 'Contact', href: '#', description: 'Say hello properly.', icon: 'drop' }, { label: 'Changelog', href: '#', description: 'What moved this week.', icon: 'wave', }, { label: 'License', href: '#', description: 'What you may ship.', icon: 'orbit' }, { label: 'Support', href: '#', description: 'We answer on weekdays.', icon: 'spark', }, ], ], }, { label: 'Journal', href: '#' }, ]; 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 clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max); const panelWidth = (menu: NavbarGooeyBloomMenu) => { const columns = menu.columns?.length ?? 0; if (menu.feature) return columns > 1 ? 880 : 720; return columns > 1 ? 720 : 360; }; const panelGrid = (menu: NavbarGooeyBloomMenu) => { const columns = menu.columns?.length ?? 0; if (menu.feature) return columns > 1 ? 'grid-cols-[1fr_1fr_15rem]' : 'grid-cols-[1fr_15rem]'; return columns > 1 ? 'grid-cols-2' : 'grid-cols-1'; }; interface Spring { x: number; v: number; t: number; } interface GooMotion { left: Spring; right: Spring; tail: Spring; panelLeft: Spring; panelRight: Spring; panelHeight: Spring; bump: Spring; rowTop: Spring; rowBottom: Spring; rowLeft: Spring; rowWidth: Spring; iconTop: Spring; iconBottom: Spring; iconTail: Spring; iconOffset: number; look: { scale: number; alpha: number }; hover: { alpha: number }; pillShown: boolean; panelShown: boolean; hoverShown: boolean; barBottom: number; awake: boolean; } const spring = (): Spring => ({ x: 0, v: 0, t: 0 }); const place = (target: Spring, value: number) => { target.x = value; target.v = 0; target.t = value; }; const snap = (target: Spring) => { target.x = target.t; target.v = 0; }; const stepSpring = (target: Spring, stiffness: number, dt: number) => { const force = stiffness * (target.t - target.x) - 2 * Math.sqrt(stiffness) * target.v; target.v += force * dt; target.x += target.v * dt; }; const atRest = (target: Spring, epsilon: number) => Math.abs(target.t - target.x) < epsilon && Math.abs(target.v) < epsilon; const createMotion = (): GooMotion => ({ left: spring(), right: spring(), tail: spring(), panelLeft: spring(), panelRight: spring(), panelHeight: spring(), bump: spring(), rowTop: spring(), rowBottom: spring(), rowLeft: spring(), rowWidth: spring(), iconTop: spring(), iconBottom: spring(), iconTail: spring(), iconOffset: 0, look: { scale: 0.4, alpha: 0 }, hover: { alpha: 0 }, pillShown: false, panelShown: false, hoverShown: false, barBottom: 60, awake: false, }); const springsOf = (motion: GooMotion) => [ motion.left, motion.right, motion.tail, motion.panelLeft, motion.panelRight, motion.panelHeight, motion.bump, motion.rowTop, motion.rowBottom, motion.rowLeft, motion.rowWidth, motion.iconTop, motion.iconBottom, motion.iconTail, ]; const settleMotion = (motion: GooMotion) => { const center = (motion.left.t + motion.right.t) / 2; motion.tail.t = center; motion.bump.t = center; motion.iconTail.t = (motion.iconTop.t + motion.iconBottom.t) / 2; springsOf(motion).forEach(snap); }; const motionAtRest = (motion: GooMotion) => springsOf(motion).every((item) => atRest(item, 0.05)) && !gsap.isTweening(motion.look) && !gsap.isTweening(motion.hover); const steer = (start: Spring, end: Spring) => { const heading = start.t + end.t - start.x - end.x; return { start: heading > 1 ? EDGE_TRAIL : EDGE_LEAD, end: heading < -1 ? EDGE_TRAIL : EDGE_LEAD, }; }; const px = (value: number) => Math.round(value * 100) / 100; const roundedRect = (left: number, right: number, top: number, height: number) => { const radius = px(Math.max(0, Math.min(PANEL_RADIUS, (right - left) / 2, height / 2))); const bottom = px(top + height); const l = px(left); const r = px(right); return `M${px(l + radius)},${top}H${px(r - radius)}A${radius},${radius} 0 0 1 ${r},${px(top + radius)}V${px(bottom - radius)}A${radius},${radius} 0 0 1 ${px(r - radius)},${bottom}H${px(l + radius)}A${radius},${radius} 0 0 1 ${l},${px(bottom - radius)}V${px(top + radius)}A${radius},${radius} 0 0 1 ${px(l + radius)},${top}Z`; }; const ArrowIcon = ({ className }: { className?: string }) => { return ( ); }; const ChevronIcon = ({ className }: { className?: string }) => { return ( ); }; const MenuGlyph = ({ icon, className }: { icon: NavbarGooeyBloomIcon; className?: string }) => { return ( ); }; const FeatureArt = () => { const rawId = useId().replace(/[^a-zA-Z0-9_-]/g, ''); const gooId = `feature-goo-${rawId}`; const limeId = `feature-lime-${rawId}`; return ( ); }; const SamplePage = () => { return (

The menu that melts between links.

Point at a link. A pool of lime stretches across the bar, sheds a few droplets on the way, and settles under the label. Open a menu and the card below re-forms around it.

See it again Read the props

); }; const NavbarGooeyBloom = ({ brand = 'Tween UI', logo = TWEEN_MARK, homeHref = '/', menus = DEFAULT_MENUS, currentHref = '/', actionLabel = 'Get started', onActionClick, children, className, ...props }: NavbarGooeyBloomProps) => { const [openKey, setOpenKey] = useState(null); const [mobileOpen, setMobileOpen] = useState(false); const [accordion, setAccordion] = useState(null); const rawId = useId().replace(/[^a-zA-Z0-9_-]/g, ''); const gooId = `goo-${rawId}`; const linkGooId = `link-goo-${rawId}`; const panelGooId = `panel-goo-${rawId}`; const panelId = `panel-${rawId}`; const mobileId = `mobile-${rawId}`; const rootRef = useRef(null); const barRef = useRef(null); const shellRef = useRef(null); const scrollerRef = useRef(null); const panelRef = useRef(null); const bodyRef = useRef(null); const shapeRef = useRef(null); const bumpRef = useRef(null); const hoverRef = useRef<{ row: HTMLElement; blob: HTMLElement; drop: HTMLElement } | null>(null); const pillRef = useRef(null); const coreRef = useRef(null); const dropRef = useRef(null); const inkRefs = useRef>([]); const inkBoxes = useRef>([]); const motion = useRef(createMotion()); const activeRef = useRef(null); const sectionRefs = useRef>({}); const triggerRefs = useRef>({}); const closeTimer = useRef(null); const hoverTimer = useRef(null); const pendingHover = useRef<{ menu: NavbarGooeyBloomMenu; el: HTMLElement } | null>(null); const pointerPos = useRef({ x: 0, y: 0 }); const mobileRef = useRef(null); const toggleRef = useRef(null); const mobileCloseRef = useRef(null); const openRef = useRef(null); const skipFocusOpen = useRef(false); const current = (href: string) => { if (href.startsWith('#')) return false; const link = cleanHref(href); const page = cleanHref(currentHref); return link === page || (link !== '/' && page.startsWith(`${link}/`)); }; const { contextSafe } = useGSAP( () => { if (prefersReducedMotion()) return; const bar = barRef.current; if (!bar) return; const intro = bar.querySelectorAll('[data-intro]'); gsap.fromTo( bar, { y: -28, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 1, ease: 'expo.out', clearProps: 'transform,opacity,visibility', } ); gsap.fromTo( intro, { y: -8, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.7, ease: 'power3.out', stagger: 0.06, delay: 0.12, clearProps: 'transform,opacity,visibility', } ); }, { scope: rootRef } ); const measureInk = useCallback(() => { const bar = barRef.current; if (!bar) return; const barRect = bar.getBoundingClientRect(); inkRefs.current.forEach((ink, index) => { const host = ink?.parentElement; if (!host) return; const box = host.getBoundingClientRect(); inkBoxes.current[index] = { left: box.left - barRect.left, width: box.width }; }); }, []); const draw = useCallback(() => { const m = motion.current; const left = m.left.x; const right = m.right.x; const width = Math.max(right - left, 0); const stretch = width - (m.right.t - m.left.t); const thin = 1 - clamp(stretch / 320, 0, 0.18); const { scale, alpha } = m.look; const pill = pillRef.current; const core = coreRef.current; const drop = dropRef.current; if (pill && core && drop) { pill.style.width = `${width}px`; pill.style.transform = `translate3d(${left}px,0,0)`; pill.style.opacity = `${alpha}`; core.style.transform = `scale(${scale},${scale * thin})`; drop.style.transform = `translate3d(${m.tail.x - DROP_SIZE / 2}px,0,0) scale(${scale})`; drop.style.opacity = `${alpha}`; } inkRefs.current.forEach((ink, index) => { const box = inkBoxes.current[index]; if (!ink || !box) return; const start = clamp(left - box.left, 0, box.width); const end = clamp(right - box.left, 0, box.width); ink.style.clipPath = `inset(-4px ${box.width - end}px -4px ${start}px)`; ink.style.opacity = `${alpha}`; }); const hover = hoverRef.current; if (hover) { const alpha = m.hover.alpha; const iconHeight = Math.max(m.iconBottom.x - m.iconTop.x, 0); const iconStretch = iconHeight - (m.iconBottom.t - m.iconTop.t); const iconWidth = ICON_SIZE * (1 - clamp(iconStretch / 160, 0, 0.3)); const iconX = m.rowLeft.x + m.iconOffset; hover.row.style.transform = `translate3d(${m.rowLeft.x}px,${m.rowTop.x}px,0)`; hover.row.style.width = `${Math.max(m.rowWidth.x, 0)}px`; hover.row.style.height = `${Math.max(m.rowBottom.x - m.rowTop.x, 0)}px`; hover.row.style.opacity = `${alpha}`; hover.blob.style.transform = `translate3d(${iconX + (ICON_SIZE - iconWidth) / 2}px,${m.iconTop.x}px,0)`; hover.blob.style.width = `${iconWidth}px`; hover.blob.style.height = `${iconHeight}px`; hover.blob.style.opacity = `${alpha}`; hover.drop.style.transform = `translate3d(${iconX + (ICON_SIZE - ICON_DROP) / 2}px,${m.iconTail.x - ICON_DROP / 2}px,0)`; hover.drop.style.opacity = `${alpha}`; } const shape = shapeRef.current; const bump = bumpRef.current; const body = bodyRef.current; if (!m.panelShown || !shape || !bump || !body) return; const top = m.barBottom + PANEL_GAP; const height = Math.max(m.panelHeight.x, 0); const panelWidth = Math.max(m.panelRight.x - m.panelLeft.x, 0); const bumpRadius = Math.max(0, Math.min(BUMP_RADIUS, panelWidth / 4, height / 3)); shape.setAttribute('d', roundedRect(m.panelLeft.x, m.panelRight.x, top, height)); const edge = Math.min(PANEL_RADIUS, panelWidth / 2) + bumpRadius; const bumpX = panelWidth > edge * 2 ? clamp(m.bump.x, m.panelLeft.x + edge, m.panelRight.x - edge) : m.panelLeft.x + panelWidth / 2; bump.setAttribute('cx', `${px(bumpX)}`); bump.setAttribute('cy', `${px(top + bumpRadius - BUMP_RISE * (bumpRadius / BUMP_RADIUS))}`); bump.setAttribute('r', `${px(bumpRadius)}`); body.style.top = `${top}px`; body.style.clipPath = `path('${roundedRect(m.panelLeft.x, m.panelRight.x, 0, height)}')`; }, []); useEffect(() => { const tick = (_time: number, deltaTime: number) => { const m = motion.current; if (!m.awake) return; const elapsed = Math.min(deltaTime / 1000, 0.05); const steps = Math.max(1, Math.ceil(elapsed * 120)); const dt = elapsed / steps; const pill = steer(m.left, m.right); const row = steer(m.rowTop, m.rowBottom); const icon = steer(m.iconTop, m.iconBottom); const panelHeading = m.panelLeft.t + m.panelRight.t - m.panelLeft.x - m.panelRight.x; const panelLeftPull = panelHeading > 1 ? PANEL_TRAIL : PANEL_LEAD; const panelRightPull = panelHeading < -1 ? PANEL_TRAIL : PANEL_LEAD; for (let step = 0; step < steps; step += 1) { stepSpring(m.left, pill.start, dt); stepSpring(m.right, pill.end, dt); const center = (m.left.x + m.right.x) / 2; m.tail.t = center; stepSpring(m.tail, TAIL_PULL, dt); if (m.panelShown) { m.bump.t = center; stepSpring(m.panelLeft, panelLeftPull, dt); stepSpring(m.panelRight, panelRightPull, dt); stepSpring(m.panelHeight, PANEL_PULL, dt); stepSpring(m.bump, BUMP_PULL, dt); } stepSpring(m.rowTop, row.start, dt); stepSpring(m.rowBottom, row.end, dt); stepSpring(m.rowLeft, EDGE_LEAD, dt); stepSpring(m.rowWidth, EDGE_LEAD, dt); stepSpring(m.iconTop, icon.start, dt); stepSpring(m.iconBottom, icon.end, dt); m.iconTail.t = (m.iconTop.x + m.iconBottom.x) / 2; stepSpring(m.iconTail, TAIL_PULL, dt); } const center = (m.left.x + m.right.x) / 2; m.tail.x = m.right.x - m.left.x > 4 ? clamp(m.tail.x, m.left.x + 2, m.right.x - 2) : center; m.iconTail.x = clamp(m.iconTail.x, m.iconTop.x - 2, m.iconBottom.x + 2); if (motionAtRest(m)) { settleMotion(m); m.awake = false; } draw(); }; gsap.ticker.add(tick); return () => gsap.ticker.remove(tick); }, [draw]); const hideBlob = contextSafe(() => { const m = motion.current; if (!m.pillShown) return; m.pillShown = false; const center = (m.left.t + m.right.t) / 2; m.left.t = center - 20; m.right.t = center + 20; gsap.killTweensOf(m.look); if (prefersReducedMotion()) { m.look.scale = 0.4; m.look.alpha = 0; settleMotion(m); draw(); return; } gsap.to(m.look, { scale: 0.4, alpha: 0, duration: 0.32, ease: 'power2.inOut' }); m.awake = true; }); const moveBlob = contextSafe((el: HTMLElement) => { const bar = barRef.current; if (!bar) return; const m = motion.current; const base = bar.getBoundingClientRect(); const box = el.getBoundingClientRect(); const left = box.left - base.left; const center = left + box.width / 2; activeRef.current = el; measureInk(); gsap.killTweensOf(m.look); if (!m.pillShown && m.look.alpha < 0.05) { place(m.left, center - 20); place(m.right, center + 20); place(m.tail, center); m.look.scale = 0.4; } m.pillShown = true; m.left.t = left; m.right.t = left + box.width; if (prefersReducedMotion()) { m.look.scale = 1; m.look.alpha = 1; settleMotion(m); draw(); return; } gsap.to(m.look, { scale: 1, alpha: 1, duration: 0.45, ease: 'power3.out' }); m.awake = true; }); const resetHover = () => { const m = motion.current; const hover = hoverRef.current; gsap.killTweensOf(m.hover); m.hover.alpha = 0; m.hoverShown = false; hoverRef.current = null; if (hover) gsap.set([hover.row, hover.blob, hover.drop], { opacity: 0 }); }; const moveHover = contextSafe((link: HTMLElement) => { const section = link.closest('[data-section]'); const icon = link.querySelector('[data-icon]'); const row = section?.querySelector('[data-hover-row]'); const blob = section?.querySelector('[data-hover-blob]'); const drop = section?.querySelector('[data-hover-drop]'); if (!section || !icon || !row || !blob || !drop) return; const m = motion.current; if (hoverRef.current && hoverRef.current.row !== row) resetHover(); const fresh = !hoverRef.current || (!m.hoverShown && m.hover.alpha < 0.05); hoverRef.current = { row, blob, drop }; const base = section.getBoundingClientRect(); const box = link.getBoundingClientRect(); const tile = icon.getBoundingClientRect(); const top = box.top - base.top; const left = box.left - base.left; const iconTop = tile.top - base.top; const iconCenter = iconTop + tile.height / 2; m.iconOffset = tile.left - box.left; gsap.killTweensOf(m.hover); if (fresh) { place(m.rowTop, top); place(m.rowBottom, top + box.height); place(m.rowLeft, left); place(m.rowWidth, box.width); place(m.iconTop, iconCenter - 4); place(m.iconBottom, iconCenter + 4); place(m.iconTail, iconCenter); } m.hoverShown = true; m.rowTop.t = top; m.rowBottom.t = top + box.height; m.rowLeft.t = left; m.rowWidth.t = box.width; m.iconTop.t = iconTop; m.iconBottom.t = iconTop + tile.height; if (prefersReducedMotion()) { m.hover.alpha = 1; settleMotion(m); draw(); return; } gsap.to(m.hover, { alpha: 1, duration: 0.3, ease: 'power2.out' }); m.awake = true; }); const hideHover = contextSafe(() => { const m = motion.current; if (!m.hoverShown) return; m.hoverShown = false; const center = (m.iconTop.t + m.iconBottom.t) / 2; m.iconTop.t = center - 4; m.iconBottom.t = center + 4; gsap.killTweensOf(m.hover); if (prefersReducedMotion()) { m.hover.alpha = 0; settleMotion(m); draw(); return; } gsap.to(m.hover, { alpha: 0, duration: 0.28, ease: 'power2.out' }); m.awake = true; }); const getLayout = useCallback((trigger: HTMLElement, section: HTMLElement) => { const bar = barRef.current; const width = section.offsetWidth; const height = section.offsetHeight; if (!bar) return { left: 0, width, height, center: width / 2 }; const barRect = bar.getBoundingClientRect(); const triggerRect = trigger.getBoundingClientRect(); const center = triggerRect.left - barRect.left + triggerRect.width / 2; const min = 8 - barRect.left; const max = window.innerWidth - 8 - width - barRect.left; return { left: clamp(center - width / 2, Math.min(min, max), max), width, height, center }; }, []); const sectionNodes = () => Object.values(sectionRefs.current).filter((node): node is HTMLDivElement => Boolean(node)); const openMenu = contextSafe((menu: NavbarGooeyBloomMenu, trigger: HTMLElement) => { const section = sectionRefs.current[menu.label]; const panel = panelRef.current; const shell = shellRef.current; if (!section || !panel || !shell) return; if (openRef.current === menu.label) return; const previous = openRef.current; const previousSection = previous ? sectionRefs.current[previous] : null; openRef.current = menu.label; setOpenKey(menu.label); const m = motion.current; const layout = getLayout(trigger, section); const reduced = prefersReducedMotion(); const items = section.querySelectorAll('[data-item]'); m.barBottom = shell.offsetHeight; resetHover(); gsap.killTweensOf([panel, ...sectionNodes()]); sectionNodes().forEach((node) => { if (node !== section && node !== previousSection) gsap.set(node, { opacity: 0 }); }); gsap.set(section, { left: layout.left, opacity: 1 }); gsap.set(panel, { opacity: 1 }); if (!m.panelShown) { place(m.panelLeft, layout.center - 12); place(m.panelRight, layout.center + 12); place(m.panelHeight, 24); place(m.bump, layout.center); m.panelShown = true; } m.panelLeft.t = layout.left; m.panelRight.t = layout.left + layout.width; m.panelHeight.t = layout.height; if (reduced) { if (previousSection && previousSection !== section) { gsap.set(previousSection, { opacity: 0 }); } gsap.set(items, { y: 0, opacity: 1 }); settleMotion(m); draw(); return; } m.awake = true; if (previousSection && previousSection !== section) { gsap.to(previousSection, { opacity: 0, duration: 0.14, ease: 'power2.out' }); } if (items.length) { gsap.fromTo( items, { y: 10, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, ease: 'power3.out', stagger: 0.02, delay: previous ? 0.05 : 0.12, overwrite: 'auto', } ); } }); const closeMenu = contextSafe((options?: { clearHighlight?: boolean }) => { cancelHover(); if (options?.clearHighlight) { hideBlob(); } if (!openRef.current) return; openRef.current = null; setOpenKey(null); setAccordion(null); const panel = panelRef.current; if (!panel) return; const m = motion.current; const sections = sectionNodes(); const center = (m.left.t + m.right.t) / 2; gsap.killTweensOf([panel, ...sections]); m.panelLeft.t = center - 12; m.panelRight.t = center + 12; m.panelHeight.t = 24; const finish = () => { m.panelShown = false; resetHover(); gsap.set(sections, { opacity: 0 }); gsap.set(panel, { opacity: 0 }); }; if (prefersReducedMotion()) { finish(); return; } m.awake = true; gsap.to(sections, { opacity: 0, duration: 0.12, ease: 'power2.out' }); gsap.to(panel, { opacity: 0, duration: 0.24, delay: 0.08, ease: 'power2.in', onComplete: finish, }); }); const cancelClose = () => { if (closeTimer.current !== null) { window.clearTimeout(closeTimer.current); closeTimer.current = null; } }; const scheduleClose = contextSafe(() => { cancelHover(); cancelClose(); closeTimer.current = window.setTimeout(() => { const bar = barRef.current; if (bar) { const rect = bar.getBoundingClientRect(); const { x, y } = pointerPos.current; if ( x >= rect.left - 2 && x <= rect.right + 2 && y >= rect.top - 2 && y <= rect.bottom + 2 ) { return; } } closeMenu({ clearHighlight: true }); }, CLOSE_DELAY); }); const cancelHover = () => { if (hoverTimer.current !== null) { window.clearTimeout(hoverTimer.current); hoverTimer.current = null; } pendingHover.current = null; }; const handleTriggerEnter = (menu: NavbarGooeyBloomMenu, el: HTMLElement) => { cancelClose(); moveBlob(el); pendingHover.current = { menu, el }; if (hoverTimer.current !== null) window.clearTimeout(hoverTimer.current); hoverTimer.current = window.setTimeout(() => { hoverTimer.current = null; const next = pendingHover.current; pendingHover.current = null; if (!next) return; if (next.menu.columns?.length) openMenu(next.menu, next.el); else closeMenu(); }, HOVER_INTENT); }; useEffect(() => { const scroller = scrollerRef.current; const bar = barRef.current; if (!scroller || !bar) return; let last = scroller.scrollTop; let hidden = false; const onScroll = () => { const y = scroller.scrollTop; const delta = y - last; if (Math.abs(delta) < SCROLL_TOLERANCE) return; last = y; const next = delta > 0 && y > HIDE_AFTER && !openRef.current; if (next === hidden) return; hidden = next; gsap.to(bar, { yPercent: next ? -170 : 0, duration: prefersReducedMotion() ? 0 : next ? 0.5 : 0.7, ease: next ? 'power3.in' : 'expo.out', overwrite: 'auto', }); }; scroller.addEventListener('scroll', onScroll, { passive: true }); return () => scroller.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const onResize = () => { const bar = barRef.current; const shell = shellRef.current; if (!bar || !shell) return; const m = motion.current; measureInk(); const active = activeRef.current; if (active && m.pillShown) { const base = bar.getBoundingClientRect(); const box = active.getBoundingClientRect(); m.left.t = box.left - base.left; m.right.t = m.left.t + box.width; } const key = openRef.current; const section = key ? sectionRefs.current[key] : null; const trigger = key ? triggerRefs.current[key] : null; if (section && trigger) { const layout = getLayout(trigger, section); m.barBottom = shell.offsetHeight; m.panelLeft.t = layout.left; m.panelRight.t = layout.left + layout.width; m.panelHeight.t = layout.height; gsap.set(section, { left: layout.left }); } settleMotion(m); draw(); }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [draw, getLayout, measureInk]); useEffect(() => { if (!openKey) return; const desktop = window.matchMedia(DESKTOP_QUERY); const onKeyDown = (event: KeyboardEvent) => { if (event.key !== 'Escape') return; const key = openRef.current; closeMenu({ clearHighlight: true }); if (key) { skipFocusOpen.current = true; triggerRefs.current[key]?.focus(); skipFocusOpen.current = false; } }; const onPointerDown = (event: PointerEvent) => { if (!barRef.current?.contains(event.target as Node)) { closeMenu({ clearHighlight: true }); } }; const onDesktopChange = (event: MediaQueryListEvent) => { if (!event.matches) closeMenu({ clearHighlight: true }); }; document.addEventListener('keydown', onKeyDown); document.addEventListener('pointerdown', onPointerDown); desktop.addEventListener('change', onDesktopChange); return () => { document.removeEventListener('keydown', onKeyDown); document.removeEventListener('pointerdown', onPointerDown); desktop.removeEventListener('change', onDesktopChange); }; }, [openKey, closeMenu]); useEffect(() => { const menu = mobileRef.current; if (!menu) return; const reduced = prefersReducedMotion(); const items = menu.querySelectorAll('[data-mobile-item]'); if (mobileOpen) { gsap.set(menu, { visibility: 'visible' }); gsap.fromTo( menu, { opacity: 0 }, { opacity: 1, duration: reduced ? 0 : 0.28, ease: 'power2.out' } ); gsap.fromTo( items, { y: 22, opacity: 0 }, { y: 0, opacity: 1, duration: reduced ? 0 : 0.45, ease: 'power3.out', stagger: reduced ? 0 : 0.035, delay: reduced ? 0 : 0.08, } ); mobileCloseRef.current?.focus(); } else { gsap.to(menu, { opacity: 0, duration: reduced ? 0 : 0.22, ease: 'power2.out', onComplete: () => gsap.set(menu, { visibility: 'hidden' }), }); } }, [mobileOpen]); useEffect(() => { if (!mobileOpen) return; const desktop = window.matchMedia(DESKTOP_QUERY); const onKeyDown = (event: KeyboardEvent) => { if (event.key !== 'Escape') return; setMobileOpen(false); toggleRef.current?.focus(); }; const onChange = (event: MediaQueryListEvent) => { if (event.matches) setMobileOpen(false); }; document.addEventListener('keydown', onKeyDown); desktop.addEventListener('change', onChange); return () => { document.removeEventListener('keydown', onKeyDown); desktop.removeEventListener('change', onChange); }; }, [mobileOpen]); useEffect(() => { return () => { cancelClose(); if (hoverTimer.current !== null) window.clearTimeout(hoverTimer.current); pendingHover.current = null; }; }, []); return (

{ if (!event.currentTarget.contains(event.relatedTarget as Node | null)) { closeMenu({ clearHighlight: true }); } }} >

{ pointerPos.current = { x: event.clientX, y: event.clientY }; scheduleClose(); if (!openRef.current) hideBlob(); }} className="relative flex h-15 items-center justify-between gap-3 rounded-full border border-[#9fd4d6]/12 bg-[#071d1b]/70 px-3 shadow-[0_24px_60px_-32px_rgb(0_0_0/0.95)] backdrop-blur-xl" > {logo} {brand}

{panelMenu ? ( ) : ( handleTriggerEnter(menu, event.currentTarget)} onFocus={(event) => { cancelHover(); moveBlob(event.currentTarget); closeMenu(); }} className={cn(labelClass, focusRing)} > {menu.label} )}

{actionLabel}

{menus.map((menu) => { if (!menu.columns?.length) return null; const width = panelWidth(menu); return (

{ sectionRefs.current[menu.label] = node; }} data-section="" inert={openKey !== menu.label} onPointerLeave={hideHover} style={{ width }} className={cn( 'absolute top-0 left-0 p-2.5 opacity-0', openKey === menu.label ? 'pointer-events-auto' : 'pointer-events-none' )} >

{menu.columns.map((column, columnIndex) => (

closeMenu()} onPointerEnter={(event) => moveHover(event.currentTarget)} onFocus={(event) => moveHover(event.currentTarget)} className={cn( 'group/link relative flex items-start gap-3 rounded-2xl p-2.5', focusRing )} > {link.label} {link.description ? ( {link.description} ) : null}

))} {menu.feature ? (

{menu.feature.image ? (

) : ( )}

{menu.feature.title}

{menu.feature.description}

closeMenu()} className={cn( 'group/feature mt-auto inline-flex items-center gap-1.5 pt-3 text-[12px] font-medium text-[#c6f56f]', focusRing )} > {menu.feature.cta ?? 'Explore'}

) : null}

); })}

{children ?? }

{logo} {brand}

{panelMenu ? ( <>
- setMobileOpen(false)} className={cn( 'flex items-center gap-3 rounded-xl px-2 py-2.5 text-[15px] text-[#e8f3f2]/75', focusRing )} > {link.label}
) : ( setMobileOpen(false)} className={cn( 'block py-4 text-[26px] leading-none font-medium tracking-[-0.03em]', focusRing )} > {menu.label} )}

{ setMobileOpen(false); onActionClick?.(event); }} className="h-12 w-full rounded-full focus-visible:ring-[#c6f56f] focus-visible:ring-offset-[#04140f]" > {actionLabel}

); }; export default NavbarGooeyBloom; 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":["https://tween-ui.vercel.app/r/dot-bloom-button.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/tweenui/navbar-gooey-bloom.tsx","content":"$62","type":"registry:component","target":"components/tweenui/navbar-gooey-bloom.tsx"}],"className":"h-[70svh] min-h-80"}]]}]