\n {logo && (\n \n {logo}\n \n )}\n {brand}\n \n \n \n {quickLinks.map((link) => (\n \n ))}\n \n {button}\n
\n \n );\n}\n\ntype CurtainSettings = Required<\n Omit<\n CurtainNavbarProps,\n \"logo\" | \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"className\"\n >\n> &\n Pick;\n\nfunction CurtainPanel({\n open,\n onClose,\n onExit,\n settings,\n}: {\n open: boolean;\n onClose: () => void;\n onExit: () => void;\n settings: CurtainSettings;\n}) {\n const rootRef = useRef(null);\n const sheetRef = useRef(null);\n const closeRef = useRef(null);\n const moveRef = useRef<((next: boolean) => void) | null>(null);\n const openRef = useRef(open);\n const enteredRef = useRef(false);\n const {\n brand,\n brandHref,\n logo,\n items,\n footerLinks,\n leftNote,\n rightNote,\n footerText,\n background,\n foreground,\n headerBackground,\n headerForeground,\n duration,\n stagger,\n hoverDuration,\n closeSpeed,\n glitchDuration,\n hoverScroll,\n scrollDuration,\n contained,\n } = settings;\n\n useEffect(() => {\n openRef.current = open;\n }, [open]);\n\n useGSAP(\n () => {\n const root = rootRef.current;\n const sheet = sheetRef.current;\n if (!root || !sheet) return;\n const titles = root.querySelectorAll(\"[data-curtain-title]\");\n const notes = root.querySelectorAll(\"[data-curtain-note]\");\n const nav = root.querySelector(\"[data-curtain-nav]\");\n const scroller = root.querySelector(\"[data-curtain-scroll]\");\n const media = gsap.matchMedia();\n media.add(\n {\n reduced: \"(prefers-reduced-motion: reduce)\",\n pointer: \"(hover: hover) and (pointer: fine)\",\n all: \"all\",\n },\n (context) => {\n const reduced = Boolean(context.conditions?.reduced);\n gsap.set(sheet, {\n y: 0,\n yPercent: 100,\n borderTopLeftRadius: 32,\n borderTopRightRadius: 32,\n });\n gsap.set(titles, { y: 0, yPercent: 115 });\n gsap.set(notes, { opacity: 0, y: 10 });\n const timeline = gsap\n .timeline({\n paused: true,\n onComplete: () => {\n enteredRef.current = true;\n },\n onReverseComplete: onExit,\n })\n .to(\n sheet,\n {\n yPercent: 0,\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n duration,\n ease: \"power4.inOut\",\n },\n 0,\n )\n .to(\n titles,\n {\n y: 0,\n yPercent: 0,\n duration: duration * 0.75,\n stagger,\n ease: \"power4.out\",\n },\n duration * 0.3,\n )\n .to(\n notes,\n {\n opacity: 1,\n y: 0,\n duration: duration * 0.4,\n stagger: 0.02,\n ease: \"power3.out\",\n },\n duration * 0.6,\n );\n let selected: HTMLElement | null = null;\n let pointer: { x: number; y: number } | null = null;\n const scrollTo =\n scroller && !reduced\n ? gsap.quickTo(scroller, \"scrollTop\", {\n duration: scrollDuration,\n ease: \"power3.out\",\n })\n : null;\n const select = context.add(\"select\", (row: HTMLElement | null) => {\n if (selected === row) return;\n if (selected) {\n gsap.to(selected.querySelector(\"[data-curtain-word]\"), {\n opacity: 1,\n x: 0,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n });\n gsap.to(selected.querySelectorAll(\"[data-curtain-detail]\"), {\n autoAlpha: 0,\n y: reduced ? 0 : -8,\n duration: reduced ? 0 : hoverDuration * 0.7,\n ease: \"power2.out\",\n overwrite: \"auto\",\n });\n }\n selected = row;\n if (!row) return;\n gsap.to(row.querySelector(\"[data-curtain-word]\"), {\n opacity: 0.45,\n x: reduced ? 0 : 5,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n });\n gsap.fromTo(\n row.querySelectorAll(\"[data-curtain-detail]\"),\n { autoAlpha: 0, y: reduced ? 0 : 8 },\n {\n autoAlpha: 1,\n y: 0,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n },\n );\n });\n const point = (event: Event) => {\n if (event instanceof PointerEvent && event.pointerType !== \"mouse\")\n return;\n const row =\n event.target instanceof Element\n ? event.target.closest(\"[data-curtain-row]\")\n : null;\n if (row && nav?.contains(row)) select(row);\n };\n const scroll = (event: PointerEvent) => {\n if (event.pointerType === \"mouse\")\n pointer = { x: event.clientX, y: event.clientY };\n if (\n !scroller ||\n !scrollTo ||\n !hoverScroll ||\n !context.conditions?.pointer ||\n event.pointerType !== \"mouse\" ||\n !openRef.current ||\n !enteredRef.current\n )\n return;\n const bounds = scroller.getBoundingClientRect();\n const progress = gsap.utils.clamp(\n 0,\n 1,\n (event.clientY - bounds.top - 24) /\n Math.max(1, bounds.height - 48),\n );\n scrollTo(\n progress *\n Math.max(0, scroller.scrollHeight - scroller.clientHeight),\n scroller.scrollTop,\n );\n };\n const stopScroll = () => scrollTo?.tween.pause();\n const syncHover = () => {\n if (!pointer || nav?.contains(document.activeElement)) return;\n const target = document.elementFromPoint(pointer.x, pointer.y);\n const row =\n target?.closest(\"[data-curtain-row]\") ?? null;\n select(row && nav?.contains(row) ? row : null);\n };\n const leaveScroll = () => {\n pointer = null;\n stopScroll();\n };\n const focusScroll = (event: FocusEvent) => {\n if (!scroller || !(event.target instanceof HTMLElement)) return;\n stopScroll();\n const bounds = scroller.getBoundingClientRect();\n const target = event.target.getBoundingClientRect();\n const offset =\n target.top < bounds.top + 12\n ? target.top - bounds.top - 12\n : target.bottom > bounds.bottom - 12\n ? target.bottom - bounds.bottom + 12\n : 0;\n if (offset === 0) return;\n const next = gsap.utils.clamp(\n 0,\n Math.max(0, scroller.scrollHeight - scroller.clientHeight),\n scroller.scrollTop + offset,\n );\n if (scrollTo) scrollTo(next, scroller.scrollTop);\n else scroller.scrollTop = next;\n };\n const leave = () => {\n if (!nav?.contains(document.activeElement)) select(null);\n };\n const blur = (event: FocusEvent) => {\n if (\n !(event.relatedTarget instanceof Node) ||\n !nav?.contains(event.relatedTarget)\n )\n select(null);\n };\n nav?.addEventListener(\"pointerover\", point);\n nav?.addEventListener(\"focusin\", point);\n nav?.addEventListener(\"pointerleave\", leave);\n nav?.addEventListener(\"focusout\", blur);\n scroller?.addEventListener(\"pointermove\", scroll, { passive: true });\n scroller?.addEventListener(\"pointerleave\", leaveScroll);\n scroller?.addEventListener(\"scroll\", syncHover, { passive: true });\n scroller?.addEventListener(\"wheel\", stopScroll, { passive: true });\n scroller?.addEventListener(\"touchstart\", stopScroll, {\n passive: true,\n });\n scroller?.addEventListener(\"focusin\", focusScroll);\n const move = context.add(\"move\", (next: boolean) => {\n if (!next) stopScroll();\n if (reduced) {\n timeline.progress(1).pause();\n if (!next) onExit();\n } else if (next) timeline.timeScale(1).play();\n else if (timeline.progress() === 0) onExit();\n else timeline.timeScale(closeSpeed).reverse();\n });\n moveRef.current = (next) => move(next);\n if (enteredRef.current && openRef.current)\n timeline.progress(1).pause();\n else move(openRef.current);\n return () => {\n moveRef.current = null;\n nav?.removeEventListener(\"pointerover\", point);\n nav?.removeEventListener(\"focusin\", point);\n nav?.removeEventListener(\"pointerleave\", leave);\n nav?.removeEventListener(\"focusout\", blur);\n scroller?.removeEventListener(\"pointermove\", scroll);\n scroller?.removeEventListener(\"pointerleave\", leaveScroll);\n scroller?.removeEventListener(\"scroll\", syncHover);\n scroller?.removeEventListener(\"wheel\", stopScroll);\n scroller?.removeEventListener(\"touchstart\", stopScroll);\n scroller?.removeEventListener(\"focusin\", focusScroll);\n };\n },\n );\n return () => media.revert();\n },\n {\n scope: rootRef,\n dependencies: [\n duration,\n stagger,\n hoverDuration,\n closeSpeed,\n hoverScroll,\n scrollDuration,\n items,\n onExit,\n ],\n revertOnUpdate: true,\n },\n );\n\n useGSAP(\n () => {\n moveRef.current?.(open);\n },\n { scope: rootRef, dependencies: [open] },\n );\n\n return (\n {\n event.preventDefault();\n closeRef.current?.focus({ preventScroll: true });\n }}\n onEscapeKeyDown={(event) => {\n event.preventDefault();\n onClose();\n }}\n onPointerDownOutside={(event) => event.preventDefault()}\n >\n {brand} navigation\n \n Explore Dev Club components, documentation, and community resources.\n \n \n \n {leftNote}\n \n \n {rightNote}\n \n \n \n {items.map((item, index) => (\n \n \n \n {item.category}\n \n {item.detail}\n \n \n \n \n \n {item.label}\n \n \n \n \n \n {item.description}\n \n \n ))}\n \n {footerLinks.map((link) => (\n \n {link.label}\n \n ))}\n \n \n \n \n {footerText}
\n Dev Club ©\n \n \n \n \n \n }\n />\n \n );\n}\n\nexport function CurtainNavbar({\n brand = \"devclub\",\n brandHref = \"/\",\n logo,\n items = CURTAIN_NAVBAR_ITEMS,\n quickLinks = DEFAULT_QUICK_LINKS,\n footerLinks = DEFAULT_FOOTER_LINKS,\n leftNote = \"A community of builders.\\nOpen source. Open minds.\",\n rightNote = \"Made by Dev Club.\\nBuilt for the web.\",\n footerText = \"Thoughtful interfaces.\\nMotion with purpose.\",\n background = \"#67df32\",\n foreground = \"#161616\",\n headerBackground = \"#222222b3\",\n headerForeground = \"#ffffff\",\n duration = 0.85,\n stagger = 0.045,\n hoverDuration = 0.35,\n closeSpeed = 1.2,\n glitchDuration = 0.55,\n hoverScroll = true,\n scrollDuration = 0.8,\n contained = false,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n className,\n}: CurtainNavbarProps) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = controlledOpen ?? internalOpen;\n const [present, setPresent] = useState(open);\n const [host, setHost] = useState(null);\n const finishExit = useCallback(() => setPresent(false), []);\n if (open && !present) setPresent(true);\n const changeOpen = (next: boolean) => {\n if (controlledOpen === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n };\n const settings: CurtainSettings = {\n brand,\n brandHref,\n logo,\n items,\n quickLinks,\n footerLinks,\n leftNote,\n rightNote,\n footerText,\n background,\n foreground,\n headerBackground,\n headerForeground,\n duration: clamp(duration, 0.3, 1.6, 0.85),\n stagger: clamp(stagger, 0, 0.12, 0.045),\n hoverDuration: clamp(hoverDuration, 0.15, 0.8, 0.35),\n closeSpeed: clamp(closeSpeed, 0.7, 2, 1.2),\n glitchDuration: clamp(glitchDuration, 0.15, 1.2, 0.55),\n hoverScroll,\n scrollDuration: clamp(scrollDuration, 0.2, 1.5, 0.8),\n contained,\n };\n return (\n \n \n \n \n \n \n \n \n }\n />\n
\n \n changeOpen(false)}\n onExit={finishExit}\n settings={settings}\n />\n \n \n \n );\n}\n\nexport default CurtainNavbar;\n",
"content": "\"use client\";\n\nimport {\n useCallback,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { cn } from \"@/lib/utils\";\nimport {\n AsciiGlitchText,\n type AsciiGlitchTextHandle,\n} from \"./ascii-hover-button\";\n\ngsap.registerPlugin(useGSAP);\n\nexport interface CurtainNavbarItem {\n label: string;\n href: string;\n category?: string;\n detail?: string;\n description?: string;\n}\n\nexport interface CurtainNavbarLink {\n label: string;\n href: string;\n}\n\nexport interface CurtainNavbarProps {\n brand?: string;\n brandHref?: string;\n logo?: ReactNode;\n items?: readonly CurtainNavbarItem[];\n quickLinks?: readonly CurtainNavbarLink[];\n footerLinks?: readonly CurtainNavbarLink[];\n leftNote?: string;\n rightNote?: string;\n footerText?: string;\n background?: string;\n foreground?: string;\n headerBackground?: string;\n headerForeground?: string;\n duration?: number;\n stagger?: number;\n hoverDuration?: number;\n closeSpeed?: number;\n glitchDuration?: number;\n hoverScroll?: boolean;\n scrollDuration?: number;\n contained?: boolean;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n className?: string;\n}\n\nexport const CURTAIN_NAVBAR_ITEMS: readonly CurtainNavbarItem[] = [\n {\n label: \"Build\",\n href: \"/components\",\n category: \"Components\",\n detail: \"UI\",\n description: \"Find your next component.\",\n },\n {\n label: \"Learn\",\n href: \"/docs/introduction\",\n category: \"Documentation\",\n detail: \"01\",\n description: \"Make motion part of your craft.\",\n },\n {\n label: \"Club\",\n href: \"https://github.com/devclub-nstru/component_library\",\n category: \"Community\",\n detail: \"Open\",\n description: \"Built together. Shared with everyone.\",\n },\n {\n label: \"Hello\",\n href: \"https://github.com/devclub-nstru/component_library/issues\",\n category: \"Connect\",\n detail: \"↗\",\n description: \"Bring an idea. Start a conversation.\",\n },\n {\n label: \"Source\",\n href: \"https://github.com/devclub-nstru/component_library\",\n category: \"Open source\",\n detail: \"MIT\",\n description: \"Explore the code behind the motion.\",\n },\n];\n\nconst DEFAULT_QUICK_LINKS: readonly CurtainNavbarLink[] = [\n { label: \"Build\", href: \"/components\" },\n { label: \"Learn\", href: \"/docs/introduction\" },\n {\n label: \"Hello\",\n href: \"https://github.com/devclub-nstru/component_library/issues\",\n },\n];\n\nconst DEFAULT_FOOTER_LINKS: readonly CurtainNavbarLink[] = [\n {\n label: \"GitHub\",\n href: \"https://github.com/devclub-nstru/component_library\",\n },\n { label: \"Installation\", href: \"/docs/installation\" },\n { label: \"Dev Club\", href: \"https://devclub.co\" },\n];\n\nconst clamp = (value: number, min: number, max: number, fallback: number) =>\n Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback;\n\nfunction MenuMark({ open }: { open: boolean }) {\n const rootRef = useRef(null);\n const animateRef = useRef<((next: boolean) => void) | null>(null);\n const openRef = useRef(open);\n useEffect(() => {\n openRef.current = open;\n }, [open]);\n useGSAP(\n () => {\n const media = gsap.matchMedia();\n media.add(\n { reduced: \"(prefers-reduced-motion: reduce)\", all: \"all\" },\n (context) => {\n const animate = context.add(\"animate\", (next: boolean) =>\n gsap.to(rootRef.current, {\n rotation: next ? 135 : 0,\n duration: context.conditions?.reduced ? 0 : 0.45,\n ease: \"power3.inOut\",\n overwrite: \"auto\",\n }),\n );\n animateRef.current = (next) => animate(next);\n animate(openRef.current);\n return () => {\n animateRef.current = null;\n };\n },\n );\n return () => media.revert();\n },\n { scope: rootRef },\n );\n useGSAP(\n () => {\n animateRef.current?.(open);\n },\n { scope: rootRef, dependencies: [open] },\n );\n return (\n \n {[0, 1, 2, 3].map((index) => (\n \n ))}\n \n );\n}\n\nfunction HeaderLink({\n link,\n onNavigate,\n duration,\n}: {\n link: CurtainNavbarLink;\n onNavigate?: () => void;\n duration: number;\n}) {\n const glitchRef = useRef(null);\n return (\n {\n if (event.pointerType === \"mouse\") glitchRef.current?.trigger();\n }}\n onPointerLeave={() => glitchRef.current?.reset()}\n onFocus={() => glitchRef.current?.trigger()}\n onBlur={() => glitchRef.current?.reset()}\n className=\"rounded-sm opacity-70 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-current\"\n >\n span]:w-[1ch] [&>span]:font-mono [&>span]:text-inherit [&>span]:transition-none\"\n />\n \n );\n}\n\nfunction CurtainHeader({\n brand,\n brandHref,\n logo,\n quickLinks,\n button,\n onNavigate,\n background,\n foreground,\n glitchDuration,\n}: {\n brand: string;\n brandHref: string;\n logo?: ReactNode;\n quickLinks: readonly CurtainNavbarLink[];\n button: ReactNode;\n onNavigate?: () => void;\n background: string;\n foreground: string;\n glitchDuration: number;\n}) {\n return (\n \n \n {logo && (\n \n {logo}\n \n )}\n {brand}\n \n \n \n {quickLinks.map((link) => (\n \n ))}\n \n {button}\n
\n \n );\n}\n\ntype CurtainSettings = Required<\n Omit<\n CurtainNavbarProps,\n \"logo\" | \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"className\"\n >\n> &\n Pick;\n\nfunction CurtainPanel({\n open,\n onClose,\n onExit,\n settings,\n}: {\n open: boolean;\n onClose: () => void;\n onExit: () => void;\n settings: CurtainSettings;\n}) {\n const rootRef = useRef(null);\n const sheetRef = useRef(null);\n const closeRef = useRef(null);\n const moveRef = useRef<((next: boolean) => void) | null>(null);\n const openRef = useRef(open);\n const enteredRef = useRef(false);\n const {\n brand,\n brandHref,\n logo,\n items,\n footerLinks,\n leftNote,\n rightNote,\n footerText,\n background,\n foreground,\n headerBackground,\n headerForeground,\n duration,\n stagger,\n hoverDuration,\n closeSpeed,\n glitchDuration,\n hoverScroll,\n scrollDuration,\n contained,\n } = settings;\n\n useEffect(() => {\n openRef.current = open;\n }, [open]);\n\n useGSAP(\n () => {\n const root = rootRef.current;\n const sheet = sheetRef.current;\n if (!root || !sheet) return;\n const titles = root.querySelectorAll(\"[data-curtain-title]\");\n const notes = root.querySelectorAll(\"[data-curtain-note]\");\n const nav = root.querySelector(\"[data-curtain-nav]\");\n const scroller = root.querySelector(\"[data-curtain-scroll]\");\n const media = gsap.matchMedia();\n media.add(\n {\n reduced: \"(prefers-reduced-motion: reduce)\",\n pointer: \"(hover: hover) and (pointer: fine)\",\n all: \"all\",\n },\n (context) => {\n const reduced = Boolean(context.conditions?.reduced);\n gsap.set(sheet, {\n y: 0,\n yPercent: 100,\n borderTopLeftRadius: 32,\n borderTopRightRadius: 32,\n });\n gsap.set(titles, { y: 0, yPercent: 115 });\n gsap.set(notes, { opacity: 0, y: 10 });\n const timeline = gsap\n .timeline({\n paused: true,\n onComplete: () => {\n enteredRef.current = true;\n },\n onReverseComplete: onExit,\n })\n .to(\n sheet,\n {\n yPercent: 0,\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n duration,\n ease: \"power4.inOut\",\n },\n 0,\n )\n .to(\n titles,\n {\n y: 0,\n yPercent: 0,\n duration: duration * 0.75,\n stagger,\n ease: \"power4.out\",\n },\n duration * 0.3,\n )\n .to(\n notes,\n {\n opacity: 1,\n y: 0,\n duration: duration * 0.4,\n stagger: 0.02,\n ease: \"power3.out\",\n },\n duration * 0.6,\n );\n let selected: HTMLElement | null = null;\n let pointer: { x: number; y: number } | null = null;\n const scrollTo =\n scroller && !reduced\n ? gsap.quickTo(scroller, \"scrollTop\", {\n duration: scrollDuration,\n ease: \"power3.out\",\n })\n : null;\n const select = context.add(\"select\", (row: HTMLElement | null) => {\n if (selected === row) return;\n if (selected) {\n gsap.to(selected.querySelector(\"[data-curtain-word]\"), {\n opacity: 1,\n x: 0,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n });\n gsap.to(selected.querySelectorAll(\"[data-curtain-detail]\"), {\n autoAlpha: 0,\n y: reduced ? 0 : -8,\n duration: reduced ? 0 : hoverDuration * 0.7,\n ease: \"power2.out\",\n overwrite: \"auto\",\n });\n }\n selected = row;\n if (!row) return;\n gsap.to(row.querySelector(\"[data-curtain-word]\"), {\n opacity: 0.45,\n x: reduced ? 0 : 5,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n });\n gsap.fromTo(\n row.querySelectorAll(\"[data-curtain-detail]\"),\n { autoAlpha: 0, y: reduced ? 0 : 8 },\n {\n autoAlpha: 1,\n y: 0,\n duration: reduced ? 0 : hoverDuration,\n ease: \"power3.out\",\n overwrite: \"auto\",\n },\n );\n });\n const point = (event: Event) => {\n if (event instanceof PointerEvent && event.pointerType !== \"mouse\")\n return;\n const row =\n event.target instanceof Element\n ? event.target.closest(\"[data-curtain-row]\")\n : null;\n if (row && nav?.contains(row)) select(row);\n };\n const scroll = (event: PointerEvent) => {\n if (event.pointerType === \"mouse\")\n pointer = { x: event.clientX, y: event.clientY };\n if (\n !scroller ||\n !scrollTo ||\n !hoverScroll ||\n !context.conditions?.pointer ||\n event.pointerType !== \"mouse\" ||\n !openRef.current ||\n !enteredRef.current\n )\n return;\n const bounds = scroller.getBoundingClientRect();\n const progress = gsap.utils.clamp(\n 0,\n 1,\n (event.clientY - bounds.top - 24) /\n Math.max(1, bounds.height - 48),\n );\n scrollTo(\n progress *\n Math.max(0, scroller.scrollHeight - scroller.clientHeight),\n scroller.scrollTop,\n );\n };\n const stopScroll = () => scrollTo?.tween.pause();\n const syncHover = () => {\n if (!pointer || nav?.contains(document.activeElement)) return;\n const target = document.elementFromPoint(pointer.x, pointer.y);\n const row =\n target?.closest(\"[data-curtain-row]\") ?? null;\n select(row && nav?.contains(row) ? row : null);\n };\n const leaveScroll = () => {\n pointer = null;\n stopScroll();\n };\n const focusScroll = (event: FocusEvent) => {\n if (!scroller || !(event.target instanceof HTMLElement)) return;\n stopScroll();\n const bounds = scroller.getBoundingClientRect();\n const target = event.target.getBoundingClientRect();\n const offset =\n target.top < bounds.top + 12\n ? target.top - bounds.top - 12\n : target.bottom > bounds.bottom - 12\n ? target.bottom - bounds.bottom + 12\n : 0;\n if (offset === 0) return;\n const next = gsap.utils.clamp(\n 0,\n Math.max(0, scroller.scrollHeight - scroller.clientHeight),\n scroller.scrollTop + offset,\n );\n if (scrollTo) scrollTo(next, scroller.scrollTop);\n else scroller.scrollTop = next;\n };\n const leave = () => {\n if (!nav?.contains(document.activeElement)) select(null);\n };\n const blur = (event: FocusEvent) => {\n if (\n !(event.relatedTarget instanceof Node) ||\n !nav?.contains(event.relatedTarget)\n )\n select(null);\n };\n nav?.addEventListener(\"pointerover\", point);\n nav?.addEventListener(\"focusin\", point);\n nav?.addEventListener(\"pointerleave\", leave);\n nav?.addEventListener(\"focusout\", blur);\n scroller?.addEventListener(\"pointermove\", scroll, { passive: true });\n scroller?.addEventListener(\"pointerleave\", leaveScroll);\n scroller?.addEventListener(\"scroll\", syncHover, { passive: true });\n scroller?.addEventListener(\"wheel\", stopScroll, { passive: true });\n scroller?.addEventListener(\"touchstart\", stopScroll, {\n passive: true,\n });\n scroller?.addEventListener(\"focusin\", focusScroll);\n const move = context.add(\"move\", (next: boolean) => {\n if (!next) stopScroll();\n if (reduced) {\n timeline.progress(1).pause();\n if (!next) onExit();\n } else if (next) timeline.timeScale(1).play();\n else if (timeline.progress() === 0) onExit();\n else timeline.timeScale(closeSpeed).reverse();\n });\n moveRef.current = (next) => move(next);\n if (enteredRef.current && openRef.current)\n timeline.progress(1).pause();\n else move(openRef.current);\n return () => {\n moveRef.current = null;\n nav?.removeEventListener(\"pointerover\", point);\n nav?.removeEventListener(\"focusin\", point);\n nav?.removeEventListener(\"pointerleave\", leave);\n nav?.removeEventListener(\"focusout\", blur);\n scroller?.removeEventListener(\"pointermove\", scroll);\n scroller?.removeEventListener(\"pointerleave\", leaveScroll);\n scroller?.removeEventListener(\"scroll\", syncHover);\n scroller?.removeEventListener(\"wheel\", stopScroll);\n scroller?.removeEventListener(\"touchstart\", stopScroll);\n scroller?.removeEventListener(\"focusin\", focusScroll);\n };\n },\n );\n return () => media.revert();\n },\n {\n scope: rootRef,\n dependencies: [\n duration,\n stagger,\n hoverDuration,\n closeSpeed,\n hoverScroll,\n scrollDuration,\n items,\n onExit,\n ],\n revertOnUpdate: true,\n },\n );\n\n useGSAP(\n () => {\n moveRef.current?.(open);\n },\n { scope: rootRef, dependencies: [open] },\n );\n\n return (\n {\n event.preventDefault();\n closeRef.current?.focus({ preventScroll: true });\n }}\n onEscapeKeyDown={(event) => {\n event.preventDefault();\n onClose();\n }}\n onPointerDownOutside={(event) => event.preventDefault()}\n >\n {brand} navigation\n \n Explore Dev Club components, documentation, and community resources.\n \n \n \n {leftNote}\n \n \n {rightNote}\n \n \n \n {items.map((item, index) => (\n \n \n \n {item.category}\n \n {item.detail}\n \n \n \n \n \n {item.label}\n \n \n \n \n \n {item.description}\n \n \n ))}\n \n {footerLinks.map((link) => (\n \n {link.label}\n \n ))}\n \n \n \n \n {footerText}
\n Dev Club ©\n \n \n \n \n \n }\n />\n \n );\n}\n\nexport function CurtainNavbar({\n brand = \"devclub\",\n brandHref = \"/\",\n logo,\n items = CURTAIN_NAVBAR_ITEMS,\n quickLinks = DEFAULT_QUICK_LINKS,\n footerLinks = DEFAULT_FOOTER_LINKS,\n leftNote = \"A community of builders.\\nOpen source. Open minds.\",\n rightNote = \"Made by Dev Club.\\nBuilt for the web.\",\n footerText = \"Thoughtful interfaces.\\nMotion with purpose.\",\n background = \"#67df32\",\n foreground = \"#161616\",\n headerBackground = \"#222222b3\",\n headerForeground = \"#ffffff\",\n duration = 0.85,\n stagger = 0.045,\n hoverDuration = 0.35,\n closeSpeed = 1.2,\n glitchDuration = 0.55,\n hoverScroll = true,\n scrollDuration = 0.8,\n contained = false,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n className,\n}: CurtainNavbarProps) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = controlledOpen ?? internalOpen;\n const [present, setPresent] = useState(open);\n const [host, setHost] = useState(null);\n const finishExit = useCallback(() => setPresent(false), []);\n if (open && !present) setPresent(true);\n const changeOpen = (next: boolean) => {\n if (controlledOpen === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n };\n const settings: CurtainSettings = {\n brand,\n brandHref,\n logo,\n items,\n quickLinks,\n footerLinks,\n leftNote,\n rightNote,\n footerText,\n background,\n foreground,\n headerBackground,\n headerForeground,\n duration: clamp(duration, 0.3, 1.6, 0.85),\n stagger: clamp(stagger, 0, 0.12, 0.045),\n hoverDuration: clamp(hoverDuration, 0.15, 0.8, 0.35),\n closeSpeed: clamp(closeSpeed, 0.7, 2, 1.2),\n glitchDuration: clamp(glitchDuration, 0.15, 1.2, 0.55),\n hoverScroll,\n scrollDuration: clamp(scrollDuration, 0.2, 1.5, 0.8),\n contained,\n };\n return (\n \n \n \n \n \n \n \n \n }\n />\n
\n \n changeOpen(false)}\n onExit={finishExit}\n settings={settings}\n />\n \n \n \n );\n}\n\nexport default CurtainNavbar;\n"
},
{
"name": "ascii-hover-button.tsx",
"path": "src/registry/ui/ascii-hover-button.tsx",
"code": "\"use client\";\n\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { cn } from \"@/lib/utils\";\n\ngsap.registerPlugin(useGSAP);\n\nexport type AsciiHoverColor =\n | \"default\"\n | \"emerald\"\n | \"blue\"\n | \"violet\"\n | \"amber\"\n | \"rose\"\n | \"cyan\";\n\nexport interface AsciiColorPalette {\n dark: {\n text: string;\n glow: string;\n };\n light: {\n text: string;\n glow: string;\n };\n}\n\nconst COLOR_PALETTES: Record = {\n default: {\n dark: {\n text: \"#ffffff\",\n glow: \"rgba(255, 255, 255, 0.4)\",\n },\n light: {\n text: \"#09090b\",\n glow: \"rgba(0, 0, 0, 0.12)\",\n },\n },\n emerald: {\n dark: {\n text: \"#34d399\",\n glow: \"rgba(52, 211, 153, 0.45)\",\n },\n light: {\n text: \"#059669\",\n glow: \"rgba(5, 150, 105, 0.25)\",\n },\n },\n blue: {\n dark: {\n text: \"#60a5fa\",\n glow: \"rgba(96, 165, 250, 0.45)\",\n },\n light: {\n text: \"#2563eb\",\n glow: \"rgba(37, 99, 235, 0.25)\",\n },\n },\n violet: {\n dark: {\n text: \"#a78bfa\",\n glow: \"rgba(167, 139, 250, 0.45)\",\n },\n light: {\n text: \"#7c3aed\",\n glow: \"rgba(124, 58, 237, 0.25)\",\n },\n },\n cyan: {\n dark: {\n text: \"#38bdf8\",\n glow: \"rgba(56, 189, 248, 0.45)\",\n },\n light: {\n text: \"#0284c7\",\n glow: \"rgba(2, 132, 199, 0.25)\",\n },\n },\n amber: {\n dark: {\n text: \"#fbbf24\",\n glow: \"rgba(251, 191, 36, 0.45)\",\n },\n light: {\n text: \"#d97706\",\n glow: \"rgba(217, 119, 6, 0.25)\",\n },\n },\n rose: {\n dark: {\n text: \"#fb7185\",\n glow: \"rgba(251, 113, 133, 0.45)\",\n },\n light: {\n text: \"#e11d48\",\n glow: \"rgba(225, 29, 72, 0.25)\",\n },\n },\n};\n\nconst DEFAULT_ASCII_CHARS = \"!<>-_\\\\/[]{}—=+*^?#_$%&~:;0123456789\";\n\nexport interface AsciiGlitchTextHandle {\n trigger: () => void;\n reset: () => void;\n}\n\nexport interface AsciiGlitchTextProps {\n text: string;\n isHovered?: boolean;\n active?: boolean;\n color?: AsciiHoverColor | string;\n duration?: number;\n asciiChars?: string;\n className?: string;\n}\n\nexport const AsciiGlitchText = React.forwardRef<\n AsciiGlitchTextHandle,\n AsciiGlitchTextProps\n>(\n (\n {\n text,\n isHovered = false,\n active = false,\n color = \"default\",\n duration = 0.75,\n asciiChars = DEFAULT_ASCII_CHARS,\n className,\n },\n ref,\n ) => {\n const [displayChars, setDisplayChars] = useState(() =>\n text.split(\"\"),\n );\n const [prevText, setPrevText] = useState(text);\n const progressRef = useRef({ progress: 0 });\n const lastUpdateRef = useRef(0);\n const tweenRef = useRef(null);\n\n if (prevText !== text) {\n setPrevText(text);\n setDisplayChars(text.split(\"\"));\n }\n\n const isPresetColor = color in COLOR_PALETTES;\n const isCustomColor = !isPresetColor && Boolean(color);\n\n const triggerGlitch = useCallback(() => {\n if (typeof window === \"undefined\") return;\n\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n\n const reduceMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\",\n ).matches;\n\n if (reduceMotion) {\n setDisplayChars(text.split(\"\"));\n return;\n }\n\n progressRef.current.progress = 0;\n lastUpdateRef.current = 0;\n const chars = text.split(\"\");\n const total = chars.length;\n const glyphs = asciiChars || DEFAULT_ASCII_CHARS;\n\n tweenRef.current = gsap.to(progressRef.current, {\n progress: 1,\n duration,\n ease: \"power2.out\",\n onUpdate: () => {\n const now = performance.now();\n const p = progressRef.current.progress;\n\n const shouldRegenerate =\n now - lastUpdateRef.current >= 45 || p >= 0.98;\n if (!shouldRegenerate && p < 0.98) return;\n lastUpdateRef.current = now;\n\n const updated = chars.map((char, index) => {\n if (char === \" \") return \" \";\n const threshold = (index + 0.6) / (total + 0.4);\n if (p >= threshold) {\n return char;\n }\n const randomIndex = Math.floor(Math.random() * glyphs.length);\n return glyphs[randomIndex];\n });\n setDisplayChars(updated);\n },\n onComplete: () => {\n setDisplayChars(chars);\n },\n });\n }, [text, duration, asciiChars]);\n\n const resetGlitch = useCallback(() => {\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n setDisplayChars(text.split(\"\"));\n }, [text]);\n\n useImperativeHandle(\n ref,\n () => ({\n trigger: triggerGlitch,\n reset: resetGlitch,\n }),\n [triggerGlitch, resetGlitch],\n );\n\n useEffect(() => {\n if (isHovered) {\n const frame = requestAnimationFrame(() => {\n triggerGlitch();\n });\n return () => cancelAnimationFrame(frame);\n }\n }, [isHovered, triggerGlitch]);\n\n useEffect(() => {\n return () => {\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n };\n }, []);\n\n const highlighted = isHovered || active;\n\n const customColorStyle = useMemo(() => {\n if (!highlighted) return undefined;\n if (isCustomColor) {\n return {\n color,\n textShadow: `0 0 10px ${color}80`,\n };\n }\n return undefined;\n }, [highlighted, isCustomColor, color]);\n\n const originalChars = useMemo(() => text.split(\"\"), [text]);\n\n return (\n \n {displayChars.map((char, index) => {\n const isGlitching = char !== originalChars[index];\n\n return (\n \n {char === \" \" ? \"\\u00A0\" : char}\n \n );\n })}\n \n );\n },\n);\n\nAsciiGlitchText.displayName = \"AsciiGlitchText\";\n\nexport type AsciiHoverButtonVariant =\n | \"segmented\"\n | \"card\"\n | \"outline\"\n | \"ghost\";\n\nexport type AsciiHoverButtonSize = \"sm\" | \"default\" | \"lg\";\n\nexport interface AsciiHoverButtonProps extends Omit<\n React.ButtonHTMLAttributes,\n \"color\"\n> {\n text?: string;\n variant?: AsciiHoverButtonVariant;\n size?: AsciiHoverButtonSize;\n color?: AsciiHoverColor | string;\n active?: boolean;\n asciiChars?: string;\n scrambleDuration?: number;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n}\n\nconst sizeStyles: Record = {\n sm: \"h-9 px-3.5 text-xs gap-1.5 rounded-xl\",\n default: \"h-11 px-5 text-sm gap-2 rounded-2xl\",\n lg: \"h-13 px-7 text-base gap-2.5 rounded-2xl\",\n};\n\nexport const AsciiHoverButton = React.forwardRef<\n HTMLButtonElement,\n AsciiHoverButtonProps\n>(\n (\n {\n text = \"Explore\",\n children,\n variant = \"segmented\",\n size = \"default\",\n color = \"default\",\n active = false,\n asciiChars = DEFAULT_ASCII_CHARS,\n scrambleDuration = 0.75,\n leftIcon,\n rightIcon,\n className,\n disabled,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref,\n ) => {\n const [isHovered, setIsHovered] = useState(false);\n const glitchRef = useRef(null);\n\n const handleMouseEnter = (e: React.MouseEvent) => {\n if (disabled) return;\n setIsHovered(true);\n glitchRef.current?.trigger();\n onMouseEnter?.(e);\n };\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeave?.(e);\n };\n\n const buttonText = typeof children === \"string\" ? children : text;\n\n return (\n \n {leftIcon && (\n \n {leftIcon}\n \n )}\n \n {rightIcon && (\n \n {rightIcon}\n \n )}\n \n );\n },\n);\n\nAsciiHoverButton.displayName = \"AsciiHoverButton\";\n\nexport default AsciiHoverButton;\n",
"content": "\"use client\";\n\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\nimport { cn } from \"@/lib/utils\";\n\ngsap.registerPlugin(useGSAP);\n\nexport type AsciiHoverColor =\n | \"default\"\n | \"emerald\"\n | \"blue\"\n | \"violet\"\n | \"amber\"\n | \"rose\"\n | \"cyan\";\n\nexport interface AsciiColorPalette {\n dark: {\n text: string;\n glow: string;\n };\n light: {\n text: string;\n glow: string;\n };\n}\n\nconst COLOR_PALETTES: Record = {\n default: {\n dark: {\n text: \"#ffffff\",\n glow: \"rgba(255, 255, 255, 0.4)\",\n },\n light: {\n text: \"#09090b\",\n glow: \"rgba(0, 0, 0, 0.12)\",\n },\n },\n emerald: {\n dark: {\n text: \"#34d399\",\n glow: \"rgba(52, 211, 153, 0.45)\",\n },\n light: {\n text: \"#059669\",\n glow: \"rgba(5, 150, 105, 0.25)\",\n },\n },\n blue: {\n dark: {\n text: \"#60a5fa\",\n glow: \"rgba(96, 165, 250, 0.45)\",\n },\n light: {\n text: \"#2563eb\",\n glow: \"rgba(37, 99, 235, 0.25)\",\n },\n },\n violet: {\n dark: {\n text: \"#a78bfa\",\n glow: \"rgba(167, 139, 250, 0.45)\",\n },\n light: {\n text: \"#7c3aed\",\n glow: \"rgba(124, 58, 237, 0.25)\",\n },\n },\n cyan: {\n dark: {\n text: \"#38bdf8\",\n glow: \"rgba(56, 189, 248, 0.45)\",\n },\n light: {\n text: \"#0284c7\",\n glow: \"rgba(2, 132, 199, 0.25)\",\n },\n },\n amber: {\n dark: {\n text: \"#fbbf24\",\n glow: \"rgba(251, 191, 36, 0.45)\",\n },\n light: {\n text: \"#d97706\",\n glow: \"rgba(217, 119, 6, 0.25)\",\n },\n },\n rose: {\n dark: {\n text: \"#fb7185\",\n glow: \"rgba(251, 113, 133, 0.45)\",\n },\n light: {\n text: \"#e11d48\",\n glow: \"rgba(225, 29, 72, 0.25)\",\n },\n },\n};\n\nconst DEFAULT_ASCII_CHARS = \"!<>-_\\\\/[]{}—=+*^?#_$%&~:;0123456789\";\n\nexport interface AsciiGlitchTextHandle {\n trigger: () => void;\n reset: () => void;\n}\n\nexport interface AsciiGlitchTextProps {\n text: string;\n isHovered?: boolean;\n active?: boolean;\n color?: AsciiHoverColor | string;\n duration?: number;\n asciiChars?: string;\n className?: string;\n}\n\nexport const AsciiGlitchText = React.forwardRef<\n AsciiGlitchTextHandle,\n AsciiGlitchTextProps\n>(\n (\n {\n text,\n isHovered = false,\n active = false,\n color = \"default\",\n duration = 0.75,\n asciiChars = DEFAULT_ASCII_CHARS,\n className,\n },\n ref,\n ) => {\n const [displayChars, setDisplayChars] = useState(() =>\n text.split(\"\"),\n );\n const [prevText, setPrevText] = useState(text);\n const progressRef = useRef({ progress: 0 });\n const lastUpdateRef = useRef(0);\n const tweenRef = useRef(null);\n\n if (prevText !== text) {\n setPrevText(text);\n setDisplayChars(text.split(\"\"));\n }\n\n const isPresetColor = color in COLOR_PALETTES;\n const isCustomColor = !isPresetColor && Boolean(color);\n\n const triggerGlitch = useCallback(() => {\n if (typeof window === \"undefined\") return;\n\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n\n const reduceMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\",\n ).matches;\n\n if (reduceMotion) {\n setDisplayChars(text.split(\"\"));\n return;\n }\n\n progressRef.current.progress = 0;\n lastUpdateRef.current = 0;\n const chars = text.split(\"\");\n const total = chars.length;\n const glyphs = asciiChars || DEFAULT_ASCII_CHARS;\n\n tweenRef.current = gsap.to(progressRef.current, {\n progress: 1,\n duration,\n ease: \"power2.out\",\n onUpdate: () => {\n const now = performance.now();\n const p = progressRef.current.progress;\n\n const shouldRegenerate =\n now - lastUpdateRef.current >= 45 || p >= 0.98;\n if (!shouldRegenerate && p < 0.98) return;\n lastUpdateRef.current = now;\n\n const updated = chars.map((char, index) => {\n if (char === \" \") return \" \";\n const threshold = (index + 0.6) / (total + 0.4);\n if (p >= threshold) {\n return char;\n }\n const randomIndex = Math.floor(Math.random() * glyphs.length);\n return glyphs[randomIndex];\n });\n setDisplayChars(updated);\n },\n onComplete: () => {\n setDisplayChars(chars);\n },\n });\n }, [text, duration, asciiChars]);\n\n const resetGlitch = useCallback(() => {\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n setDisplayChars(text.split(\"\"));\n }, [text]);\n\n useImperativeHandle(\n ref,\n () => ({\n trigger: triggerGlitch,\n reset: resetGlitch,\n }),\n [triggerGlitch, resetGlitch],\n );\n\n useEffect(() => {\n if (isHovered) {\n const frame = requestAnimationFrame(() => {\n triggerGlitch();\n });\n return () => cancelAnimationFrame(frame);\n }\n }, [isHovered, triggerGlitch]);\n\n useEffect(() => {\n return () => {\n if (tweenRef.current) {\n tweenRef.current.kill();\n }\n };\n }, []);\n\n const highlighted = isHovered || active;\n\n const customColorStyle = useMemo(() => {\n if (!highlighted) return undefined;\n if (isCustomColor) {\n return {\n color,\n textShadow: `0 0 10px ${color}80`,\n };\n }\n return undefined;\n }, [highlighted, isCustomColor, color]);\n\n const originalChars = useMemo(() => text.split(\"\"), [text]);\n\n return (\n \n {displayChars.map((char, index) => {\n const isGlitching = char !== originalChars[index];\n\n return (\n \n {char === \" \" ? \"\\u00A0\" : char}\n \n );\n })}\n \n );\n },\n);\n\nAsciiGlitchText.displayName = \"AsciiGlitchText\";\n\nexport type AsciiHoverButtonVariant =\n | \"segmented\"\n | \"card\"\n | \"outline\"\n | \"ghost\";\n\nexport type AsciiHoverButtonSize = \"sm\" | \"default\" | \"lg\";\n\nexport interface AsciiHoverButtonProps extends Omit<\n React.ButtonHTMLAttributes,\n \"color\"\n> {\n text?: string;\n variant?: AsciiHoverButtonVariant;\n size?: AsciiHoverButtonSize;\n color?: AsciiHoverColor | string;\n active?: boolean;\n asciiChars?: string;\n scrambleDuration?: number;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n}\n\nconst sizeStyles: Record = {\n sm: \"h-9 px-3.5 text-xs gap-1.5 rounded-xl\",\n default: \"h-11 px-5 text-sm gap-2 rounded-2xl\",\n lg: \"h-13 px-7 text-base gap-2.5 rounded-2xl\",\n};\n\nexport const AsciiHoverButton = React.forwardRef<\n HTMLButtonElement,\n AsciiHoverButtonProps\n>(\n (\n {\n text = \"Explore\",\n children,\n variant = \"segmented\",\n size = \"default\",\n color = \"default\",\n active = false,\n asciiChars = DEFAULT_ASCII_CHARS,\n scrambleDuration = 0.75,\n leftIcon,\n rightIcon,\n className,\n disabled,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref,\n ) => {\n const [isHovered, setIsHovered] = useState(false);\n const glitchRef = useRef(null);\n\n const handleMouseEnter = (e: React.MouseEvent) => {\n if (disabled) return;\n setIsHovered(true);\n glitchRef.current?.trigger();\n onMouseEnter?.(e);\n };\n\n const handleMouseLeave = (e: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeave?.(e);\n };\n\n const buttonText = typeof children === \"string\" ? children : text;\n\n return (\n \n {leftIcon && (\n \n {leftIcon}\n \n )}\n \n {rightIcon && (\n \n {rightIcon}\n \n )}\n \n );\n },\n);\n\nAsciiHoverButton.displayName = \"AsciiHoverButton\";\n\nexport default AsciiHoverButton;\n",
"type": "registry:ui",
"target": "@ui/ascii-hover-button.tsx"
}
]
}