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

\n \n Metaball navigation\n

\n

\n The menu that melts between links.\n

\n

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

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

{menu.feature.title}

\n

\n {menu.feature.description}\n

\n closeMenu()}\n className={cn(\n 'group/feature mt-auto inline-flex items-center gap-1.5 pt-3 text-[12px] font-medium text-[#c6f56f]',\n focusRing\n )}\n >\n {menu.feature.cta ?? 'Explore'}\n \n \n
\n
\n ) : null}\n \n \n );\n })}\n \n \n \n \n\n \n {children ?? }\n \n\n \n
\n \n {logo}\n {brand}\n \n {\n setMobileOpen(false);\n toggleRef.current?.focus();\n }}\n className={cn(\n 'grid size-10 cursor-pointer place-items-center rounded-full border border-[#9fd4d6]/15 bg-white/[0.04]',\n focusRing\n )}\n >\n \n \n \n \n
\n\n
\n
    \n {menus.map((menu) => {\n const panelMenu = Boolean(menu.columns?.length);\n const isOpen = accordion === menu.label;\n const links = menu.columns?.flat() ?? [];\n const contentId = `${mobileId}-${menu.label.replace(/[^a-zA-Z0-9]/g, '')}`;\n\n return (\n \n {panelMenu ? (\n <>\n setAccordion(isOpen ? null : menu.label)}\n className={cn(\n 'flex w-full cursor-pointer items-center justify-between py-4 text-left',\n focusRing\n )}\n >\n \n {menu.label}\n \n \n \n \n
    \n
      \n {links.map((link) => (\n
    • \n setMobileOpen(false)}\n className={cn(\n 'flex items-center gap-3 rounded-xl px-2 py-2.5 text-[15px] text-[#e8f3f2]/75',\n focusRing\n )}\n >\n \n {link.label}\n \n
      • \n ))}\n
    \n
    \n
\n \n ) : (\n setMobileOpen(false)}\n className={cn(\n 'block py-4 text-[26px] leading-none font-medium tracking-[-0.03em]',\n focusRing\n )}\n >\n {menu.label}\n \n )}\n \n );\n })}\n \n\n
\n {\n setMobileOpen(false);\n onActionClick?.(event);\n }}\n className=\"h-12 w-full rounded-full focus-visible:ring-[#c6f56f] focus-visible:ring-offset-[#04140f]\"\n >\n {actionLabel}\n \n
\n \n \n \n );\n};\n\nexport default NavbarGooeyBloom;\n" } ], "docs": "Docs, props and examples: https://tween-ui.vercel.app/block/navbar-gooey-bloom\nPass `menus` (a `label` plus `columns` and an optional `feature`, or just an `href` for a plain link) and put your page inside as `children`. The goo filter is generated per instance, so several bars can share a page." }