4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T1737,'use client'; import { motion } from 'framer-motion'; import React, { useId, type ReactNode } from 'react'; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- // // children Content layered above the beams (headline, CTA, etc.) // className Styles for the content wrapper // containerClassName Styles for the outer shell (size, layout) // backgroundFill Solid color behind the SVG (any CSS color) // colors Neon stroke stops — [start, mid, end] hex colors // type NeonFlowBackgroundProps = { children?: ReactNode; className?: string; containerClassName?: string; backgroundFill?: string; colors?: string[]; }; // --------------------------------------------------------------------------- // Curved path geometry for the beam field // --------------------------------------------------------------------------- const PATHS = [ 'M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875', 'M-358 -213C-358 -213 -290 192 174 319C638 446 706 851 706 851', 'M-336 -237C-336 -237 -268 168 196 295C660 422 728 827 728 827', 'M-314 -261C-314 -261 -246 144 218 271C682 398 750 803 750 803', 'M-292 -285C-292 -285 -224 120 240 247C704 374 772 779 772 779', 'M-270 -309C-270 -309 -202 96 262 223C726 350 794 755 794 755', 'M-248 -333C-248 -333 -180 72 284 199C748 326 816 731 816 731', 'M-226 -357C-226 -357 -158 48 306 175C770 302 838 707 838 707', 'M-204 -381C-204 -381 -136 24 328 151C792 278 860 683 860 683', 'M-182 -405C-182 -405 -114 0 350 127C814 254 882 659 882 659', 'M-160 -429C-160 -429 -92 -24 372 103C836 230 904 635 904 635', 'M-138 -453C-138 -453 -70 -48 394 79C858 206 926 611 926 611', 'M-116 -477C-116 -477 -48 -72 416 55C880 182 948 587 948 587', 'M-94 -501C-94 -501 -26 -96 438 31C902 158 970 563 970 563', 'M-72 -525C-72 -525 -4 -120 460 7C924 134 992 539 992 539', 'M-50 -549C-50 -549 18 -144 482 -17C946 110 1014 515 1014 515', 'M-28 -573C-28 -573 40 -168 504 -41C968 86 1036 491 1036 491', 'M-6 -597C-6 -597 62 -192 526 -65C990 62 1058 467 1058 467', 'M16 -621C16 -621 84 -216 548 -89C1012 38 1080 443 1080 443', 'M38 -645C38 -645 106 -240 570 -113C1034 14 1102 419 1102 419', ]; // Stagger duration / delay so beams don't fire in sync const BEAM_TIMING = PATHS.map((_, i) => ({ duration: 4 + (i % 5) * 0.8, delay: i * 0.15, })); const DEFAULT_COLORS = ['#18CCFC', '#6344F5', '#AE48FF']; export default function NeonFlowBackground({ children, className = '', containerClassName = '', backgroundFill = '#0a0a0a', colors = DEFAULT_COLORS, }: NeonFlowBackgroundProps) { const uid = useId().replace(/:/g, ''); const [start, mid, end] = [ colors[0] ?? DEFAULT_COLORS[0], colors[1] ?? colors[0] ?? DEFAULT_COLORS[1], colors[2] ?? colors[1] ?? colors[0] ?? DEFAULT_COLORS[2], ]; return (

{/* ----------------------------------------------------------------- */} {/* SVG beam field — flipped + tilted so flow reads top-right → left */} {/* ----------------------------------------------------------------- */} {/* ----------------------------------------------------------------- */} {/* Content above beams */} {/* ----------------------------------------------------------------- */}

{children}

); } 49:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","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":"framer-motion"}]]}]}]]}],["$","$L4a",null,{"namespace":"@uniquel","registryDependencies":[]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/backgrounds/NeonFlowBackground.tsx","content":"$4c","type":"registry:component","target":"@components/backgrounds/NeonFlowBackground.tsx"}],"className":"h-[70svh] min-h-80"}]]}]