2b:o1,~2b:o3e7,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/1ysqul-c0gptf.js" 4:I[134030,["$3"],"default"] 5:I[831544,["$3"],"default"] 26:"ViewportBoundary" 27:I[809245,["$3"],"$26"] 29:"MetadataBoundary" 2a:I[809245,["$3"],"$29"] 2b:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/3lr213czhcceg.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2nsv2o5v20-v8.css","style"] :HL["/chat-static/_next/static/immutable/chunks/00ig-5h_vyw6f.css","style"] 1:X 6:X 18:X 1b:X 20:X 25:X 23:[["children",{"s":"__PAGE__","h":130,"d":{"r":"$L24","p":false,"v":"$25"}}]] 21:[["children",{"s":{"n":"id","t":"d","k":"72sjjqCvPuZ","s":null},"h":38,"d":{"r":"$L22","p":false,"v":"$6"},"c":"$Q23"}]] 1e:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1f","p":false,"v":"$20"},"c":"$Q21"}]] 1c:[["children",{"s":"templates","h":106,"d":{"r":"$L1d","p":false,"v":"$6"},"c":"$Q1e"}]] 19:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L1a","p":false,"v":"$1b"},"c":"$Q1c"}]] 2b:oc16,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/3lr213czhcceg.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2nsv2o5v20-v8.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/00ig-5h_vyw6f.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/2-k7_oxqvvd86.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3jzmo4noa0mpl.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3mtt4covw9ds-.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/0vipvuoajg-2_.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2ron94c4y2zz0.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/3mvemo9sfjww9.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3kb2onlo4hhwu.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/0ha3nguz8evd7.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/3cjpiu0vbgn3n.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/42onr_fte7hg-.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/155ihuzkrjxkw.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/3_0p49rm84tku.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/41t0ijk1nkphe.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/0oz4-e_ed5ocr.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/3nmw12jut3nrj.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/3mmzxybt5th7d.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/1_2_grn0tlbrx.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/2vcjby3a8kvpt.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16"],"$L17"]}],"p":false,"v":"$18"},"c":"$Q19"}]] 2b:o1db,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-cgas","s":null},"h":122,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q8"}]] 2d:X 2e:X 2b:o712,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","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."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L27","EoUiq8qW5wRW5JKxe4aVkv",{"children":"$L28"}],["$","$L2a","EoUiq8qW5wRW5JKxe4aVkm",{"children":[["$","div",null,{"hidden":true,"children":["$","$2b",null,{"name":"Next.Metadata","children":"$L2c"}]}],null]}]]}],"p":false,"v":"$2d"}},"s":"$2e","a":"$@2f"} 2b:o1000,30:"/chat-static/_next/static/immutable/chunks/2-k7_oxqvvd86.js" 31:"/chat-static/_next/static/immutable/chunks/3jzmo4noa0mpl.js" 32:"/chat-static/_next/static/immutable/chunks/3mtt4covw9ds-.js" 33:"/chat-static/_next/static/immutable/chunks/0vipvuoajg-2_.js" 34:"/chat-static/_next/static/immutable/chunks/2ron94c4y2zz0.js" 35:"/chat-static/_next/static/immutable/chunks/3mvemo9sfjww9.js" 36:"/chat-static/_next/static/immutable/chunks/3kb2onlo4hhwu.js" 37:"/chat-static/_next/static/immutable/chunks/0ha3nguz8evd7.js" 38:"/chat-static/_next/static/immutable/chunks/3cjpiu0vbgn3n.js" 39:"/chat-static/_next/static/immutable/chunks/42onr_fte7hg-.js" 3a:"/chat-static/_next/static/immutable/chunks/155ihuzkrjxkw.js" 3b:"/chat-static/_next/static/immutable/chunks/3_0p49rm84tku.js" 3c:"/chat-static/_next/static/immutable/chunks/41t0ijk1nkphe.js" 3d:"/chat-static/_next/static/immutable/chunks/0oz4-e_ed5ocr.js" 3e:"/chat-static/_next/static/immutable/chunks/3nmw12jut3nrj.js" 3f:"/chat-static/_next/static/immutable/chunks/3mmzxybt5th7d.js" 40:"/chat-static/_next/static/immutable/chunks/1_2_grn0tlbrx.js" 41:"/chat-static/_next/static/immutable/chunks/2vcjby3a8kvpt.js" 42:"/chat-static/_next/static/immutable/chunks/2ortbrmzoog7i.js" 43:"/chat-static/_next/static/immutable/chunks/03zs_a541khh7.js" 44:"/chat-static/_next/static/immutable/chunks/03brwe_qp9424.js" 45:"/chat-static/_next/static/immutable/chunks/1m-ggy76h0icp.js" 46:"/chat-static/_next/static/immutable/chunks/1skgq0jefchys.js" 47:"/chat-static/_next/static/immutable/chunks/0bmrnr7mqq125.js" 48:"/chat-static/_next/static/immutable/chunks/3cxkytghtnjb5.js" 49:"/chat-static/_next/static/immutable/chunks/175t8gqlqy8ma.js" 4a:"/chat-static/_next/static/immutable/chunks/1t81f07l2nl_a.js" 4b:"/chat-static/_next/static/immutable/chunks/3p0ur8tex0ala.js" 4c:"/chat-static/_next/static/immutable/chunks/0vovt0cd_h5g5.js" 4d:"/chat-static/_next/static/immutable/chunks/1bq6es5hi2lbt.js" 4e:"/chat-static/_next/static/immutable/chunks/1mbs9vpfnj-e4.js" 4f:"/chat-static/_next/static/immutable/chunks/3d7sh05osaa9g.js" 50:"/chat-static/_next/static/immutable/chunks/33vnxrrt6vyyy.js" 51:"/chat-static/_next/static/immutable/chunks/2_750yh3mgvhh.js" 52:"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js" 53:"/chat-static/_next/static/immutable/chunks/1c53lewt7qycs.js" 54:"/chat-static/_next/static/immutable/chunks/0qdfc44mzpw37.js" 55:"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js" 56:"ScopedPromiseContextProvider" 57:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$56"] 5e:"SidebarUIProvider" 5f:I[475961,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$5e"] 60:I[990009,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"Header"] 61:I[980088,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"DynamicCMDK"] 63:"LoadingBoundaryProvider" 64:I[134030,["$3"],"$63"] 65:"/chat-static/_next/static/immutable/chunks/2lbsicg9-muxn.js" 66:"/chat-static/_next/static/immutable/chunks/0x54-j9mmodap.js" 67:"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js" 68:"/chat-static/_next/static/immutable/chunks/3v3bd6x7-mssw.js" 69:"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js" 6a:"/chat-static/_next/static/immutable/chunks/02wqi6wr0sbf6.js" 6b:"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js" 6c:"/chat-static/_next/static/immutable/chunks/3_0pq2b:oed6,-jiuxt0z.js" 6d:"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js" 6e:"/chat-static/_next/static/immutable/chunks/2_75py9t9s_yn.js" 6f:"/chat-static/_next/static/immutable/chunks/2lbsr349ar79m.js" 70:"/chat-static/_next/static/immutable/chunks/2b59wrz340g03.js" 71:"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js" 72:"/chat-static/_next/static/immutable/chunks/1z2qw3yrahzsr.js" 73:"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js" 74:"/chat-static/_next/static/immutable/chunks/1q1w63wcplv8e.js" 75:"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js" 76:"TemplatePreviewContainer" 77:I[959794,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$76"] 78:"TemplateInfoSection" 79:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$78"] 7a:"TemplateInfoSectionGroup" 7b:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$7a"] 7e:I[809245,["$3"],"OutletBoundary"] :HL["/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","style"] :HL["/chat-static/_next/static/immutable/chunks/0oyqfqfdkpyn4.css","style"] 6:C 9:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/2ortbrmzoog7i.js","async":true,"nonce":"$undefined"}] a:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/03zs_a541khh7.js","async":true,"nonce":"$undefined"}] b:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/03brwe_qp9424.js","async":true,"nonce":"$undefined"}] c:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/1m-ggy76h0icp.js","async":true,"nonce":"$undefined"}] d:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/1skgq0jefchys.js","async":true,"nonce":"$undefined"}] e:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/0bmrnr7mqq125.js","async":true,"nonce":"$undefined"}] f:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/3cxkytghtnjb5.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/175t8gqlqy8ma.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/1t81f07l2nl_a.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3p0ur8tex0ala.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/0vovt0cd_h5g5.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/1bq6es5hi2lbt.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-30",{"src":"/chat-static/_next/static/immutable/chunks/1mbs9vpfnj-e4.js","async":true,"nonce":"$undefined"}] 16:["$","script","script-31",{"src":"/chat-static/_next/static/immutable/chunks/3d7sh05osaa9g.js","async":true,"nonce":"$undefined"}] 2b:o5a8,1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/33vnxrrt6vyyy.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2_750yh3mgvhh.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1c53lewt7qycs.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0qdfc44mzpw37.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js","async":true,"nonce":"$undefined"}]],["$","$L57",null,{"params":null,"promises":{"scopeUserDetails":"$@58","team":"$@59","vercelProjectsFavorites":"$@5a","chats":"$@5b","sidebarProjectGroups":"$@5c","sidebarDrafts":"$@5d"},"children":["$","$L5f",null,{"children":[["$","$L60",null,{}],["$","div",null,{"className":"flex min-h-0 flex-1","children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L61",null,{}]]}]}]]}] 2b:o1f9,1d:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1f:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/2lbsicg9-muxn.js","async":true,"nonce":"$undefined"}]],"$L62"]}] 2b:o1156,22:["$","$L64",null,{"loading":[["$","div","l",{"data-testid":"template-detail-skeleton","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-20"}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"mb-0.5 flex items-center sm:mb-0","children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-10 w-64 max-w-[60vw]"}]}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-5 rounded-full sm:size-6"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-20"}]]}]]}],["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-lg sm:h-8 sm:w-24"}]}]]}]]}],["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L77",null,{"children":["$","div",null,{"aria-hidden":true,"className":"flex size-full flex-col bg-v0-background-200","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-2 border-b border-v0-gray-300 px-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 mx-auto h-7 w-[min(40%,20rem)]"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 size-7"}]]}],["$","div",null,{"className":"flex flex-1 items-center justify-center p-8","children":["$","div",null,{"className":"flex w-full max-w-sm flex-col items-center gap-3","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-2/3"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-4/5"}]]}]}]]}]}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L79",null,{"className":"flex-1","title":"About","children":["$","div",null,{"className":"flex w-full max-w-xl flex-col gap-2","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-3/4"}]]}]}],["$","$L7b",null,{"className":"w-full lg:w-80","children":[["$","$L79",null,{"title":"Tags","children":["$","div",null,{"className":"flex flex-wrap gap-6","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-16 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-full"}]]}]}]}],["$","$L79",null,{"title":"Share","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}]]}]}],["$","$L79",null,{"children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full max-w-44"}]}]]}]]}]]}]}]]}],[],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/1p__zgxp5dvuo.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/1z2zgw0ggpps0.js","async":true,"nonce":"$undefined"}]]],"children":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$L7c","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 2b:oa11,24:["$","$2","c",{"children":["$L7d",[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/0oyqfqfdkpyn4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0x54-j9mmodap.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3v3bd6x7-mssw.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/02wqi6wr0sbf6.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3_0pq-jiuxt0z.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2_75py9t9s_yn.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/2lbsr349ar79m.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/2b59wrz340g03.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/1z2qw3yrahzsr.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/1q1w63wcplv8e.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}]],["$","$L7e",null,{"children":["$","$2b",null,{"name":"Next.MetadataOutlet","children":"$@7f"}]}]]}] 2b:o16,2e:300 7c:["$L80",[]] 2b:o67d,87:I[339811,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"PageLayout"] 88:"ScrollFadeContainer" 89:I[388503,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$88"] 8a:"CommunityTabsClient" 8b:I[490134,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$8a"] 8c:"CommunityLiveSearch" 8d:I[803568,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"$8c"] 8e:I[32970,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"ZoneProvider"] 8f:I[532822,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65"],"default"] 18:T8,variants20:T8,variants81:T18d5,2b:o18d5,(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let g=new c,h=new d(a);(async function(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=c.find(a=>f({path:i.pathname,pattern:e(a.path)}));if(null==j||j.method!==(this._requestMethod??"GET")&&"*"!==j.method)return g.call(this,d);let k=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET"),0!==k.b||b.loaded||((1===k.d||j?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET");let l=new XMLHttpRequest;return l._isReexecution=!0,l.open(this._requestMethod||"GET",h,!0),l.setRequestHeader("x-is-human",JSON.stringify(k)),l.setRequestHeader("x-path",i.pathname),l.setRequestHeader("x-method",this._requestMethod||"GET"),this.timeout&&(l.timeout=this.timeout),this.responseType&&(l.responseType=this.responseType),this.withCredentials&&(l.withCredentials=this.withCredentials),l.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:l.readyState,writable:!0,configurable:!0}),l.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:l.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:l.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:l.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:l.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:l.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>l.getAllResponseHeaders(),this.getResponseHeader=a=>l.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},l.onload=a=>{this.onload&&this.onload.call(this,a)},l.onerror=a=>{this.onerror&&this.onerror.call(this,a)},l.onabort=a=>{this.onabort&&this.onabort.call(this,a)},l.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},l.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},l.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},l.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},l.send(d)}})(g,h,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let i=new URL(c instanceof Request?c.url:c,location.href),j=i.origin===location.origin,k=a.find(a=>f({path:i.pathname,pattern:e(a.path)})),l=d?.method??(c instanceof Request?c.method:"GET"),m=null!=k&&(k.method===l||"*"===k.method);if(null==k||!m||!j)return b(c,d);let n=await g.getChallenge(),o=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));o.set("x-is-human",JSON.stringify(n)),o.set("x-path",i.pathname),o.set("x-method",l);let p={...d,headers:o};return h.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await h.load(),window.fetch(c,p)):b(c,p)}}({protect:a})})({ protect: [{"path":"/chat/api/vm/actions/run-pipeline","method":"POST","advancedOptions":{"checkLevel":"deepAnalysis"}},{"path":"/chat/api/chat","method":"POST"},{"path":"/chat/api/vm/actions/*","method":"POST"},{"path":"*/chat/api/vm/actions/*","method":"POST"}] });2b:o534,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$81"}}],"$L82","$L83","$L84","$L85"]}],"$L86"]}] 62:["$","$L87",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L89",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L8b",null,{}]}],["$","$2b",null,{"children":["$","$L8d",null,{}]}]]}],"titleRowClassName":"hidden","className":"flex py-6 px-4 sm:p-9","contentWrapperClassName":"flex-1 min-h-max","headerClassName":"!border-t-0","title":"Community","children":[["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","div",null,{"className":"py-4","children":["$","$L8e",null,{"zone":"chat","children":["$","$L8f",null,{}]}]}]]}] 2b:o1000,90:"GeistThemeScript" 91:I[86098,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$90"] 92:I[600033,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"AppStoreMetaTag"] 93:I[86098,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"GeistProvider"] 94:I[818362,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"LocaleProvider"] 95:I[841245,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"MotionConfig"] 96:"AtomicContextSWRProvider" 97:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$96"] 98:"GlobalPromiseContextProvider" 99:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55"],"$98"] 9c:I[827887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"JotaiProvider"] 9d:"ServerQuerySWRRuntimeProvider" 9e:I[74757,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$9d"] a0:I[815349,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"CleanupStorage"] a1:I[994115,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Analytics"] a2:I[503803,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SpeedInsights"] a4:"VercelianAppFlowMigrator" a5:I[23825,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$a4"] a6:I[108762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"TrackInfo"] a7:I[578386,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"PageViewTracker"] a8:I[356301,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"AutoCapture"] 82:["$","$L91",null,{"storageKey":"theme"}] 83:["$","$2b",null,{"children":["$","$L92",null,{}]}] 84:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 85:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://verce2b:o29a,l.com\",\"logo\":\"https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico\",\"sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/company/vercel\",\"https://www.linkedin.com/company/v0dev\"]},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"v0\",\"url\":\"https://v0.app\",\"description\":\"Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.\",\"applicationCategory\":[\"DeveloperApplication\",\"DesignApplication\"],\"operatingSystem\":\"All\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Vercel\"}}]"}}] 2b:o93b,86:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased eEAu7a_variable dJgEwW_variable hGs1mq_variable","children":[["$","$L93",null,{"storageKey":"theme","withScript":false,"children":["$","$L94",null,{"locale":"en","children":["$","$L95",null,{"reducedMotion":"user","children":["$","$L97",null,{"routes":{"scoped":{"scopeUserDetails":{"path":"/api/chat/scoped/user","method":"GET"},"team":{"path":"/api/chat/scoped/team","method":"GET"},"vercelProjectsFavorites":{"path":"/api/chat/scoped/vercel-projects/favorites","method":"GET"},"chats":{"path":"/api/chat/scoped/chats","method":"GET"},"paginatedChats":{"path":"/api/chat/scoped/get-paginated-chats","method":"GET"},"designSystems":{"path":"/api/chat/scoped/design-systems-with-registry/list","method":"GET"},"sidebarProjectGroups":{"path":"/api/chat/scoped/sidebar-project-groups","method":"GET"},"sidebarDrafts":{"path":"/api/v2/internal/chats/sidebar-drafts","method":"GET"}},"chat":{"attributes":{"path":"/api/chat/chat/attributes","method":"GET"},"externalMeta":{"path":"/api/chat/chat/latest-external-meta","method":"GET"},"latest":{"path":"/api/chat/chat/latest","method":"GET"},"template":{"path":"/api/chat/chat/template","method":"GET"},"messages":{"path":"/api/chat/chat/messages","method":"GET"},"messagesRange":{"path":"/api/chat/chat/messages/range","method":"GET"},"gitStatus":{"path":"/api/git/status","method":"GET"}},"library":{"chatsList":{"path":"/api/chat/library/chats/list","method":"GET"},"archivedChatsList":{"path":"/api/chat/library/chats/archived","method":"GET"},"projectsList":{"path":"/api/chat/library/projects/list","method":"GET"},"filters":{"path":"/api/chat/library/filters","method":"GET"}},"project":{},"global":{"dailyModelUsage":{"path":"/api/chat/global/daily-model-usage","method":"GET"},"freeFixWithV0Usage":{"path":"/api/chat/global/free-fix-with-v0-usage","method":"GET"}}},"children":["$","$L99",null,{"params":null,"promises":{"dailyModelUsage":"$@9a","freeFixWithV0Usage":"$@9b"},"children":[["$","$L9c",null,{"children":["$","$L9e",null,{"children":"$L9f"}]}],["$","$La0",null,{}]]}]}]}]}]}],["$","$La1",null,{}],["$","$La2",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2b",null,{"children":"$La3"}],["$","$La5",null,{}],["$","$La6",null,{}],["$","$La7",null,{}],["$","$La8",null,{}]]}] 2b:o90,28:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 2b:oe,2d:T8,variants2b:o1000,a9:"HydrateDurableAtoms" aa:I[783749,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$a9"] ab:I[359783,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"DataProvider"] ac:I[32170,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"UserProvider"] ae:"AnimatedIconProvider" af:I[908887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$ae"] b0:I[30570,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"PortalProvider"] b1:"SnowflakePublishProvider" b2:I[966820,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b1"] b3:"UserInputProvider" b4:I[472914,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b3"] b5:I[69221,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"CmdkProvider"] b6:"VirtualMachineUIStateProvider" b7:I[319228,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b6"] b8:"DeployedPreviewIframeRefProvider" b9:I[166890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$b8"] ba:"PreviewSourceUIStateProvider" bb:I[197843,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$ba"] bc:I[367078,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"LoaderProvider"] bd:"PromptFormUIProvider" be:I[595358,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$bd"] bf:I[242759,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"FlagsProvider"] c1:I[549011,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"NuqsAdapter"] c2:"ChatTabsProvider" c3:I[568561,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c2"] c4:"PersonalScopeMigrationAnnouncementProvider" c5:I[206559,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c4"] c7:"AnnouncementVisibilityProvider" c8:I[878519,["$30","$31","$32","$33","$34","$35","$36","$37","$38","2b:o719,$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$c7"] cb:I[561588,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Toaster"] cc:I[407562,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"Toaster"] cd:"SuspendingDialogs" ce:I[840793,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"$cd"] cf:I[323194,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SignInDialog"] d0:I[279070,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"ConsentBanner"] d1:"/chat-static/_next/static/immutable/chunks/2dsrb3shrl4k7.js" d2:I[192842,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$d1"],"ChatWarning"] d3:I[15279,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f"],"SessionManager"] 2b:o8ef,9f:["$","$Laa",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"sidebarGroupOrder":[],"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":null,"manualModelSelectionAnchorKey":null,"toolConfiguration":{"webSearch":true,"generateImages":true,"vercelProjectId":null,"vercelProjectName":null,"vercelProjectBranch":null,"vercelProjectGitOrg":null,"vercelProjectGitRepo":null,"customInstructionIds":[],"mcpServerIds":[],"marketplaceMcpIds":[],"autoAllowMcpTools":false},"shouldShowUpgrade":false,"chatMobilePanel":"input","chatPanelLayout":[{"id":"input","ratio":0.205,"visible":true},{"id":"output","ratio":0.795,"visible":true}],"dismissedFeatureDialogs":{},"dismissedConnectRepoCard":false,"permissionsModeV2":null}}},"children":["$","$Lab",null,{"children":["$","$Lac",null,{"expectUser":false,"userPromise":"$@ad","children":["$","$Laf",null,{"children":["$","$Lb0",null,{"children":["$","$Lb2",null,{"children":["$","$Lb4",null,{"children":["$","$Lb5",null,{"children":["$","$Lb7",null,{"children":["$","$Lb9",null,{"children":["$","$Lbb",null,{"children":["$","$Lbc",null,{"children":["$","$Lbe",null,{"children":["$","$Lbf",null,{"promise":"$@c0","middlewareFlags":["cgas"],"children":["$","$Lc1",null,{"children":["$","$Lc3",null,{"children":["$","$Lc5",null,{"destinationTeamIdPromise":"$@c6","children":["$","$Lc8",null,{"visiblePromise":"$@c9","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$2b",null,{"fallback":null,"children":"$Lca"}],["$","$Lcb",null,{}],["$","$Lcc",null,{}],["$","$2b",null,{"fallback":null,"children":["$","$Lce",null,{}]}],["$","$Lcf",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Ld0",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 2b:o2a2,5d:null 80:["$","$Ld2",null,{"description":"This generation was deleted, unpublished, or no longer exists.","icon":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"circular","style":{"color":"currentColor"},"className":"size-8","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m1-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7.1 5.82a1 1 0 1 1 1.04 1.42c-.44.06-.89.44-.89 1.01v1h1.5v-.61a2.5 2.5 0 1 0-3-3.46l-.33.68 1.35.64z","clipRule":"evenodd"}]}],"title":"Not Found","children":null}] a3:["$","$Ld3",null,{"enabled":false}] 2b:o20,ad:"$undefined" c9:true ca:null 2b:o20,2d:0 25:0 2e:60 25:T2,id2d:T2,id2b:o8,c6:null 2b:o893,d4:I[144680,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"S"] d5:"KeepClientOnUpToDateSlugPath" d6:I[983440,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$d5"] d7:"TemplateFlagDialog" d8:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$d7"] d9:I[636340,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],""] da:"TemplateStatusBadge" db:I[484402,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$da"] dc:I[834117,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"CommunityAvatar"] 2b:o1154,7d:["$","$Ld4",null,{"value":{"fallback":{"template:72sjjqCvPuZ:likes":{"likeCount":1,"isLiked":false}}},"children":[["$","$Ld6",null,{"id":"72sjjqCvPuZ","title":"WebGL Shader Editor"}],["$","$Ld8",null,{"templateId":"72sjjqCvPuZ"}],["$","div",null,{"data-testid":"template-detail-content","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"data-testid":"template-detail-header","className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"max-w-full","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-v0-gray-900 flex items-center text-sm break-words gap-0.5 flex-nowrap","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$Ld9",null,{"href":"/templates","prefetch":true,"children":"Templates","data-slot":"breadcrumb-link","className":"hover:text-v0-gray-1000 transition-colors","ref":null}]}],[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"m6.75 3.94.53.53 2.82 2.82a1 1 0 0 1 0 1.42l-2.82 2.82-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5z","clipRule":"evenodd"}]}]}],["$","$Ld9",null,{"className":"hover:text-v0-gray-1000 transition-colors capitalize truncate","href":"/templates/components","prefetch":true,"children":"Components","data-slot":"breadcrumb-link","ref":null}]],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":"$7d:props:children:2:props:children:0:props:children:0:props:children:props:children:1:0:props:children:props:children"}]}],["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-v0-gray-1000 font-normal capitalize truncate","children":"WebGL Shader Editor"}]]}]}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"data-testid":"template-detail-title","className":"line-clamp-1 text-heading-32","children":"WebGL Shader Editor"}],["$","$Ldb",null,{"status":"pending"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Ld9",null,{"className":"flex items-center gap-1.5","href":"/@marcodenic","children":[["$","$Ldc",null,{"className":"size-5 sm:size-6","username":"marcodenic","teamId":"team_wxvJH78dTik0b24WQAZURyFE","teamAvatarClassName":"size-3 sm:size-3.5"}],["$","p",null,{"className":"text-sm font-medium text-v0-gray-900","children":"marcodenic"}]]}],["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"className":"size-3","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M2.5 3.25C2.5 1.45 3.96 0 5.75 0h.5C8.05 0 9.5 1.46 9.5 3.25v.5C9.5 5.55 8.04 7 6.25 7h-.5A3.25 3.25 0 0 1 2.5 3.75zM5.75 1.5C4.78 1.5 4 2.28 4 3.25v.5c0 .97.78 1.75 1.75 1.75h.5C7.22 5.5 8 4.72 8 3.75v-.5c0-.97-.78-1.75-1.75-1.75zm-4.25 13v-1.33a4.8 4.8 0 0 1 4.33-2.67h.34a4.8 4.8 0 0 1 4.33 2.67v1.33zM5.83 9a6.3 6.3 0 0 0-5.76 3.69l-.07.15V16h12v-3.16l-.07-.15A6.3 6.3 0 0 0 6.17 9zm10.1 3.69a6.3 6.3 0 0 0-2.59-2.84l-.75 1.3c.8.46 1.48 1.16 1.91 2.02v1.33h-1V16H16v-3.16zM11.25 0h-.75v1.5h.75c.97 0 1.75.78 1.75 1.75v.5c0 .97-.78 1.75-1.75 1.75h-.75V7h.75c1.8 0 3.25-1.46 3.25-3.25v-.5c0-1.8-1.46-3.25-3.25-3.25","clipRule":"evenodd"}]}],["$","span",null,{"className":"text-[13px] leading-none","children":"1"}]]}],"$Ldd","$Lde"]}]]}]]}],"$Ldf"]}]]}],"$Le0"]}]]}] 2b:o1000,e1:"TemplateCardStatsLikesClient" e2:I[441648,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$e1"] e3:"TemplateFlagButton" e4:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$e3"] e5:"TemplateLikeButton" e6:I[605890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$e5"] e7:"TemplateBlockButton" e8:I[411379,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$e7"] ea:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"TemplateTags"] eb:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"TemplateShare"] ec:"TemplateLastUpdated" ed:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$ec"] dd:["$","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-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] de:["$","$Le2",null,{"templateCanonId":"72sjjqCvPuZ"}] df:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Le4",null,{}],null,null,["$","$Le6","72sjjqCvPuZ",{"templateCanonId":"72sjjqCvPuZ"}],null,["$","$Le8",null,{"buttonProps":{"className":"h-7 rounded-md px-2 sm:h-8 sm:rounded-lg sm:px-3"},"buttonType":"v0","template":{"blockId":"N94VomYqkXs","description":"Edit and modify various WebGL shaders","imageUrl":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/Screenshot%202025-03-16%20015915-iZsvZzhFXljj3eyJr2VpYHA7BNdKKk.png","title":"WebGL Shader Editor","publishedToCommunity":"pending","templateCanonId":"72sjjqCvPuZ","templateVersionId":"JnXYMmnMH8c","uses":1,"isTeamTemplate":true,"likeCount":1,"vercelDeploymentUrl":null,"createdAt":"$D2025-03-16T02:00:30.104Z","category":"components","tags":[],"authorUsername":"marcodenic","isVercel":false,"teamId":"team_wxvJH78dTik0b24WQAZURyFE","liked":false},"isOwnTemplate":false}]]}] e0:["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w2b:o30a,-[1600px]","children":[["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L77","description",{"testId":"template-detail-preview","children":"$Le9"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L79",null,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"whitespace-pre-wrap text-v0-gray-900","children":"Edit and modify various WebGL shaders"}]}],["$","$L7b",null,{"className":"w-full lg:w-80","children":[["$","$Lea",null,{"tags":"$df:props:children:8:props:template:tags"}],["$","$Leb",null,{"templateUrl":"https://v0.app/templates/72sjjqCvPuZ"}],["$","$Led",null,{"updatedAt":"$D2025-03-16T02:00:30.104Z"}]]}]]}]]}],["$","$2b",null,{"fallback":null,"children":"$Lee"}]]}] 2b:o2f0,ef:"ExplicitChatIdProvider" f0:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$ef"] f1:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"SWRDataProvider"] f2:T11075,2b:o11075,[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import NeuroShader from "@/components/neuro-shader" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/neuro-shader.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Copy, Settings, Check } from "lucide-react" // Vertex shader source (common for all shaders) const vertexShaderSource = ` attribute vec2 a_position; varying vec2 vUv; void main() { vUv = a_position; gl_Position = vec4(a_position * 2.0 - 1.0, 0, 1); } ` // Shader types type ShaderType = "neuro" | "waves" | "particles" | "geometric" | "noise" // Base parameters interface interface BaseShaderParams { timeScale: number } // Neuro shader parameters interface NeuroShaderParams extends BaseShaderParams { baseHueSpeed: number colorSaturation: number colorLightness: number complementaryOffset: number pulseSpeed: number pulseIntensity: number shapeComplexity: number shapeIntensity: number rotationSpeed: number } // Waves shader parameters interface WavesShaderParams extends BaseShaderParams { waveCount: number waveAmplitude: number waveSpeed: number colorGradient1: [number, number, number] colorGradient2: [number, number, number] distortion: number } // Particles shader parameters interface ParticlesShaderParams extends BaseShaderParams { particleCount: number particleSize: number particleSpeed: number particleColor: [number, number, number] glowIntensity: number turbulence: number } // Geometric shader parameters interface GeometricShaderParams extends BaseShaderParams { gridSize: number lineWidth: number rotationSpeed: number colorShift: number patternComplexity: number animationStyle: number } // Noise shader parameters interface NoiseShaderParams extends BaseShaderParams { noiseScale: number noiseOctaves: number noisePersistence: number colorScale: number colorOffset: number distortionAmount: number } // Union type for all shader parameters type ShaderParams = | { type: "neuro"; params: NeuroShaderParams } | { type: "waves"; params: WavesShaderParams } | { type: "particles"; params: ParticlesShaderParams } | { type: "geometric"; params: GeometricShaderParams } | { type: "noise"; params: NoiseShaderParams } // Default parameters for each shader type const defaultParams: Record = { neuro: { baseHueSpeed: 0.1, colorSaturation: 0.8, colorLightness: 0.5, complementaryOffset: 0.5, pulseSpeed: 0.5, pulseIntensity: 0.1, shapeComplexity: 15, shapeIntensity: 1.2, rotationSpeed: 1.0, timeScale: 0.0003, }, waves: { waveCount: 5, waveAmplitude: 0.5, waveSpeed: 0.2, colorGradient1: [0.1, 0.2, 0.3], colorGradient2: [0.7, 0.8, 0.9], distortion: 0.3, timeScale: 0.0005, }, particles: { particleCount: 100, particleSize: 0.02, particleSpeed: 0.3, particleColor: [0.7, 0.8, 0.9], glowIntensity: 0.5, turbulence: 0.3, timeScale: 0.001, }, geometric: { gridSize: 10, lineWidth: 0.05, rotationSpeed: 0.1, colorShift: 0.5, patternComplexity: 3, animationStyle: 1, timeScale: 0.0002, }, noise: { noiseScale: 3.0, noiseOctaves: 4, noisePersistence: 0.5, colorScale: 1.0, colorOffset: 0.0, distortionAmount: 0.3, timeScale: 0.0004, }, } // Neuro shader fragment source const getNeuroShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; uniform float u_scroll_progress; // Parameter uniforms uniform float u_base_hue_speed; uniform float u_color_saturation; uniform float u_color_lightness; uniform float u_complementary_offset; uniform float u_pulse_speed; uniform float u_pulse_intensity; uniform float u_shape_complexity; uniform float u_shape_intensity; uniform float u_rotation_speed; uniform float u_time_scale; // HSL to RGB conversion for more intuitive color control vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } vec2 rotate(vec2 v, float a) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } float neuro_shape(vec2 uv, float t, float p) { vec2 sine_acc = vec2(0.); vec2 res = vec2(0.); float scale = 8.; for (int j = 0; j < 30; j++) { if (float(j) >= u_shape_complexity) break; uv = rotate(uv, u_rotation_speed); sine_acc = rotate(sine_acc, u_rotation_speed); vec2 layer = uv * scale + float(j) + sine_acc - t; sine_acc += sin(layer) + 2.4 * p; res += (.5 + .5 * cos(layer)) / scale; scale *= (1.2); } return res.x + res.y; } void main() { vec2 uv = .5 * vUv; uv.x *= u_ratio; vec2 pointer = vUv - u_pointer_position; pointer.x *= u_ratio; float p = clamp(length(pointer), 0., 1.); p = .5 * pow(1. - p, 2.); float t = u_time_scale * u_time; vec3 color = vec3(0.); float noise = neuro_shape(uv, t, p); noise = u_shape_intensity * pow(noise, 3.); noise += pow(noise, 10.); noise = max(.0, noise - .5); noise *= (1. - length(vUv - .5)); // Create a very slow time factor for color changes float colorTime = 0.0001 * u_time; // Create multiple color regions based on position and time // Region 1: Base color that shifts over time vec3 color1 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed, 1.0), // Hue cycles through full spectrum u_color_saturation, // Saturation from parameter u_color_lightness // Lightness from parameter )); // Region 2: Complementary color (opposite on color wheel) vec3 color2 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset, 1.0), // Complementary hue u_color_saturation - 0.1, u_color_lightness )); // Region 3: Triadic color scheme (120 degrees apart) vec3 color3 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset/1.5, 1.0), // 120 degrees from base u_color_saturation + 0.1, u_color_lightness + 0.1 )); // Region 4: Another triadic color (120 degrees in other direction) vec3 color4 = hsl2rgb(vec3( mod(colorTime * u_base_hue_speed + u_complementary_offset*1.3, 1.0), // 240 degrees from base u_color_saturation, u_color_lightness - 0.1 )); // Create spatial variation based on position and noise float dist = length(vUv - 0.5) * 2.0; float angle = atan(vUv.y - 0.5, vUv.x - 0.5) / (3.14159 * 2.0) + 0.5; // Mix colors based on position and time // This creates swirling patterns of complementary colors float mixFactor1 = sin(angle * 6.28 + colorTime * 0.2) * 0.5 + 0.5; float mixFactor2 = cos(dist * 3.14 + colorTime * 0.15) * 0.5 + 0.5; // Create complex color mixing vec3 finalColor = mix( mix(color1, color2, mixFactor1), mix(color3, color4, mixFactor2), sin(dist * 5.0 + colorTime * 0.3) * 0.5 + 0.5 ); // Apply noise to the color color = finalColor * noise; // Add pulsing effect for continuous animation float pulse = sin(colorTime * u_pulse_speed) * u_pulse_intensity + 0.9; gl_FragColor = vec4(color * pulse, noise); } ` // Waves shader fragment source const getWavesShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_wave_count; uniform float u_wave_amplitude; uniform float u_wave_speed; uniform vec3 u_color_gradient1; uniform vec3 u_color_gradient2; uniform float u_distortion; uniform float u_time_scale; // Simplex noise function vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create distortion based on noise float distortion = snoise(uv * 2.0 + time * 0.1) * u_distortion; // Create waves float waves = 0.0; for (int i = 0; i < 10; i++) { if (float(i) >= u_wave_count) break; float fi = float(i) / u_wave_count; float speed = u_wave_speed * (0.5 + fi * 0.5); float amplitude = u_wave_amplitude * (0.5 + fi * 0.5); // Offset each wave slightly vec2 p = uv + vec2(fi * 0.2, fi * 0.3); p += distortion; // Create wave pattern float wave = sin(p.x * 10.0 + time * speed) * cos(p.y * 10.0 + time * speed * 0.7) * amplitude; waves += wave; } // Normalize waves waves = 0.5 + 0.5 * waves / u_wave_count; // Create gradient based on position and waves vec3 color = mix(u_color_gradient1, u_color_gradient2, waves); // Add subtle variation based on position float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Particles shader fragment source const getParticlesShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_particle_count; uniform float u_particle_size; uniform float u_particle_speed; uniform vec3 u_particle_color; uniform float u_glow_intensity; uniform float u_turbulence; uniform float u_time_scale; // Hash function for pseudo-random numbers float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } // Simplex noise for turbulence vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Initialize color vec3 color = vec3(0.0); // Create particles for (int i = 0; i < 200; i++) { if (float(i) >= u_particle_count) break; // Create a unique ID for each particle float fi = float(i); vec2 seed = vec2(fi * 0.123, fi * 0.456); // Generate random position and movement float random1 = hash(seed); float random2 = hash(seed + 0.123); float random3 = hash(seed + 0.456); // Particle base position vec2 pos = vec2( random1, random2 ); // Add turbulence to movement vec2 turbulence = vec2( snoise(pos + time * 0.1) * u_turbulence, snoise(pos + vec2(100.0) + time * 0.1) * u_turbulence ); // Update position with time and turbulence pos += turbulence; pos.y += time * u_particle_speed * (0.5 + random3 * 0.5); // Wrap around screen pos = fract(pos); // Calculate distance to current pixel float dist = length(uv - pos); // Create particle with glow float particle = u_particle_size / dist; // Add to color with glow color += u_particle_color * particle * u_glow_intensity; } // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Geometric shader fragment source const getGeometricShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_grid_size; uniform float u_line_width; uniform float u_rotation_speed; uniform float u_color_shift; uniform float u_pattern_complexity; uniform float u_animation_style; uniform float u_time_scale; // HSL to RGB conversion vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } // Rotation matrix mat2 rotate2d(float angle) { return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); } float pattern(vec2 p, float time) { // Scale based on grid size p *= u_grid_size; // Apply rotation based on time and position float angle = time * u_rotation_speed; if (u_animation_style > 1.5) { // Different rotation for different areas angle += length(floor(p)) * 0.1; } p = rotate2d(angle) * p; // Get grid cell vec2 i = floor(p); vec2 f = fract(p); // Pattern based on complexity float pattern = 0.0; if (u_pattern_complexity < 1.5) { // Simple grid vec2 grid = abs(f * 2.0 - 1.0); pattern = max(grid.x, grid.y); } else if (u_pattern_complexity < 2.5) { // Checkerboard float checker = mod(i.x + i.y, 2.0); pattern = mix( abs(f.x * 2.0 - 1.0), abs(f.y * 2.0 - 1.0), checker ); } else if (u_pattern_complexity < 3.5) { // Circles pattern = length(f - 0.5); } else { // Complex pattern vec2 q = f; for (int j = 0; j < 3; j++) { q = abs(q) / dot(q, q) - 0.5; } pattern = length(q); } // Create lines with adjustable width pattern = smoothstep(u_line_width, u_line_width + 0.05, pattern); return pattern; } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create pattern float p = pattern(uv, time); // Create color based on position and time float hue = fract(uv.x + uv.y + time * 0.1 * u_color_shift); vec3 color = hsl2rgb(vec3(hue, 0.6, 0.5)); // Apply pattern to color color = mix(color, color * 0.2, p); // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Noise shader fragment source const getNoiseShaderSource = () => ` precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; // Parameter uniforms uniform float u_noise_scale; uniform float u_noise_octaves; uniform float u_noise_persistence; uniform float u_color_scale; uniform float u_color_offset; uniform float u_distortion_amount; uniform float u_time_scale; // Simplex noise function vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m; m = m*m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } // Fractal Brownian Motion (FBM) noise float fbm(vec2 p, float time) { float value = 0.0; float amplitude = 1.0; float frequency = 1.0; // Add time-based movement p += time * 0.1; // Add octaves of noise for (int i = 0; i < 8; i++) { if (float(i) >= u_noise_octaves) break; value += amplitude * snoise(p * frequency); amplitude *= u_noise_persistence; frequency *= 2.0; } return value; } // HSL to RGB conversion vec3 hsl2rgb(vec3 c) { vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); } void main() { vec2 uv = vUv; uv.x *= u_ratio; float time = u_time * u_time_scale; // Create distortion vec2 distortion = vec2( fbm(uv + vec2(0.0, time * 0.1), time), fbm(uv + vec2(5.2, time * 0.1), time) ) * u_distortion_amount; // Apply distortion to coordinates vec2 p = uv + distortion; // Generate noise float noise = fbm(p * u_noise_scale, time); // Map noise to color float hue = fract(noise * u_color_scale + u_color_offset + time * 0.05); float sat = 0.6 + noise * 0.2; float light = 0.5 + noise * 0.2; vec3 color = hsl2rgb(vec3(hue, sat, light)); // Add subtle vignette float vignette = 1.0 - length(vUv - 0.5) * 1.3; vignette = clamp(vignette, 0.0, 1.0); gl_FragColor = vec4(color * vignette, 1.0); } ` // Get shader source based on type const getShaderSource = (type: ShaderType) => { switch (type) { case "neuro": return getNeuroShaderSource() case "waves": return getWavesShaderSource() case "particles": return getParticlesShaderSource() case "geometric": return getGeometricShaderSource() case "noise": return getNoiseShaderSource() default: return getNeuroShaderSource() } } export default function NeuroShader() { const canvasRef = useRef(null) const requestRef = useRef() const startTimeRef = useRef(Date.now()) const [pointer, setPointer] = useState({ x: 0.5, y: 0.5, tX: 0.5, tY: 0.5 }) const [scrollProgress, setScrollProgress] = useState(0) const glRef = useRef(null) const programRef = useRef(null) const [showControls, setShowControls] = useState(false) const [copySuccess, setCopySuccess] = useState(false) const [shaderType, setShaderType] = useState("neuro") // Add shader parameters state const [neuroParams, setNeuroParams] = useState(defaultParams.neuro) const [wavesParams, setWavesParams] = useState(defaultParams.waves) const [particlesParams, setParticlesParams] = useState(defaultParams.particles) const [geometricParams, setGeometricParams] = useState(defaultParams.geometric) const [noiseParams, setNoiseParams] = useState(defaultParams.noise) // Get current params based on shader type const getCurrentParams = () => { switch (shaderType) { case "neuro": return neuroParams case "waves": return wavesParams case "particles": return particlesParams case "geometric": return geometricParams case "noise": return noiseParams default: return neuroParams } } // Set current params based on shader type const setCurrentParams = (params: any) => { switch (shaderType) { case "neuro": setNeuroParams(params) break case "waves": setWavesParams(params) break case "particles": setParticlesParams(params) break case "geometric": setGeometricParams(params) break case "noise": setNoiseParams(params) break } } const uniformsRef = useRef<{ time: WebGLUniformLocation | null ratio: WebGLUniformLocation | null pointerPosition: WebGLUniformLocation | null scrollProgress: WebGLUniformLocation | null // Neuro shader uniforms baseHueSpeed: WebGLUniformLocation | null colorSaturation: WebGLUniformLocation | null colorLightness: WebGLUniformLocation | null complementaryOffset: WebGLUniformLocation | null pulseSpeed: WebGLUniformLocation | null pulseIntensity: WebGLUniformLocation | null shapeComplexity: WebGLUniformLocation | null shapeIntensity: WebGLUniformLocation | null rotationSpeed: WebGLUniformLocation | null // Waves shader uniforms waveCount: WebGLUniformLocation | null waveAmplitude: WebGLUniformLocation | null waveSpeed: WebGLUniformLocation | null colorGradient1: WebGLUniformLocation | null colorGradient2: WebGLUniformLocation | null distortion: WebGLUniformLocation | null // Particles shader uniforms particleCount: WebGLUniformLocation | null particleSize: WebGLUniformLocation | null particleSpeed: WebGLUniformLocation | null particleColor: WebGLUniformLocation | null glowIntensity: WebGLUniformLocation | null turbulence: WebGLUniformLocation | null // Geometric shader uniforms gridSize: WebGLUniformLocation | null lineWidth: WebGLUniformLocation | null geometricRotationSpeed: WebGLUniformLocation | null colorShift: WebGLUniformLocation | null patternComplexity: WebGLUniformLocation | null animationStyle: WebGLUniformLocation | null // Noise shader uniforms noiseScale: WebGLUniformLocation | null noiseOctaves: WebGLUniformLocation | null noisePersistence: WebGLUniformLocation | null colorScale: WebGLUniformLocation | null colorOffset: WebGLUniformLocation | null distortionAmount: WebGLUniformLocation | null // Common timeScale: WebGLUniformLocation | null }>({ time: null, ratio: null, pointerPosition: null, scrollProgress: null, // Neuro shader uniforms baseHueSpeed: null, colorSaturation: null, colorLightness: null, complementaryOffset: null, pulseSpeed: null, pulseIntensity: null, shapeComplexity: null, shapeIntensity: null, rotationSpeed: null, // Waves shader uniforms waveCount: null, waveAmplitude: null, waveSpeed: null, colorGradient1: null, colorGradient2: null, distortion: null, // Particles shader uniforms particleCount: null, particleSize: null, particleSpeed: null, particleColor: null, glowIntensity: null, turbulence: null, // Geometric shader uniforms gridSize: null, lineWidth: null, geometricRotationSpeed: null, colorShift: null, patternComplexity: null, animationStyle: null, // Noise shader uniforms noiseScale: null, noiseOctaves: null, noisePersistence: null, colorScale: null, colorOffset: null, distortionAmount: null, // Common timeScale: null, }) // Initialize WebGL and shaders useEffect(() => { initializeWebGL() }, [shaderType]) const initializeWebGL = () => { const canvas = canvasRef.current if (!canvas) return const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") if (!gl) { console.error("WebGL is not supported by your browser.") return } glRef.current = gl // Create shader program const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER) const fragmentShader = createShader(gl, getShaderSource(shaderType), gl.FRAGMENT_SHADER) const program = createProgram(gl, vertexShader, fragmentShader) programRef.current = program // Set up position buffer const positionBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) const positions = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW) // Set up attributes const positionAttributeLocation = gl.getAttribLocation(program, "a_position") gl.enableVertexAttribArray(positionAttributeLocation) gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0) // Get uniform locations based on shader type uniformsRef.current.time = gl.getUniformLocation(program, "u_time") uniformsRef.current.ratio = gl.getUniformLocation(program, "u_ratio") uniformsRef.current.pointerPosition = gl.getUniformLocation(program, "u_pointer_position") uniformsRef.current.scrollProgress = gl.getUniformLocation(program, "u_scroll_progress") uniformsRef.current.timeScale = gl.getUniformLocation(program, "u_time_scale") // Get shader-specific uniform locations if (shaderType === "neuro") { uniformsRef.current.baseHueSpeed = gl.getUniformLocation(program, "u_base_hue_speed") uniformsRef.current.colorSaturation = gl.getUniformLocation(program, "u_color_saturation") uniformsRef.current.colorLightness = gl.getUniformLocation(program, "u_color_lightness") uniformsRef.current.complementaryOffset = gl.getUniformLocation(program, "u_complementary_offset") uniformsRef.current.pulseSpeed = gl.getUniformLocation(program, "u_pulse_speed") uniformsRef.current.pulseIntensity = gl.getUniformLocation(program, "u_pulse_intensity") uniformsRef.current.shapeComplexity = gl.getUniformLocation(program, "u_shape_complexity") uniformsRef.current.shapeIntensity = gl.getUniformLocation(program, "u_shape_intensity") uniformsRef.current.rotationSpeed = gl.getUniformLocation(program, "u_rotation_speed") } else if (shaderType === "waves") { uniformsRef.current.waveCount = gl.getUniformLocation(program, "u_wave_count") uniformsRef.current.waveAmplitude = gl.getUniformLocation(program, "u_wave_amplitude") uniformsRef.current.waveSpeed = gl.getUniformLocation(program, "u_wave_speed") uniformsRef.current.colorGradient1 = gl.getUniformLocation(program, "u_color_gradient1") uniformsRef.current.colorGradient2 = gl.getUniformLocation(program, "u_color_gradient2") uniformsRef.current.distortion = gl.getUniformLocation(program, "u_distortion") } else if (shaderType === "particles") { uniformsRef.current.particleCount = gl.getUniformLocation(program, "u_particle_count") uniformsRef.current.particleSize = gl.getUniformLocation(program, "u_particle_size") uniformsRef.current.particleSpeed = gl.getUniformLocation(program, "u_particle_speed") uniformsRef.current.particleColor = gl.getUniformLocation(program, "u_particle_color") uniformsRef.current.glowIntensity = gl.getUniformLocation(program, "u_glow_intensity") uniformsRef.current.turbulence = gl.getUniformLocation(program, "u_turbulence") } else if (shaderType === "geometric") { uniformsRef.current.gridSize = gl.getUniformLocation(program, "u_grid_size") uniformsRef.current.lineWidth = gl.getUniformLocation(program, "u_line_width") uniformsRef.current.geometricRotationSpeed = gl.getUniformLocation(program, "u_rotation_speed") uniformsRef.current.colorShift = gl.getUniformLocation(program, "u_color_shift") uniformsRef.current.patternComplexity = gl.getUniformLocation(program, "u_pattern_complexity") uniformsRef.current.animationStyle = gl.getUniformLocation(program, "u_animation_style") } else if (shaderType === "noise") { uniformsRef.current.noiseScale = gl.getUniformLocation(program, "u_noise_scale") uniformsRef.current.noiseOctaves = gl.getUniformLocation(program, "u_noise_octaves") uniformsRef.current.noisePersistence = gl.getUniformLocation(program, "u_noise_persistence") uniformsRef.current.colorScale = gl.getUniformLocation(program, "u_color_scale") uniformsRef.current.colorOffset = gl.getUniformLocation(program, "u_color_offset") uniformsRef.current.distortionAmount = gl.getUniformLocation(program, "u_distortion_amount") } // Set up canvas size resizeCanvas() if (gl && program) { gl.useProgram(program) } } // Handle window resize useEffect(() => { const handleResize = () => { resizeCanvas() } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, []) // Handle mouse/touch movement useEffect(() => { const handlePointerMove = (e: MouseEvent | TouchEvent) => { const canvas = canvasRef.current if (!canvas) return let clientX, clientY if ("touches" in e) { clientX = e.touches[0].clientX clientY = e.touches[0].clientY } else { clientX = e.clientX clientY = e.clientY } const rect = canvas.getBoundingClientRect() const x = (clientX - rect.left) / rect.width const y = (clientY - rect.top) / rect.height setPointer((prev) => ({ ...prev, tX: x, tY: y, })) } const handleScroll = () => { const scrollTop = window.scrollY || document.documentElement.scrollTop const scrollHeight = document.documentElement.scrollHeight - window.innerHeight const progress = scrollTop / scrollHeight || 0 setScrollProgress(progress) } window.addEventListener("mousemove", handlePointerMove) window.addEventListener("touchmove", handlePointerMove as any) window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("mousemove", handlePointerMove) window.removeEventListener("touchmove", handlePointerMove as any) window.removeEventListener("scroll", handleScroll) } }, []) // Animation loop useEffect(() => { let frameCount = 0 const gl = glRef.current const program = programRef.current // Ensure gl and program are available before using the program if (gl && program) { gl.useProgram(program) } const animate = () => { const now = Date.now() const elapsed = now - startTimeRef.current frameCount++ // Update pointer with easing setPointer((prev) => ({ x: prev.x + (prev.tX - prev.x) * 0.05, y: prev.y + (prev.tY - prev.y) * 0.05, tX: prev.tX, tY: prev.tY, })) // If elapsed time gets too large, reset the start time while maintaining visual continuity if (elapsed > 900000) { // Reset after ~15 minutes startTimeRef.current = now - (elapsed % 900000) } render(elapsed) requestRef.current = requestAnimationFrame(animate) } requestRef.current = requestAnimationFrame(animate) return () => { if (requestRef.current) { cancelAnimationFrame(requestRef.current) } } }, [pointer, scrollProgress, shaderType]) // Update the render function to include the new uniforms const render = (time: number) => { const gl = glRef.current const program = programRef.current const uniforms = uniformsRef.current if (!gl || !program || !uniforms.time) return // Wrap the time value to prevent precision issues const wrappedTime = time % 1000000 // Update common uniforms gl.uniform1f(uniforms.time, wrappedTime) gl.uniform1f(uniforms.ratio, gl.canvas.width / gl.canvas.height) gl.uniform2f(uniforms.pointerPosition, pointer.x, pointer.y) if (uniforms.scrollProgress) { gl.uniform1f(uniforms.scrollProgress, scrollProgress) } // Update shader-specific uniforms if (shaderType === "neuro") { const params = neuroParams gl.uniform1f(uniforms.baseHueSpeed!, params.baseHueSpeed) gl.uniform1f(uniforms.colorSaturation!, params.colorSaturation) gl.uniform1f(uniforms.colorLightness!, params.colorLightness) gl.uniform1f(uniforms.complementaryOffset!, params.complementaryOffset) gl.uniform1f(uniforms.pulseSpeed!, params.pulseSpeed) gl.uniform1f(uniforms.pulseIntensity!, params.pulseIntensity) gl.uniform1f(uniforms.shapeComplexity!, params.shapeComplexity) gl.uniform1f(uniforms.shapeIntensity!, params.shapeIntensity) gl.uniform1f(uniforms.rotationSpeed!, params.rotationSpeed) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "waves") { const params = wavesParams gl.uniform1f(uniforms.waveCount!, params.waveCount) gl.uniform1f(uniforms.waveAmplitude!, params.waveAmplitude) gl.uniform1f(uniforms.waveSpeed!, params.waveSpeed) gl.uniform3fv(uniforms.colorGradient1!, params.colorGradient1) gl.uniform3fv(uniforms.colorGradient2!, params.colorGradient2) gl.uniform1f(uniforms.distortion!, params.distortion) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "particles") { const params = particlesParams gl.uniform1f(uniforms.particleCount!, params.particleCount) gl.uniform1f(uniforms.particleSize!, params.particleSize) gl.uniform1f(uniforms.particleSpeed!, params.particleSpeed) gl.uniform3fv(uniforms.particleColor!, params.particleColor) gl.uniform1f(uniforms.glowIntensity!, params.glowIntensity) gl.uniform1f(uniforms.turbulence!, params.turbulence) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "geometric") { const params = geometricParams gl.uniform1f(uniforms.gridSize!, params.gridSize) gl.uniform1f(uniforms.lineWidth!, params.lineWidth) gl.uniform1f(uniforms.geometricRotationSpeed!, params.rotationSpeed) gl.uniform1f(uniforms.colorShift!, params.colorShift) gl.uniform1f(uniforms.patternComplexity!, params.patternComplexity) gl.uniform1f(uniforms.animationStyle!, params.animationStyle) gl.uniform1f(uniforms.timeScale!, params.timeScale) } else if (shaderType === "noise") { const params = noiseParams gl.uniform1f(uniforms.noiseScale!, params.noiseScale) gl.uniform1f(uniforms.noiseOctaves!, params.noiseOctaves) gl.uniform1f(uniforms.noisePersistence!, params.noisePersistence) gl.uniform1f(uniforms.colorScale!, params.colorScale) gl.uniform1f(uniforms.colorOffset!, params.colorOffset) gl.uniform1f(uniforms.distortionAmount!, params.distortionAmount) gl.uniform1f(uniforms.timeScale!, params.timeScale) } // Draw gl.drawArrays(gl.TRIANGLES, 0, 6) } // Add a function to handle parameter changes const handleParamChange = (name: string, value: any) => { const currentParams = getCurrentParams() setCurrentParams({ ...currentParams, [name]: value, }) } // Add a function to copy the configuration const copyConfig = () => { const config = { type: shaderType, params: getCurrentParams(), } const configString = JSON.stringify(config, null, 2) navigator.clipboard .writeText(configString) .then(() => { setCopySuccess(true) setTimeout(() => setCopySuccess(false), 2000) }) .catch((err) => { console.error("Failed to copy: ", err) }) } // Add a function to reset parameters to default const resetParams = () => { setCurrentParams(defaultParams[shaderType]) } // Change shader type const changeShaderType = (type: ShaderType) => { setShaderType(type) } // Resize canvas function const resizeCanvas = () => { const canvas = canvasRef.current const gl = glRef.current if (!canvas || !gl) return const devicePixelRatio = Math.min(window.devicePixelRatio, 2) const displayWidth = Math.floor(canvas.clientWidth * devicePixelRatio) const displayHeight = Math.floor(canvas.clientHeight * devicePixelRatio) if (canvas.width !== displayWidth || canvas.height !== displayHeight) { canvas.width = displayWidth canvas.height = displayHeight gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) } } // Helper functions for creating shaders and programs const createShader = (gl: WebGLRenderingContext, source: string, type: number) => { const shader = gl.createShader(type) if (!shader) { throw new Error("Failed to create shader") } gl.shaderSource(shader, source) gl.compileShader(shader) const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS) if (!success) { console.error(gl.getShaderInfoLog(shader)) gl.deleteShader(shader) throw new Error("Failed to compile shader") } return shader } const createProgram = (gl: WebGLRenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) => { const program = gl.createProgram() if (!program) { throw new Error("Failed to create program") } gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) const success = gl.getProgramParameter(program, gl.LINK_STATUS) if (!success) { console.error(gl.getProgramInfoLog(program)) gl.deleteProgram(program) throw new Error("Failed to link program") } return program } // Render shader-specific controls const renderShaderControls = () => { switch (shaderType) { case "neuro": return renderNeuroControls() case "waves": return renderWavesControls() case "particles": return renderParticlesControls() case "geometric": return renderGeometricControls() case "noise": return renderNoiseControls() default: return renderNeuroControls() } } // Render neuro shader controls const renderNeuroControls = () => { const params = neuroParams return (

Colors

Hue Speed: {params.baseHueSpeed.toFixed(2)} handleParamChange("baseHueSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Saturation: {params.colorSaturation.toFixed(2)} handleParamChange("colorSaturation", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Lightness: {params.colorLightness.toFixed(2)} handleParamChange("colorLightness", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color Offset: {params.complementaryOffset.toFixed(2)} handleParamChange("complementaryOffset", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pulse Speed: {params.pulseSpeed.toFixed(2)} handleParamChange("pulseSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pulse Intensity: {params.pulseIntensity.toFixed(2)} handleParamChange("pulseIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Rotation Speed: {params.rotationSpeed.toFixed(2)} handleParamChange("rotationSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Shape

Complexity: {params.shapeComplexity.toFixed(0)} handleParamChange("shapeComplexity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Shape Intensity: {params.shapeIntensity.toFixed(2)} handleParamChange("shapeIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render waves shader controls const renderWavesControls = () => { const params = wavesParams return (

Wave Properties

Wave Count: {params.waveCount.toFixed(0)} handleParamChange("waveCount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Wave Amplitude: {params.waveAmplitude.toFixed(2)} handleParamChange("waveAmplitude", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Wave Speed: {params.waveSpeed.toFixed(2)} handleParamChange("waveSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Distortion: {params.distortion.toFixed(2)} handleParamChange("distortion", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Colors

Color 1 R { const newColor = [...params.colorGradient1] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 1 G { const newColor = [...params.colorGradient1] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 1 B { const newColor = [...params.colorGradient1] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("colorGradient1", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 R { const newColor = [...params.colorGradient2] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 G { const newColor = [...params.colorGradient2] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color 2 B { const newColor = [...params.colorGradient2] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("colorGradient2", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render particles shader controls const renderParticlesControls = () => { const params = particlesParams return (

Particle Properties

Particle Count: {params.particleCount.toFixed(0)} handleParamChange("particleCount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Particle Size: {params.particleSize.toFixed(3)} handleParamChange("particleSize", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Particle Speed: {params.particleSpeed.toFixed(2)} handleParamChange("particleSpeed", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Glow Intensity: {params.glowIntensity.toFixed(2)} handleParamChange("glowIntensity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Turbulence: {params.turbulence.toFixed(2)} handleParamChange("turbulence", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color

R { const newColor = [...params.particleColor] newColor[0] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

G { const newColor = [...params.particleColor] newColor[1] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

B { const newColor = [...params.particleColor] newColor[2] = Number.parseFloat(e.target.value) handleParamChange("particleColor", newColor) }} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render geometric shader controls const renderGeometricControls = () => { const params = geometricParams return (

Pattern

Grid Size: {params.gridSize.toFixed(1)} handleParamChange("gridSize", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Line Width: {params.lineWidth.toFixed(2)} handleParamChange("lineWidth", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Pattern Complexity: {params.patternComplexity.toFixed(0)} handleParamChange("patternComplexity", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation Style: {params.animationStyle.toFixed(0)} handleParamChange("animationStyle", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Color Shift: {params.colorShift.toFixed(2)} handleParamChange("colorShift", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } // Render noise shader controls const renderNoiseControls = () => { const params = noiseParams return (

Noise Properties

Noise Scale: {params.noiseScale.toFixed(1)} handleParamChange("noiseScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Noise Octaves: {params.noiseOctaves.toFixed(0)} handleParamChange("noiseOctaves", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Noise Persistence: {params.noisePersistence.toFixed(2)} handleParamChange("noisePersistence", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Distortion Amount: {params.distortionAmount.toFixed(2)} handleParamChange("distortionAmount", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color

Color Scale: {params.colorScale.toFixed(2)} handleParamChange("colorScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Color Offset: {params.colorOffset.toFixed(2)} handleParamChange("colorOffset", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

Animation

Time Scale: {params.timeScale.toFixed(5)} handleParamChange("timeScale", Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />

) } return (

) } 2b:o1d5,e9:["$","$Lf0",null,{"chatId":"q3f90OWL4Cq","children":["$","$Lf1",null,{"data":{"@\"active-block\",\"q3f90OWL4Cq\",":{"id":"N94VomYqkXs","messageId":"EfDseRdB9DJBST2o69A0CtClFu0rcvdu","source":"$f2","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"neuro-shader","type":"code-project","project":"neuro-shader"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"q3f90OWL4Cq\",":false},"children":"$Lf3"}]}] 2b:o61b,f4:"PublishedPageProvider" f5:I[845210,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$f4"] f6:"FullscreenContainer" f7:I[481556,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$f6"] f8:"TemplateBlockViewClient" f9:I[552151,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75"],"$f8"] f3:["$","$Lf5",null,{"children":["$","$Lf7",null,{"mode":"$undefined","children":["$","$Lf9",null,{"block":"$e9:props:children:props:data:@\"active-block\",\"q3f90OWL4Cq\",","allowMobileFullscreen":true,"initialSize":"$undefined","title":"WebGL Shader Editor","templateCanonId":"72sjjqCvPuZ","templateVersionId":"JnXYMmnMH8c","authorizePublicFrame":false,"vmEnabled":false,"canViewConsole":false,"vercelDeploymentUrl":null}]}]}] 2b:o290,ee:["$","div",null,{"data-testid":"template-detail-related","className":"w-full flex flex-col gap-9","children":[["$","$L79",null,{"title":"More from marcodenic","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lfa"]}]}]}],["$","$L79",null,{"title":"More Templates Like This","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lfb","$Lfc","$Lfd"]}]}]}]]}] 2b:o2d,2e:C 2d:C 1:C 25:C 20:C 1b:C 18:C 2f:[48801] 2b:C

Colors

Animation

Shape

Wave Properties

Colors

Animation

Particle Properties

Color

Animation

Pattern

Animation

Noise Properties

Color

Animation

Shader Controls

Shader Type