27:o1,#27:oe57,1:I[768017,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"HTTPAccessFallbackBoundary"] 2:I[479520,["/_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"],""] 3:I[305215,["/_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"],"ThemeProvider"] 4:"$Sreact.suspense" 5:I[357003,["/_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"],"TRPCReactProvider"] 6:I[492605,["/_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"],"BetterModalProvider"] 7:I[12985,["/_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"],"NuqsAdapter"] :HL["/_next/static/immutable/chunks/3-y5jlwadbcp9.css","style"] :HL["/_next/static/immutable/chunks/1_idk1l4ecx9m.css","style"] 16:X 17:X 1c:X 1d:X 1f:X 20:X 21:X 27:o1422,0:{"f":[[["",{"children":[["registry","registrydirectory","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","snapcn-block-wordmark","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16546]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450],"modal":["(__SLOT__)",{"children":[["registry","registrydirectory","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","snapcn-block-wordmark","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16418]},"$undefined","$undefined",16482]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450]},"$undefined","$undefined",16402],[["$","$L1","c",{"notFound":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3-y5jlwadbcp9.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/1_idk1l4ecx9m.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/3arlv5bvukoo2.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/39v64hmfyo-sr.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/2nvof3-29tvc3.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/3tjobt77z_9dj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/04j_o97cgxn2x.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/3upr08c9vtj8w.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/1ww0328si-u8x.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/immutable/chunks/11mfl5ymqld9-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/immutable/chunks/2xxcqy6ppds3l.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/immutable/chunks/1bpgyrs5qflhu.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/_next/static/immutable/chunks/43_s7jweyypoh.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/_next/static/immutable/chunks/0p6vao205o1jc.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],"$L8"]}],"$L9","$La"]}]}],"$Lb","$Lc"],"$Ld","$Le","$undefined","$Lf"]}]}],"$L10","$L11"]}]}]}]}]}]]}]],"children":["$0:f:0:1:0:props:notFound:0","$L12"]}],{"children":["$L13",{"children":["$L14",{"children":["$L15",{},null,false,"$16"]},null,false,"$17"]},null,false,"$17"],"modal":["$L18",{"children":["$L19",{"children":["$L1a",{"children":["$L1b",{},null,false,"$1c"]},null,false,"$17"]},null,false,"$17"]},null,false,"$17"]},null,false,"$1d"],"$L1e",false]],"q":"","i":true,"S":false,"h":"$1f","r":"$20","s":"$21","a":"$@22","u":"$@23"} 27:o1000,24:I[522016,["/_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"],""] 25:I[332862,["/_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"],"ThemeToggle"] 26:I[618898,["/_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"],"UserButton"] 27:I[799157,["/_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"],"Sheet"] 28:I[799157,["/_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"],"SheetTrigger"] 29:I[799157,["/_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","/_ne27:o1000,xt/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetContent"] 2a:I[799157,["/_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"],"SheetTitle"] 2b:I[799157,["/_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"],"SheetDescription"] 2c:I[767877,["/_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"],"PrimaryNavigation"] 35:I[246331,["/_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"],"Toaster"] 36:I[994245,["/_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"],"AffiliateToast"] 40:"$Sreact.fragment" 41:I[339756,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 42:I[837457,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 44:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"OutletBoundary"] 46:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"ViewportBoundary"] 48:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"MetadataBoundary"] 8:["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}] 9:["$","span",null,{"className":"truncate","children":[["$","sp27:o3ac,an",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}] a:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 27:o7b3,b:["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o7dd,c:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o1368,d:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L24",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}],["$","$L27",null,{"modal":true,"children":[["$","$L28",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L29",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2a",null,{"className":"text-lg","children":"Tools"}],["$","$L2b",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2c",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L24",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L2d","$L2e","$L2f","$L30","$L31"]}],"$L32"]}],"$L33","$L34"]}]}]] 27:o6a2,e:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":[[],[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"$e:props:children:props:children:0"]]}]}] f:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L24",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L24",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 10:["$","$L35",null,{}] 11:["$","$L36",null,{}] 27:o103e,12:["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}],["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],"$L37"]}],"$L38"]}]}],"$L39"],"$L3a","$L3b","$L3c","$L3d"]}]}],"$L3e","$L3f"]}]}]}]}]}]]}] 27:o2a0,13:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 14:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 27:odfc,15:["$","$40","c",{"children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-col py-8","children":["$","$4",null,{"fallback":["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col motion-reduce:[&_*]:animate-none","role":"status","aria-label":"Loading item","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md mb-6 h-5 w-64 max-w-full","aria-hidden":true}],["$","div",null,{"className":"grid shrink-0 gap-3","aria-hidden":true,"children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 w-56 min-w-0 sm:h-9"}],["$","div",null,{"className":"flex shrink-0 gap-1.5 pt-0.5","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8 sm:w-24"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}]]}]]}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-full max-w-3xl"}]]}],["$","div",null,{"className":"mt-3 shrink-0","aria-hidden":true,"children":["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-10"}]}],["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}]]}],"children":"$L43"}]}],[["$","script","script-0",{"src":"/_next/static/immutable/chunks/1_kyvgkyokw92.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1lo-zn37dolb5.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1v8k6yxw1rg0u.js","async":true,"nonce":"$undefined"}]],["$","$L44",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@45"}]}]]}] 27:o51c,18:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 19:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1a:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1b:["$","$40","c",{"children":[null,null,null]}] 1e:["$","$40","h",{"children":[null,["$","$L46","v_shfEDte6d0tncQjihTCv",{"children":"$L47"}],["$","div","v_shfEDte6d0tncQjihTCm",{"hidden":true,"children":["$","$L48",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":"$L49"}]}]}]]}] 27:o62f,16:T1,?17:C 1c:T1,?1f:T1,?21:300 2d:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 2e:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 2f:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 30:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 31:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 32:["$","span",null,{"children":"shadcnregistry"}] 33:["$","$L2c",null,{"className":"mx-auto"}] 34:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}]]}] 37:["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}] 38:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 27:o7de,39:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o1369,3a:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L24",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}],["$","$L27",null,{"modal":true,"children":[["$","$L28",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L29",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2a",null,{"className":"text-lg","children":"Tools"}],["$","$L2b",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2c",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L24",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L4a","$L4b","$L4c","$L4d","$L4e"]}],"$L4f"]}],"$L50","$L51"]}]}]] 27:o4ac,3b:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$e:props:children:props:children:1","forbidden":"$undefined","unauthorized":"$undefined"}]}]}] 3c:["$","$L41",null,{"parallelRouterKey":"modal","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}] 3d:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L24",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L24",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 3e:["$","$L35",null,{}] 3f:["$","$L36",null,{}] 27:o2be,4a:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 4b:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 4c:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 4d:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 4e:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 4f:["$","span",null,{"children":"shadcnregistry"}] 50:["$","$L2c",null,{"className":"mx-auto"}] 51:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}]]}] 27:o7f,47:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 27:o37,16:T8,registry1f:T8,registry16:T4,item21:300 1f:T4,item27:o4b,5b:I[27201,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"IconMark"] 27:o10e4,43:["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","div",null,{"className":"pb-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5","children":[["$","$40","/",{"children":[false,["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L24",null,{"href":"/","children":"Registries","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$40","/registrydirectory",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L24",null,{"href":"/registrydirectory","children":"registrydirectory","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$40","/registrydirectory/snapcn-block-wordmark",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-foreground font-normal","children":"Snapcn/block Wordmark"}]}]]}]]}]}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Registries\",\"item\":\"https://shadcnregistry.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"registrydirectory\",\"item\":\"https://shadcnregistry.com/registrydirectory\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Snapcn/block Wordmark\",\"item\":\"https://shadcnregistry.com/registrydirectory/snapcn-block-wordmark\"}]}"}}]]}],["$","header",null,{"className":"min-w-0 shrink-0","children":["$","div",null,{"className":"grid min-w-0 gap-3","children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2","children":[["$","h1",null,{"className":"min-w-0 break-words font-semibold text-2xl sm:text-3xl","children":"Snapcn/block Wordmark"}],["$","span",null,{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-components text-blue-300 size-3!","children":["$undefined","$L52","$L53","$L54","$L55","$undefined"]}],"component"]}]]}],"$L56"]}],"$L57"]}]}],"$L58","$L59","$L5a"]}] 27:o8,45:null 27:oc39,49:[["$","title","0",{"children":"Snapcn/block Wordmark – shadcn/ui Component by registrydirectory | shadcnregistry"}],["$","meta","1",{"name":"description","content":"[snapcn] Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real le Install the Snapcn/block Wordmark shadcn/ui component from registrydirectory."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","meta","3",{"name":"robots","content":"index, follow"}],["$","link","4",{"rel":"canonical","href":"https://shadcnregistry.com/registrydirectory/snapcn-block-wordmark"}],["$","meta","5",{"property":"og:title","content":"Snapcn/block Wordmark – shadcn/ui Component by registrydirectory"}],["$","meta","6",{"property":"og:description","content":"[snapcn] Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real le Install the Snapcn/block Wordmark shadcn/ui component from registrydirectory."}],["$","meta","7",{"property":"og:url","content":"https://shadcnregistry.com/registrydirectory/snapcn-block-wordmark"}],["$","meta","8",{"property":"og:site_name","content":"shadcnregistry"}],["$","meta","9",{"property":"og:locale","content":"en_US"}],["$","meta","10",{"property":"og:image","content":"https://shadcnregistry.com/registrydirectory/snapcn-block-wordmark/opengraph-image"}],["$","meta","11",{"property":"og:type","content":"article"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"Snapcn/block Wordmark – shadcn/ui Component by registrydirectory"}],["$","meta","14",{"name":"twitter:description","content":"[snapcn] Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real le Install the Snapcn/block Wordmark shadcn/ui component from registrydirectory."}],["$","meta","15",{"name":"twitter:image","content":"https://shadcnregistry.com/registrydirectory/snapcn-block-wordmark/opengraph-image"}],["$","link","16",{"rel":"icon","href":"/favicon.ico?favicon.0ggckis0s0yna.ico","sizes":"48x48","type":"image/x-icon"}],["$","link","17",{"rel":"icon","href":"/icon0.svg?icon0.25eth_vi9vax4.svg","sizes":"any","type":"image/svg+xml"}],["$","link","18",{"rel":"icon","href":"/icon1.png?icon1.2qsj88a3tgltl.png","sizes":"96x96","type":"image/png"}],["$","link","19",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.1l19rp7u12rg6.png","sizes":"180x180","type":"image/png"}],["$","$L5b","20",{}]] 27:oc7e,5c:I[591164,["/_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"],"ActionButtons"] 5d:I[638118,["/_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"],"Installation"] 52:["$","path","svg-0",{"d":"M3 12l3 3l3 -3l-3 -3z"}] 53:["$","path","svg-1",{"d":"M15 12l3 3l3 -3l-3 -3z"}] 54:["$","path","svg-2",{"d":"M9 6l3 3l3 -3l-3 -3z"}] 55:["$","path","svg-3",{"d":"M9 18l3 3l3 -3l-3 -3z"}] 56:["$","div",null,{"className":"shrink-0 pt-0.5","children":["$","$L5c",null,{"item":{"id":"@registrydirectory/snapcn-block-wordmark","name":"snapcn/block-wordmark","description":"[snapcn] Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real le","type":"registry:component","slug":"snapcn-block-wordmark","source":"https://registry.directory/r/snapcn/block-wordmark.json","namespace":"@registrydirectory","upstreamName":"snapcn/block-wordmark"}}]}] 57:["$","p",null,{"className":"max-w-3xl break-words text-muted-foreground text-sm leading-6","children":"[snapcn] Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real le"}] 58:["$","div",null,{"className":"mt-3 shrink-0","children":["$","$L5d",null,{"sourceUrl":"https://registry.directory/r/snapcn/block-wordmark.json","itemId":"@registrydirectory/snapcn-block-wordmark"}]}] 27:oe8a,59:["$","div",null,{"className":"mt-4 shrink-0","children":["$","a",null,{"href":"https://link.jln.dev/shadcnblocks","target":"_blank","rel":"sponsored noopener noreferrer","data-umami-event":"affiliate-banner-click","data-umami-event-namespace":"@shadcnblocks","data-umami-event-surface":"item-page","data-umami-event-campaign":"item-page-banner","className":"group relative block w-full max-w-lg overflow-hidden rounded-lg py-0.5 text-left focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-amber-400/60","children":[["$","span",null,{"aria-hidden":"true","className":"absolute right-[-250%] bottom-[-11px] h-1/2 w-[300%] animate-star-movement-bottom rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"aria-hidden":"true","className":"absolute top-[-10px] left-[-250%] h-1/2 w-[300%] animate-star-movement-top rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"className":"relative flex items-center justify-between gap-4 rounded-[calc(var(--radius)-1px)] border bg-background p-4","children":[["$","span",null,{"className":"flex min-w-0 items-center gap-3","children":[["$","svg",null,{"viewBox":"0 0 1200 1200","xmlns":"http://www.w3.org/2000/svg","className":"size-9 shrink-0","fill":"currentColor","aria-hidden":"true","children":["$","g",null,{"children":[["$","path",null,{"d":"m700.78 88.312-39.328-22.547v186.94l39.328 22.828z"}],["$","path",null,{"d":"m780 134.39-39.375-22.781v187.18l39.375 22.594z"}],["$","path",null,{"d":"m858.47 180.24-39.328-22.547v186.94l39.328 22.594z"}],["$","path",null,{"d":"m185.53 360.71 39.328 22.594v-133.69l-39.328 22.547z"}],["$","path",null,{"d":"m146.16 337.92v-42.469l-37.219 21.328z"}],["$","path",null,{"d":"m1095.4 317.29-39.141-22.594v45.375l-39.375 22.547v-90.469l-39.094-22.547v135.1l-39.375 22.594v-181.22l-40.078-23.297v187.22l35.297 20.625v378.74l-1.9219 1.1719-33.375-19.172v38.625l-39.844 22.547v-85.172l-39.328-23.297v131.29l-39.141 23.25v-177.84l-39.375-23.25v223.69l-39.844 22.547v-269.53l-39.328-23.297v315.37l-39.375 23.531v-362.16l-19.219-12.75 0.75-376.08 18.469 11.297v-186.94l-20.625-12-16.594 9.3281v187.69l-39.797 22.547v-186.94l-39.375 22.547v186.98l-39.375 22.781v-186.47l-39.094 22.547v186.47l-40.078 22.594v-186.24l-39.141 23.25v185.76l-39.375 23.297v-186.52l-43.922 25.922v179.06l6 3.375 1.4531 381.32 36.469 21.375v-42.469l39.375-23.297v89.062l39.141 22.781v-135.14l40.078-24v181.69l39.094 23.297v-228.24l39.375-23.297v274.08l39.375 22.828v-320.44l39.797-23.25v366.94l18 10.594v-0.75 188.39l493.22-284.86 0.70312-568.55z"}]]}]}],["$","span",null,{"className":"min-w-0","children":[["$","span",null,{"className":"block font-semibold text-base leading-snug","children":"Premium blocks for shadcn/ui"}],["$","span",null,{"className":"mt-0.5 block text-muted-foreground text-xs","children":"Shadcnblocks.com · Affiliate"}]]}]]}],["$","span",null,{"className":"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-linear-to-b from-amber-200 to-amber-400 px-3 font-medium text-amber-950 text-sm shadow-sm transition-[filter] group-hover:brightness-110","children":[["$","span",null,{"className":"sr-only sm:not-sr-only","children":"Explore"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-up-right size-4","aria-hidden":"true","children":[["$","path","1tivn9",{"d":"M7 7h10v10"}],["$","path","1vkiza",{"d":"M7 17 17 7"}],"$undefined"]}]]}]]}]]}]}] 27:o67e,5a:["$","$4",null,{"fallback":["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}],"children":"$L5e"}] 27:o68a,5f: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"] 60: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"] 61:T814b,27:o814b,// Block Wordmark · snapcn — https://snapcn.dev/docs/logos/block-wordmark "use client"; import { loadFont as loadUltra } from "@remotion/google-fonts/Ultra"; import { useEffect, useRef, useState } from "react"; import { AbsoluteFill, continueRender, delayRender, Easing, getRemotionEnvironment, interpolate, spring, useCurrentFrame, useCurrentScale, useVideoConfig, } from "remotion"; import { mixOklch, resolveFont, type SnapCnTheme, useSnapCnTheme, } from "@/lib/snap-cn-ui"; // Loaded through @remotion/google-fonts, never a CSS variable — a Remotion // bundle has none of the app's CSS, so `var(--font-…)` gets you the right face // in the Player and a fallback in the mp4 (design-system rule 4). It also has to // be resident *before* the measurement below, or every block is sized off a // fallback metric. // // Ultra ships a **single** weight (400). That is not a detail to work around: ask // for a weight Google does not serve and the browser synthesises it, which on a // slab this heavy smears the serifs and thickens the stems unevenly — and the // canvas measurement below would then be taken off that fake face and size every // block wrong. So the weight prop, its customizer control and this call all say // 400, and none of them offer anything else. const { fontFamily: ULTRA, waitUntilDone: ultraReady } = loadUltra("normal", { weights: ["400"], subsets: ["latin"], }); const CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const; // ─── Motion ──────────────────────────────────────────────────────────────────── /** * The deck's full turn. This is an aggressive S-curve — it whips through the * middle third and creeps at both ends — and the repo's motion-quality rule says * *moderate decelerates only*. That rule is about **type**: an aggressive ease on * a glyph spends frames moving under half a pixel, the rasteriser rounds them to * nothing, and the word visibly freezes. Nothing here is a glyph. These are * solid-colour rounded rectangles with no hinting and no baseline to snap, and * the whip is the entire read of the beat — the deck has to look *shuffled*, not * eased. Softening this to `bezier(0.2, 0.6, 0.35, 1)` was measured against the * reference and destroys it: the fan opens lazily and never snaps shut. * * Fitted frame by frame against the reference, this curve lands within 2° of the * measured angle over the whole 360°. */ const SPIN_EASE = Easing.bezier(0.76, 0, 0.24, 1); /** The scale-in, and every settle that follows it: `1 - (1 - x)³`. */ const OUT_EASE = Easing.out(Easing.cubic); /** The deck dropping back onto the baseline — accelerating, a fall not a drift. */ const IN_EASE = Easing.in(Easing.cubic); // ─── Measurement ─────────────────────────────────────────────────────────────── /** An ascender's tab, measured off the glyph. All values in probe px. */ interface Tab { /** How far the glyph's ink rises above the x-height. */ height: number; /** Left edge of that ink, as a fraction of the glyph's ink width. */ x: number; /** Width of that ink, as a fraction of the glyph's ink width. */ width: number; } interface Glyph { ch: string; /** True when the glyph paints no ink (a space) — it gets no block. */ blank: boolean; /** Advance width in layout px at the probe's `fontSize`. */ advance: number; /** `null` when the glyph does not rise above the x-height. */ tab: Tab | null; } interface Metrics { glyphs: Glyph[]; /** * The x-height, which is the block's side. * * Not the cap height, which is what the reference *looks* like it uses. Its * word is lowercase and its blocks are 69–70px against letters that stand 71–73 * tall — those letters are "a", "s" and "e", so 72 is that face's **x-height**, * and the 27.6px tab on the first block is exactly its ascender minus its * x-height. Reading it as cap height happens to work for a face whose caps and * ascenders coincide, and then quietly produces no tab at all in Inter, whose * ascenders are the same height as its caps. x-height is the reading that * survives a change of font. */ xHeight: number; /** Distance from a letter box's top edge down to its text baseline. */ baselineOffset: number; } /** * Ink metrics come off a canvas, not off the DOM, because the DOM does not * expose them: `getBoundingClientRect()` measures a span's *layout* box, which * is the same height for "b" and for "a". `TextMetrics.actualBoundingBoxAscent` * is the real ink top, which is the only thing that can tell an ascender from an * x-height glyph without a hardcoded `bdfhklt` list — and a hardcoded list is * wrong the moment the text is Greek, Cyrillic, a capital, or an emoji. */ function measureInk( glyphs: string[], fontFamily: string, fontWeight: number | string, fontSize: number, ): { xHeight: number; tabs: Map } | null { const canvas = document.createElement("canvas"); canvas.width = Math.ceil(fontSize * 3); canvas.height = Math.ceil(fontSize * 3); const ctx = canvas.getContext("2d", { willReadFrequently: true }); if (!ctx) return null; ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`; ctx.textBaseline = "alphabetic"; const xHeight = ctx.measureText("x").actualBoundingBoxAscent; const capHeight = ctx.measureText("H").actualBoundingBoxAscent; if (!(xHeight > 0) || !(capHeight > xHeight)) return null; // Round letters overshoot the x-height by a pixel or so at every size — "o" // and "e" are drawn slightly taller than "x" so they don't *look* shorter. A // fraction of the x-height-to-cap gap is the right scale for "meaningfully // above", because that gap is the size of the feature we are looking for. const cut = (capHeight - xHeight) * 0.15; const origin = fontSize * 0.5; const baseline = Math.round(fontSize * 2); const tabs = new Map(); for (const ch of glyphs) { const m = ctx.measureText(ch); const height = m.actualBoundingBoxAscent - xHeight; if (!(height > cut)) continue; // How wide the tab is, and which side it sits on, cannot be read off any // metric — "b" and "d" have identical bounding boxes, and "B" has the same // box as "b" while being solid across its whole width. So rasterise the // glyph once and look at where the ink actually is above the x-height. ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#000"; ctx.fillText(ch, origin, baseline); // Read the top 60% of the tab, not all the way down to the x-height line. // The last rows before that line are where a "b"'s bowl and an "f"'s crossbar // start, and sampling them reports the whole letter as the stem — measured, // that inflated Inter's "b" tab from 28% of the block to 67%. const top = Math.max(0, Math.floor(baseline - m.actualBoundingBoxAscent)); const bottom = Math.min(canvas.height, top + Math.max(1, height * 0.6)); const data = ctx.getImageData( 0, top, canvas.width, Math.ceil(bottom - top), ).data; let lo = Number.POSITIVE_INFINITY; let hi = Number.NEGATIVE_INFINITY; for (let i = 3; i < data.length; i += 4) { if (data[i] <= 8) continue; const x = (i >> 2) % canvas.width; if (x < lo) lo = x; if (x > hi) hi = x; } if (lo === Number.POSITIVE_INFINITY) continue; const inkLeft = origin - m.actualBoundingBoxLeft; const inkWidth = m.actualBoundingBoxRight + m.actualBoundingBoxLeft; if (!(inkWidth > 0)) continue; tabs.set(ch, { height, x: Math.max(0, (lo - inkLeft) / inkWidth), width: Math.min(1, (hi - lo + 1) / inkWidth), }); } return { xHeight, tabs }; } // ─── Props ───────────────────────────────────────────────────────────────────── export interface BlockWordmarkProps { /** The word to build. Any text: spaces get no block, emoji get their own. */ text?: string; /** Size the finished wordmark is set at, in px. */ fontSize?: number; /** Defaults to Ultra, loaded through `@remotion/google-fonts`. Ultra has one * weight (400) — see the loader note above before offering another. */ fontFamily?: string; fontWeight?: number | string; /** The wordmark's ink. Overrides the design system's `foreground`. */ color?: string; /** * The deck's cards and the flash colours, in order. Accepts an array or a * comma-separated string (which is what the customizer's text control passes). * The lead card is always `color`; these are the ones behind it. */ colors?: string[] | string; /** Stage behind the build. Overrides the design system's `background`. */ background?: string; /** Gap between blocks, as a fraction of the block's side. */ blockGap?: number; /** Corner radius of a block, as a fraction of its side. */ cornerRadius?: number; /** * How tall an ascender's tab grows, as a fraction of the block's height. * Omitted, it is **measured** per glyph — how far that letter's ink actually * rises above the x-height — which is the only value that stays right when the * font changes. The reference's own face gives 0.40; Inter gives 0.33. */ ascenderRatio?: number; /** * Width of that tab, as a fraction of the block's width. Omitted, it is * measured too: the stem of a "b", the whole width of a "B". The reference * widens its own stem by about 60% into a chunky flag — `0.415` reproduces it. */ ascenderStemRatio?: number; /** * `"square"` (measured) makes every block a square of side = cap height, so * the row is an even rhythm and each block visibly *changes* into its letter. * `"glyph"` sizes each block to the advance width of the letter it becomes, * which makes the resolve nearly in-place. */ blockSizing?: "square" | "glyph"; /** Fraction of the frame width the row may occupy before it is scaled to fit. */ maxWidth?: number; /** Cards in the deck, including the lead one. */ cards?: number; /** Frames between one card's turn starting and the next card's. */ cardStagger?: number; /** Full turns the deck makes while it fans and winds back in. */ spinTurns?: number; /** How far the deck lifts off the baseline as it fans, as a fraction of side. */ liftRatio?: number; /** Frames the first square takes to scale in. */ growDuration?: number; /** Frames the deck's turn lasts. */ spinDuration?: number; /** Frames a block takes to travel from the square to its slot. */ splitDuration?: number; /** Frames the inner blocks lag the outer ones by. The split runs outside-in. */ splitStagger?: number; /** Frames an ascender's tab takes to grow. */ ascenderDuration?: number; /** Frames the finished block row holds before the letters resolve. */ holdDuration?: number; /** Frames between one letter's flash and the next. The first step is half. */ flashStagger?: number; /** Frames a block stays lit in its flash colour. */ flashDuration?: number; /** Frames from a block lighting up to it being replaced by its letter. */ flashToSwap?: number; speed?: number; className?: string; /** Design-system token overrides. */ theme?: Partial; mode?: "light" | "dark"; } /** * The accent palette, ours: **one hue, five shades**. * * Every card is `primary` walked toward pure white or pure black in OKLCH, so * the deck is a tonal ramp of the installer's own accent rather than five * unrelated hues — override `theme.primary` and the whole deck moves with it, * which a hardcoded set could never do. * * **Pure `#fff`/`#000`, deliberately, not `t.background`/`t.foreground`.** Those * are warm neutrals, and OKLCH interpolation carries their hue: mixing this blue * 28% toward the warm off-white background measures out at `rgb(0,172,196)` — * cyan — and 52% lands on `rgb(124,203,178)`, a green. Pure endpoints have no * hue to contribute, so all five stay on h≈260 and only lightness moves, which * is what "shades of one blue" has to mean. * * Alternating darker/lighter rather than a straight ramp: the cards fan out * overlapping, so neighbours need contrast against *each other*, not just * against the stage. * * The reference's own six colours are its **brand** (design-system rule 5), so * they are not the default — they are one prop away: * `colors="#ABF25B,#FA361A,#FCCA28,#337DFE,#F99BCA" color="#0000FF"`. */ function defaultColors(t: SnapCnTheme): string[] { return [ t.primary, mixOklch(t.primary, "#000000", 0.3), mixOklch(t.primary, "#ffffff", 0.28), mixOklch(t.primary, "#000000", 0.55), mixOklch(t.primary, "#ffffff", 0.52), ]; } /** * A wordmark that builds itself out of blocks. * * 1. A rounded square scales up off the baseline. * 2. Coloured squares fan out from behind it like a deck being shuffled and wind * back in — one full turn each, staggered, about a **shared** pivot on the * baseline. The fan is the stagger sampling one S-curve at different times; * it opens and closes exactly once. * 3. The deck lands, dips once, and the square splits into one block per letter, * outermost blocks leading. The first ascender grows a tab: the "b". * 4. The row holds, then each block flashes a colour, returns to ink, and is * **hard-cut** to its real letterform. The first letter resolves last. * * Nothing crossfades and nothing morphs: measured against the reference, at each * swap frame the ink is already within a handful of pixels of the settled * wordmark and one frame earlier it is 2,000 off. The cut *is* the effect — a * spring or a crossfade "to improve it" is the one change that breaks it. */ export function BlockWordmark({ text = "base", fontSize = 160, fontFamily, fontWeight = 400, color, colors, background, blockGap = 0.093, cornerRadius = 0.18, ascenderRatio, ascenderStemRatio, blockSizing = "square", maxWidth = 0.92, cards = 6, cardStagger = 2, spinTurns = 1, liftRatio = 0.665, growDuration = 9, spinDuration = 33, splitDuration = 5, splitStagger = 1, ascenderDuration = 12, holdDuration = 54, flashStagger = 4, flashDuration = 3, flashToSwap = 5, speed = 1, className, theme, mode, }: BlockWordmarkProps) { const frame = useCurrentFrame() * speed; const { width, height, fps } = useVideoConfig(); const t = useSnapCnTheme(theme, mode); const face = resolveFont(fontFamily ?? t.fontFamily) ?? ULTRA; const ink = color ?? t.foreground; const stage = background ?? t.background; const palette = (typeof colors === "string" ? colors .split(",") .map((c) => c.trim()) .filter(Boolean) : colors) ?? defaultColors(t); const deck = palette.length > 0 ? palette : defaultColors(t); // `Array.from` splits by code point, so an emoji stays one glyph instead of // becoming two broken surrogate halves. const chars = Array.from(text); // Advance widths and the baseline come from the DOM, because they have to // agree with the DOM that actually paints the letters. Ink metrics come from a // canvas (see `measureInk`). Both are constant across every frame, so measure // once behind `delayRender` and only release the render after the measurement // has re-rendered — otherwise frame 0 is captured with the wrong geometry. const probeRef = useRef(null); const charRefs = useRef<(HTMLSpanElement | null)[]>([]); const rulerRef = useRef(null); const [handle] = useState(() => delayRender("block-wordmark: measure glyphs"), ); const [metrics, setMetrics] = useState(null); // A `` paints the whole composition through one `transform: scale()`, // so `getBoundingClientRect()` below comes back in *device* px while the canvas // metrics in `measureInk` are composition px. Mixing the two lays the letters // out on a track ~40% too short and drops them ~50px below the block row — and // only on the site, because `renderMedia` runs at scale 1. const scale = useCurrentScale({ dontThrowIfOutsideOfRemotion: true }); useEffect(() => { let cancelled = false; const run = () => { if (cancelled) return; const box = probeRef.current; const ruler = rulerRef.current; if (!box || !ruler) { continueRender(handle); return; } const glyphChars = Array.from(text); // Every rect read is divided back into composition px — see `scale`. const s = scale || 1; const boxTop = box.getBoundingClientRect().top / s; const advances = glyphChars.map( (_, i) => (charRefs.current[i]?.getBoundingClientRect().width ?? 0) / s, ); // A zero-sized inline-block aligns its bottom edge to the text baseline, so // its own top *is* the baseline. `getBoundingClientRect` rather than // `offsetTop`, which is rounded to a whole pixel. const baselineOffset = ruler.getBoundingClientRect().top / s - boxTop; const unique = Array.from( new Set(glyphChars.filter((c) => c.trim() !== "")), ); const measured = measureInk(unique, face, fontWeight, fontSize); setMetrics({ xHeight: measured?.xHeight ?? fontSize * 0.52, baselineOffset: baselineOffset || fontSize * 0.86, glyphs: glyphChars.map((ch, i) => ({ ch, blank: ch.trim() === "", advance: advances[i], tab: measured?.tabs.get(ch) ?? null, })), }); }; // Measuring against a fallback face and then swapping in the real one is the // classic way to get a wordmark whose blocks are all the wrong width. // `document.fonts.ready` on its own is not that gate: it resolves straight // away whenever no load happens to be pending when this effect runs, so wait // on the loader's own promise too. Promise.all([ ultraReady(), typeof document !== "undefined" && document.fonts ? document.fonts.ready : null, ]).then(run, run); return () => { cancelled = true; }; // The deps are the raw inputs, never the derived `chars` array: `Array.from` // hands back a new array every render, which would re-run the measurement // (and its `delayRender`) forever. `scale` only ever cancels itself back out, // so a re-run on resize produces the identical metrics. }, [handle, text, face, fontWeight, fontSize, scale]); useEffect(() => { if (metrics) continueRender(handle); }, [metrics, handle]); // ─── Layout ───────────────────────────────────────────────────────────────── const glyphs = metrics?.glyphs ?? chars.map((ch) => ({ ch, blank: ch.trim() === "", advance: fontSize * 0.55, tab: null as Tab | null, })); const xHeight = metrics?.xHeight ?? fontSize * 0.52; const baselineOffset = metrics?.baselineOffset ?? fontSize * 0.86; // Two independent static layouts, exactly as measured: a row of blocks whose // side is the x-height, and a row of letters at their natural advance widths. They are *not* the same row — the blocks are an even rhythm and the // letters are not — which is why the resolve has to move and resize each slot // rather than just repaint it. const letterEnds: number[] = []; let letterRun = 0; for (const g of glyphs) { letterEnds.push(letterRun); letterRun += g.advance; } const letterTotal = letterRun; const gapPx = blockGap * xHeight; /** Glyph index of each block — a space produces no block. */ const blockGlyph: number[] = []; const blockStarts: number[] = []; const blockWidths: number[] = []; const blockOf: number[] = []; let blockRun = 0; let prevWasBlock = false; for (let i = 0; i < glyphs.length; i++) { const g = glyphs[i]; if (g.blank) { // A space already separates the blocks either side of it, so it does not // also get a `blockGap`; its own advance width is the word space. blockRun += g.advance; prevWasBlock = false; blockOf.push(-1); continue; } if (prevWasBlock) blockRun += gapPx; blockOf.push(blockGlyph.length); blockGlyph.push(i); blockStarts.push(blockRun); blockWidths.push(blockSizing === "glyph" ? g.advance : xHeight); blockRun += blockWidths[blockWidths.length - 1]; prevWasBlock = true; } const blockTotal = blockRun; // A long word must not run off the frame. This is a *constant* scale, folded // into the measured px and into `font-size` rather than applied as a transform // — a static size re-rasterises once, where an animated one boils. const fit = Math.min( 1, (width * maxWidth) / Math.max(1, letterTotal, blockTotal), ); const side = xHeight * fit; const radius = cornerRadius * side; const cx = width / 2; /** Height of a block's tab in fitted px — measured, unless overridden. */ const tabHeightOf = (g: Glyph) => g.tab === null ? 0 : ascenderRatio === undefined ? g.tab.height * fit : ascenderRatio * side; const rowTop = side + Math.max(0, ...blockGlyph.map((i) => tabHeightOf(glyphs[i]))); // The one invariant across the whole build: the baseline. Everything is pinned // to it — the deck's pivot, the blocks' bottom edge, the letters. The row is // centred on its *ink* box, tab included, not on the square. const baselineY = height / 2 + rowTop / 2; const letterLeft = (width - letterTotal * fit) / 2; const blockLeft = (width - blockTotal * fit) / 2; // ─── Beats ────────────────────────────────────────────────────────────────── const nCards = Math.max(1, Math.round(cards)); // The deck is visually done half the stagger's spread after the lead card's // turn ends. Rounded, because the anticipation dip below peaks on a single // frame: at an odd `cardStagger * (nCards - 1)` a fractional `collapseAt` puts // that peak between two samples and the beat silently does not happen. const collapseAt = Math.round( spinDuration + (cardStagger * (nCards - 1)) / 2, ); const splitStart = collapseAt + 2; const ascenderStart = splitStart + 2; const resolveStart = splitStart + holdDuration; const grow = interpolate(frame, [0, Math.max(1, growDuration)], [0, 1], { ...CLAMP, easing: OUT_EASE, }); /** * One rigid rotation about an offset origin — spin angle *is* orbit angle. * * A trailing card's turn is compressed so that it *ends* by `collapseAt`. The * stagger is on the starts, so the fan still opens exactly as measured; but a * card whose turn ran past the collapse would still be 6° short — a 10px * corner sticking out from behind the lead square — on the frame the deck is * meant to be gone, and would then either pop out of existence or show through * the gaps as the square splits. The lead card (`card === 0`) is never * compressed: `collapseAt >= spinDuration` by construction. */ const turn = (card: number) => { const start = card * cardStagger; const span = Math.max(1, Math.min(spinDuration, collapseAt - start)); return interpolate(frame - start, [0, span], [0, 360 * spinTurns], { ...CLAMP, easing: SPIN_EASE, }); }; // The lift is one translate shared by every card — a version where each card's // lift lags with its own stagger measures much worse against the reference. // Out on an overdamped spring, back down on an accelerating fall. const lift = liftRatio * side * (spring({ frame: Math.max(0, frame - 2), fps, config: { damping: 60, stiffness: 330, mass: 1 }, }) - interpolate(frame, [collapseAt - 9, collapseAt], [0, 1], { ...CLAMP, easing: IN_EASE, })); // One frame of anticipation before the split: the square lifts 3% of its side // and squashes about 1%. It is a single frame at 30fps and it is what sells // the split. const dip = interpolate( frame, [collapseAt, collapseAt + 1, collapseAt + 3], [0, 1, 0], CLAMP, ); /** Blocks travel outside-in: the outermost pair leads, each step in lags. */ const splitRank = (b: number) => { const mid = (blockWidths.length - 1) / 2; return Math.round(mid - Math.abs(b - mid)); }; const splitProgress = (b: number) => interpolate( frame - splitStart - splitRank(b) * splitStagger, [0, Math.max(1, splitDuration)], [0, 1], { ...CLAMP, easing: OUT_EASE }, ); const tabGrow = interpolate( frame, [ascenderStart, ascenderStart + Math.max(1, ascenderDuration)], [0, 1], { ...CLAMP, easing: OUT_EASE }, ); // The letters resolve left to right *from the second one*, wrapping to the // first letter last, and the first gap is half a step — a deliberately // irregular rhythm that a uniform stagger visibly mistimes. const order: number[] = []; for (let b = 1; b < blockWidths.length; b++) order.push(b); if (blockWidths.length > 0) order.push(0); const cue = new Map(); order.forEach((b, k) => { cue.set(b, k === 0 ? 0 : flashStagger * k - flashStagger / 2); }); const flashOf = new Map(); order.forEach((b, k) => { flashOf.set(b, deck[k % deck.length]); }); const ready = metrics !== null; const isRendering = getRemotionEnvironment().isRendering; const accel = isRendering ? null : { willChange: "transform" as const }; const squareLeft = cx - side / 2; return ( {/* Hidden probe. Laid out with the same face, weight and size as the real letters, so its advance widths are the widths that will be painted. */}

{chars.map((ch, i) => ( { charRefs.current[i] = el; }} style={{ display: "inline-block", whiteSpace: "pre" }} > {ch} ))}

{/* The deck, back to front. The lead card is the block row below, which paints over all of them — it is never occluded. */} {frame < collapseAt + 1 && Array.from({ length: nCards - 1 }, (_, i) => nCards - 1 - i).map( (k) => (

), )} {/* The block row. Every block starts life *as* the lead card — same box, same transform — so beats 1–3 draw one square, and the split simply lets them walk apart. */} {blockWidths.map((w, b) => { const p = splitProgress(b); const g = glyphs[blockGlyph[b]]; const swapAt = resolveStart + (cue.get(b) ?? 0) + flashToSwap; if (frame >= swapAt) return null; const flashOn = resolveStart + (cue.get(b) ?? 0); const lit = frame >= flashOn && frame < flashOn + flashDuration; const fill = lit ? (flashOf.get(b) ?? ink) : ink; const left = squareLeft + (blockLeft + blockStarts[b] * fit - squareLeft) * p; const bw = side + (w * fit - side) * p; const tab = g?.tab ?? null; const tabH = tab ? tabGrow * tabHeightOf(g) : 0; // Measured off the glyph: a "b" gives a narrow stem at its left edge, // a "B" gives the block's whole width, an emoji gives most of it. const tabW = tab ? bw * (ascenderStemRatio ?? tab.width) : 0; const tabX = tab ? Math.min(Math.max(0, tab.x * bw), Math.max(0, bw - tabW)) : 0; const notched = tabH > radius; return (

bw - 1 ? 0 : radius, backgroundColor: fill, transformOrigin: "50% 100%", transform: `rotate(${turn(0)}deg) scale(${grow})`, ...accel, }} > {/* The tab grows in **height only** — it is full width from the first frame it exists. Scaling the whole silhouette up out of the block would widen the stem too, and that is a different, wrong shape. */} {tabH > 0 && (

)}

); })} {/* The letters. Each one is cut in at its final position, final size and final ink — the flash colour never touches the letterform. */} {glyphs.map((g, i) => { const b = blockOf[i]; if (b < 0) return null; const swapAt = resolveStart + (cue.get(b) ?? 0) + flashToSwap; if (frame < swapAt) return null; return ( {g.ch} ); })} ); } 27:o8b6,5e:["$","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","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","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":"remotion"}]]}]}],["$","li","@remotion/google-fonts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Fgoogle-fonts","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":"@remotion/google-fonts"}]]}]}]]}],["$","$L5f",null,{"namespace":"@registrydirectory","registryDependencies":["https://snapcn.dev/r/snap-cn-ui.json"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"registry/snap-cn/block-wordmark/index.tsx","content":"$61","type":"registry:component","target":"components/snap-cn/block-wordmark.tsx"}],"className":"h-[70svh] min-h-80"}]]}] 27:o30,21:C 1f:C 20:C 16:C 1c:C 1d:C 23:false 22:48916 27:C