Digital Matter — Interactive Portrait

3c:o1,~3c:o7ef,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/1ysqul-c0gptf.js" 4:I[134030,["$3"],"default"] 5:I[831544,["$3"],"default"] 39:"ViewportBoundary" 3a:I[809245,["$3"],"$39"] 3c:"MetadataBoundary" 3d:I[809245,["$3"],"$3c"] 3e:"$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 22:X 20:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L21","p":false,"v":"$22"}}]] 1e:[["children",{"s":{"n":"id","t":"d","k":"integrate-ditherveil-component-lS7rpJmAQ3o","s":null},"h":98,"d":{"r":"$L1f","p":false,"v":"$6"},"c":"$Q20"}]] 2c:X 2a:[["children",{"s":"__PAGE__","h":2,"d":{"r":"$L2b","p":false,"v":"$2c"}}]] 28:[["children",{"s":{"n":"id","t":"d","k":"integrate-ditherveil-component-lS7rpJmAQ3o","s":null},"h":38,"d":{"r":"$L29","p":false,"v":"$6"},"c":"$Q2a"}]] 26:[["children",{"s":"chat","h":106,"d":{"r":"$L27","p":false,"v":"$6"},"c":"$Q28"}]] 24:[["children",{"s":"(chat)","h":106,"d":{"r":"$L25","p":false,"v":"$6"},"c":"$Q26"}]] 36:X 34:[["children",{"s":"__PAGE__","h":34,"d":{"r":"$L35","p":false,"v":"$36"}}]] 32:[["children",{"s":{"n":"id","t":"d","k":"integrate-ditherveil-component-lS7rpJmAQ3o","s":null},"h":102,"d":{"r":"$L33","p":false,"v":"$6"},"c":"$Q34"}]] 30:[["children",{"s":"chat","h":106,"d":{"r":"$L31","p":false,"v":"$6"},"c":"$Q32"}]] 2e:[["children",{"s":"(chat)","h":106,"d":{"r":"$L2f","p":false,"v":"$6"},"c":"$Q30"}]] 38:X 1c:[["children",{"s":"chat","h":98,"d":{"r":"$L1d","p":false,"v":"$6"},"c":"$Q1e"}],["content",{"s":"(__SLOT__)","h":74,"d":{"r":"$L23","p":false,"v":"$6"},"c":"$Q24"}],["header",{"s":"(__SLOT__)","h":74,"d":{"r":"$L2d","p":false,"v":"$6"},"c":"$Q2e"}],["sidebar",{"s":"__DEFAULT__","h":2,"d":{"r":"$L37","p":false,"v":"$38"}}]] 19:[["children",{"s":{"n":"scope","t":"d","k":"mstrmnd","s":null},"h":74,"d":{"r":"$L1a","p":false,"v":"$1b"},"c":"$Q1c"}]] 3c: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/3tx1298ddhkk7.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/3gqtl1-kvqof3.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"}]] 3c: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"}]] 40:X 41:X 3c: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,["$","$L3a","BgCUyqD4caPdp1sMvad7Dv",{"children":"$L3b"}],["$","$L3d","BgCUyqD4caPdp1sMvad7Dm",{"children":[["$","div",null,{"hidden":true,"children":["$","$3e",null,{"name":"Next.Metadata","children":"$L3f"}]}],null]}]]}],"p":false,"v":"$40"}},"s":"$41","a":"$@42"} 3c:o1000,44:I[809245,["$3"],"OutletBoundary"] 46:"LoadingBoundaryProvider" 47:I[134030,["$3"],"$46"] 4f:"/chat-static/_next/static/immutable/chunks/3tx1298ddhkk7.js" 50:"/chat-static/_next/static/immutable/chunks/3jzmo4noa0mpl.js" 51:"/chat-static/_next/static/immutable/chunks/3mtt4covw9ds-.js" 52:"/chat-static/_next/static/immutable/chunks/0vipvuoajg-2_.js" 53:"/chat-static/_next/static/immutable/chunks/2ron94c4y2zz0.js" 54:"/chat-static/_next/static/immutable/chunks/3mvemo9sfjww9.js" 55:"/chat-static/_next/static/immutable/chunks/3kb2onlo4hhwu.js" 56:"/chat-static/_next/static/immutable/chunks/0ha3nguz8evd7.js" 57:"/chat-static/_next/static/immutable/chunks/3cjpiu0vbgn3n.js" 58:"/chat-static/_next/static/immutable/chunks/42onr_fte7hg-.js" 59:"/chat-static/_next/static/immutable/chunks/155ihuzkrjxkw.js" 5a:"/chat-static/_next/static/immutable/chunks/3_0p49rm84tku.js" 5b:"/chat-static/_next/static/immutable/chunks/41t0ijk1nkphe.js" 5c:"/chat-static/_next/static/immutable/chunks/0oz4-e_ed5ocr.js" 5d:"/chat-static/_next/static/immutable/chunks/3nmw12jut3nrj.js" 5e:"/chat-static/_next/static/immutable/chunks/3mmzxybt5th7d.js" 5f:"/chat-static/_next/static/immutable/chunks/1_2_grn0tlbrx.js" 60:"/chat-static/_next/static/immutable/chunks/3gqtl1-kvqof3.js" 61:"/chat-static/_next/static/immutable/chunks/2ortbrmzoog7i.js" 62:"/chat-static/_next/static/immutable/chunks/03zs_a541khh7.js" 63:"/chat-static/_next/static/immutable/chunks/03brwe_qp9424.js" 64:"/chat-static/_next/static/immutable/chunks/1m-ggy76h0icp.js" 65:"/chat-static/_next/static/immutable/chunks/1skgq0jefchys.js" 66:"/chat-static/_next/static/immutable/chunks/0bmrnr7mqq125.js" 67:"/chat-static/_next/static/immutable/chunks/3cxkytghtnjb5.js" 68:"/chat-static/_next/static/immutable/chunks/175t8gqlqy8ma.js" 69:"/chat-static/_next/static/immutable/chunks/1t81f07l2nl_a.js" 6a:"/chat-static/_next/static/immutable/chunks/3p0ur8tex0ala.js" 6b:"/chat-static/_next/static/immutable/chunks/3naakm55vce34.js" 6c:"/chat-static/_next/static/immutable/chunks/0c9-isjbf0iye.js" 6d:"/chat-static/_next/static/immutable/chunks/1mbs9vpfnj-e4.js" 6e:"/chat-static/_next/static/immutable/chunks/3d7sh05osaa9g.js" 6f:"/chat-static/_next/static/immutable/chunks/0f4vhfirt0-7t.js" 70:"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js" 71:"/chat-static/_next/static/immutable/chunks/0ibvfusuy8bc9.js" 72:"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js" 73:"/chat-static/_next/static/immutable/chunks/2okfvgsdojwyd.js" 74:"/chat-static/_next/static/immutable/chunks/3micjxoj8spq5.js" 75:"/chat-static/_next/static/immutable/chunks/1lu087dx8z8ae.js" 76:"/chat-static/_next/static/immutable/chunks/0fandjy28amms.js" 77:"/chat-static/_next/static/immutable/chunks/2ws4m2plwid5j.js" 78:"/chat-static/_next/static/immutable/chunks/3mu30edqytlcw.js" 79:"/chat-static/_next/static/immutable/chunks/0rqaxzpe33wgl.js" 7a:"/chat-static/_next/static/immutable/chunks/0mzn_wm2xsli2.js" 7b:"/chat-static/_next/static/immutable/chunks/2jxke-9ppzs71.js" 7c:"/chat-static/_next/static/immutable/chunks/08k4v2ky0rior.js" 7d:"/chat-static/_next/static/immutable/chunks/06htf9ieuryzu.js" 7e:"/chat-static/_next/static/immutable/chunks/2yhrik6wd4oqd.js" 7f:"/chat-static/_next/static/immutable/chunks/3evo9nmem3jwf.js" 80:"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js" 81:"/chat-static/_next/static/immutable/chunks/1vrpeun0d1lx7.js" 82:"/chat-static/_next/static/immutable/chunks/1n6vl9w3r2ad0.js" 83:"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js" 84:"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js" 85:"/chat-static/_next/static/immutable/chunks/0xy71w62lr2m6.js" 86:"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js" 87:"/chat-static/_next/static/immutable/chunks/0dcv8_cdrvelu.js" 88:"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js" 89:"/chat-static/_next/static/immutable/chunks/3y_8xkuvpir5b.js" 8a:"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js" 8b:"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js" 8c:"/chat-static/_next/static/immutable3c:of21,/chunks/11sl5r1xt7l7_.js" 8d:"/chat-static/_next/static/immutable/chunks/42yfe8vtioux6.js" 8e:"/chat-static/_next/static/immutable/chunks/3tshot3u_9o0_.js" 8f:"/chat-static/_next/static/immutable/chunks/22gac00xljckf.js" 90:"/chat-static/_next/static/immutable/chunks/2lbsr349ar79m.js" 91:I[822201,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$81","$82","$83","$84","$85","$86","$87","$88","$89","$8a","$8b","$8c","$8d","$8e","$8f","$90"],"default"] 92:"/chat-static/_next/static/immutable/chunks/20qj-y3d3bf_x.js" 93:"/chat-static/_next/static/immutable/chunks/3pdkk6zv5cjgy.js" 94:"/chat-static/_next/static/immutable/chunks/16bvwngtq0an0.js" 95:"/chat-static/_next/static/immutable/chunks/2hs4dkypufpiq.js" 96:"/chat-static/_next/static/immutable/chunks/1w9o0zu9qxuxt.js" 97:"/chat-static/_next/static/immutable/chunks/1-1nps-2bh86p.js" 98:"/chat-static/_next/static/immutable/chunks/43_lbp7i6k4j7.js" 99:"/chat-static/_next/static/immutable/chunks/03uqxyzmcknrq.js" 9a:"/chat-static/_next/static/immutable/chunks/2j2aaf-pno5zb.js" 9b:"/chat-static/_next/static/immutable/chunks/2m-bg0k3ds03m.js" 9c:"GitChatHeaderSkeleton" 9d:I[70040,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$9c"] :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/3naakm55vce34.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/0c9-isjbf0iye.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"}] 3c:o956,1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0f4vhfirt0-7t.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3w2b7tivu5kj9.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/0ibvfusuy8bc9.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/20uonqf5_n_4k.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2okfvgsdojwyd.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/3micjxoj8spq5.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/1lu087dx8z8ae.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/0fandjy28amms.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2ws4m2plwid5j.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/3mu30edqytlcw.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/0rqaxzpe33wgl.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0mzn_wm2xsli2.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/2jxke-9ppzs71.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/08k4v2ky0rior.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/06htf9ieuryzu.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/2yhrik6wd4oqd.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/3evo9nmem3jwf.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/2-b-n69tlmzaq.js","async":true,"nonce":"$undefined"}]],"$L43"]}] 3c:o29a,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":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 3c:oc9e,21:["$","$2","c",{"children":[null,[["$","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/2vusl7yhrvrz1.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/16bvwngtq0an0.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/0xy71w62lr2m6.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/3pdkk6zv5cjgy.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/22gac00xljckf.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2j2aaf-pno5zb.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.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/11sl5r1xt7l7_.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/43_lbp7i6k4j7.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/03uqxyzmcknrq.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/3tshot3u_9o0_.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/2hs4dkypufpiq.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/1-1nps-2bh86p.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1w9o0zu9qxuxt.js","async":true,"nonce":"$undefined"}],["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}],["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/2m-bg0k3ds03m.js","async":true,"nonce":"$undefined"}]],["$","$L44",null,{"children":["$","$3e",null,{"name":"Next.MetadataOutlet","children":"$@45"}]}]]}] 3c:o3e7,23:["$","$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"}]]}] 25:["$","$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"}]]}] 27:["$","$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"}]]}] 3c:o10d2,29:["$","$L47",null,{"loading":[["$","$2","l",{"children":[["$","div",null,{"data-chat-skeleton-layout":true,"className":"flex-1 w-full flex","children":[["$","div",null,{"data-input":true,"aria-hidden":"true","className":"flex","children":["$","div",null,{"data-skeleton-chat-column":true,"className":"flex flex-col size-full pt-4 px-2 pb-2","children":[["$","div",null,{"className":"flex-1 overflow-hidden mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]","children":["$","div",null,{"className":"max-w-3xl mx-auto w-full flex-col pt-2","children":[["$","div",null,{"className":"@container/message group w-full [&_code]:break-all wrap-break-word flex flex-col gap-2 origin-right items-end px-2","data-testid":"skeleton-message","children":[["$","div",null,{"className":"flex items-center gap-1.5 pr-1","children":["$","div",null,{"className":"size-4 rounded-full bg-v0-gray-300"}]}],["$","div",null,{"className":"flex items-end sm:max-w-[min(fit-content,80%)] max-w-[90%] origin-top-right","children":["$","div",null,{"className":"border border-v0-gray-200 text-left relative rounded-[16px] bg-v0-gray-200 px-3 py-1.5 min-w-0 wrap-break-word group/message-bubble","children":["$","div",null,{"style":{"width":900,"height":120}}]}]}],["$","div",null,{"className":"flex items-center gap-1 justify-end flex-row-reverse mr-[-2px] h-6"}]]}],["$","div",null,{"className":"flex flex-col w-full gap-4 px-2","children":[["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}],["$","div",null,{"className":"gap-1 flex flex-col w-full relative","children":[["$","div","0",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","1",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","2",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","3",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","4",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"40%"}}]]}],["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}],["$","div",null,{"className":"gap-1 flex flex-col w-full relative","children":[["$","div","0",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","1",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","2",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"40%"}}]]}],["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}]]}],["$","div",null,{"className":"@container/message group w-full [&_code]:break-all wrap-break-word flex flex-col gap-2 origin-right items-end px-2","data-testid":"skeleton-message","children":[["$","div",null,{"className":"flex items-center gap-1.5 pr-1","children":["$","div",null,{"className":"size-4 rounded-full bg-v0-gray-300"}]}],["$","div",null,{"className":"flex items-end sm:max-w-[min(fit-content,80%)] max-w-[90%] origin-top-right","children":["$","div",null,{"className":"border border-v0-gray-200 text-left relative rounded-[16px] bg-v0-gray-200 px-3 py-1.5 min-w-0 wrap-break-word group/message-bubble","children":["$","div",null,{"style":{"width":900,"height":120}}]}]}],["$","div",null,{"className":"flex items-center gap-1 justify-end flex-row-reverse mr-[-2px] h-6"}]]}]]}]}],["$","div",null,{"className":"mx-auto w-full max-w-3xl","children":["$","div",null,{"className":"p-1.5 flex items-center gap-1 rounded-xl material-medium bg-v0-background-300 border border-v0-alpha-400","children":[["$","div",null,{"className":"flex size-7 shrink-0 items-center justify-center","children":["$","div",null,{"className":"animate-pulse bg-v0-gray-200 size-4 rounded"}]}],["$","div",null,{"className":"flex-1 min-w-0","children":"$L48"}],"$L49","$L4a"]}]}]]}]}],"$L4b"]}],"$L4c"]}],[],null],"children":"$L4d"}] 3c:oc44,2b:["$","$2","c",{"children":["$L4e",[["$","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/2vusl7yhrvrz1.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/16bvwngtq0an0.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/0xy71w62lr2m6.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/3pdkk6zv5cjgy.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/22gac00xljckf.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2j2aaf-pno5zb.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.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/11sl5r1xt7l7_.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/43_lbp7i6k4j7.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/03uqxyzmcknrq.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/3tshot3u_9o0_.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/2hs4dkypufpiq.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/1-1nps-2bh86p.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1w9o0zu9qxuxt.js","async":true,"nonce":"$undefined"}],["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}],["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/2m-bg0k3ds03m.js","async":true,"nonce":"$undefined"}]],null]}] 3c:o3e7,2d:["$","$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"}]]}] 2f:["$","$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"}]]}] 31:["$","$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"}]]}] 3c:ob16,33:["$","$L47",null,{"loading":[["$","$L91","l",{}],[["$","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/1vrpeun0d1lx7.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/1n6vl9w3r2ad0.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0xy71w62lr2m6.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/0dcv8_cdrvelu.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/3y_8xkuvpir5b.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/11sl5r1xt7l7_.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/42yfe8vtioux6.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3tshot3u_9o0_.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/22gac00xljckf.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/2lbsr349ar79m.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":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 3c:oe0b,35:["$","$2","c",{"children":[["$","$3e",null,{"fallback":["$","$L9d",null,{}],"children":"$L9e"}],[["$","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/20qj-y3d3bf_x.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3pdkk6zv5cjgy.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/1n6vl9w3r2ad0.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1ggzy5q9xq7me.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0xy71w62lr2m6.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2w_jt-oimkft1.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/16bvwngtq0an0.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/0zmudrgztopz8.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2hs4dkypufpiq.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/1w9o0zu9qxuxt.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/1-1nps-2bh86p.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/43_lbp7i6k4j7.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/42yfe8vtioux6.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/2lbsr349ar79m.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/1iqhb-e498oq9.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/3y_8xkuvpir5b.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/3tshot3u_9o0_.js","async":true,"nonce":"$undefined"}],["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/22gac00xljckf.js","async":true,"nonce":"$undefined"}],["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/03uqxyzmcknrq.js","async":true,"nonce":"$undefined"}],["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/2j2aaf-pno5zb.js","async":true,"nonce":"$undefined"}],["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/11sl5r1xt7l7_.js","async":true,"nonce":"$undefined"}],["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/2m-bg0k3ds03m.js","async":true,"nonce":"$undefined"}],["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}]],null]}] 3c:o32,37:["$","$2","c",{"children":["$L9f",null,null]}] 3c:oa86,a1:I[987761,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"AppCard"] a2:"FULL_BLEED_APP_CARD_CLASSNAME" a3:I[987761,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$a2"] a4:"/chat-static/_next/static/immutable/chunks/2y52rcwlrud2w.js" a5:"SidebarCollapseButton" a6:I[663042,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$a4"],"$a5"] a7:I[192842,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"ChatWarning"] a8:I[903785,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$a4"],"NewChatButton"] 41:300 48:["$","div",null,{"className":"animate-pulse bg-v0-gray-200 h-4 w-24 rounded"}] 49:["$","div",null,{"className":"animate-pulse bg-v0-gray-200 h-6 w-16 rounded-md"}] 4a:["$","div",null,{"className":"animate-pulse bg-v0-gray-200 size-7 rounded-full"}] 4b:["$","div",null,{"data-output":true,"className":"flex items-center justify-center bg-v0-background-200","children":["$","span",null,{"role":"status","aria-live":"polite","className":"sr-only","children":"Loading chat…"}]}] a0:T1963,3c:o1963,3c:o35d,4c:["$","span",null,{"data-v0-skeleton-chat-layout":"","hidden":true,"dangerouslySetInnerHTML":{"__html":"$a0"}}] 4d:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$3e",null,{"fallback":["$","$La1",null,{"className":"$a3","children":[["$","$La6",null,{"collapsedOnly":true,"syncWidth":true,"syncCollapsedMarginRight":"0px","syncExpandedMarginRight":"0px","peekOnHover":false,"className":"pointer-events-auto absolute left-3 top-3 z-20 hidden sm:flex"}],["$","$La7",null,{"description":"Loading…","title":"Chat Not Found","children":["$","$La8",null,{}]}]]}],"children":"$La9"}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}] 3c:o17,18:T8,variantsaa:T18d5,3c: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"}] });3c:o158,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$aa"}}],"$Lab","$Lac","$Lad","$Lae"]}],"$Laf"]}] 3c:o1000,b0:"GeistThemeScript" b1:I[86098,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$b0"] b2:I[600033,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"AppStoreMetaTag"] b3:I[86098,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"GeistProvider"] b4:I[818362,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"LocaleProvider"] b5:I[841245,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"MotionConfig"] b6:"AtomicContextSWRProvider" b7:I[850359,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$b6"] b8:"GlobalPromiseContextProvider" b9:I[850359,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$b8"] bc:I[827887,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"JotaiProvider"] bd:"ServerQuerySWRRuntimeProvider" be:I[74757,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$bd"] c0:I[815349,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"CleanupStorage"] c1:I[994115,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"Analytics"] c2:I[503803,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"SpeedInsights"] c4:"VercelianAppFlowMigrator" c5:I[23825,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$c4"] c6:I[108762,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"TrackInfo"] c7:I[578386,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"PageViewTracker"] c8:I[356301,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$3c:o44a,66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"AutoCapture"] ab:["$","$Lb1",null,{"storageKey":"theme"}] ac:["$","$3e",null,{"children":["$","$Lb2",null,{}]}] ad:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] ae:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://vercel.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\"}}]"}}] 3c:o93b,af:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased eEAu7a_variable dJgEwW_variable hGs1mq_variable","children":[["$","$Lb3",null,{"storageKey":"theme","withScript":false,"children":["$","$Lb4",null,{"locale":"en","children":["$","$Lb5",null,{"reducedMotion":"user","children":["$","$Lb7",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":["$","$Lb9",null,{"params":null,"promises":{"dailyModelUsage":"$@ba","freeFixWithV0Usage":"$@bb"},"children":[["$","$Lbc",null,{"children":["$","$Lbe",null,{"children":"$Lbf"}]}],["$","$Lc0",null,{}]]}]}]}]}]}],["$","$Lc1",null,{}],["$","$Lc2",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$3e",null,{"children":"$Lc3"}],["$","$Lc5",null,{}],["$","$Lc6",null,{}],["$","$Lc7",null,{}],["$","$Lc8",null,{}]]}] 3c:o90,3b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 3c:oe,40:T8,variants3c:o1000,c9:"HydrateDurableAtoms" ca:I[783749,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$c9"] cb:I[359783,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"DataProvider"] cc:I[32170,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"UserProvider"] ce:"AnimatedIconProvider" cf:I[908887,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$ce"] d0:I[30570,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"PortalProvider"] d1:"SnowflakePublishProvider" d2:I[966820,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$d1"] d3:"UserInputProvider" d4:I[472914,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$d3"] d5:I[69221,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"CmdkProvider"] d6:"VirtualMachineUIStateProvider" d7:I[319228,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$d6"] d8:"DeployedPreviewIframeRefProvider" d9:I[166890,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$d8"] da:"PreviewSourceUIStateProvider" db:I[197843,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$da"] dc:I[367078,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"LoaderProvider"] dd:"PromptFormUIProvider" de:I[595358,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$dd"] df:I[242759,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"FlagsProvider"] e1:I[549011,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"NuqsAdapter"] e2:"ChatTabsProvider" e3:I[568561,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$e2"] e4:"PersonalScopeMigrationAnnouncementProvider" e5:I[206559,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$e4"] e7:"AnnouncementVisibilityProvider" e8:I[878519,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","3c:o5cb,$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$e7"] eb:I[561588,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"Toaster"] ec:I[407562,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"Toaster"] ed:"SuspendingDialogs" ee:I[840793,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"$ed"] ef:I[323194,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"SignInDialog"] f0:I[279070,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"ConsentBanner"] f1:I[15279,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e"],"SessionManager"] 3c:o8ef,bf:["$","$Lca",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":["$","$Lcb",null,{"children":["$","$Lcc",null,{"expectUser":false,"userPromise":"$@cd","children":["$","$Lcf",null,{"children":["$","$Ld0",null,{"children":["$","$Ld2",null,{"children":["$","$Ld4",null,{"children":["$","$Ld5",null,{"children":["$","$Ld7",null,{"children":["$","$Ld9",null,{"children":["$","$Ldb",null,{"children":["$","$Ldc",null,{"children":["$","$Lde",null,{"children":["$","$Ldf",null,{"promise":"$@e0","middlewareFlags":["cgas"],"children":["$","$Le1",null,{"children":["$","$Le3",null,{"children":["$","$Le5",null,{"destinationTeamIdPromise":"$@e6","children":["$","$Le8",null,{"visiblePromise":"$@e9","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":[["$","$3e",null,{"fallback":null,"children":"$Lea"}],["$","$Leb",null,{}],["$","$Lec",null,{}],["$","$3e",null,{"fallback":null,"children":["$","$Lee",null,{}]}],["$","$Lef",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lf0",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 3c:o12c,a9:["$","$La1",null,{"className":"$a3","children":["$4d:props:children:1:props:notFound:0:props:fallback:props:children:0",["$","$La7",null,{"description":"This chat was deleted, made private, or no longer exists.","title":"Chat Not Found","children":null}]]}] c3:["$","$Lf1",null,{"enabled":false}] 3c:o20,cd:"$undefined" e9:true ea:null 3c:o77,40:0 38:0 22:0 36:0 2c:0 41:60 38:T8,variants36:T8,variants1b:T8,variants40:T2,id36:T5,scope2c:T2,id1b:T5,scope36:T2,id3c:o1000,f2:"RouteChatIdProvider" f3:I[903690,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$f2"] f4:"CompletionAttentionProvider" f5:I[607506,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"$f4"] f6:"SidebarUIProvider" f7:I[475961,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"$f6"] fa:"HeaderSlotClientRouter" fb:I[597544,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"$fa"] fc:"/chat-static/_next/static/immutable/chunks/0akev29afa59x.js" fd:I[32459,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$fc"],"default"] fe:I[990009,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"Header"] ff:"RevalidateChatIdSkeletonStyles" 100:I[564011,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"$ff"] 101:I[980088,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80"],"DynamicCMDK"] 102:"PromptQueueSnapshotProvider" 103:I[475641,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$102"] 106:"ChatPromiseContextProvider" 107:I[850359,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$106"] 10f:I[70040,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65",3c:o16c,"$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"GitChatHeader"] 110:I[580397,["$3"],"IconMark"] 9f:null 3c:o77f,43:["$","$Lf3",null,{"children":["$","$Lf5",null,{"children":["$","$Lf7",null,{"children":[["$","$3e",null,{"fallback":null,"children":"$@f8"}],["$","$3e",null,{"children":"$Lf9"}],false,false,["$","div",null,{"className":"isolate flex min-h-0 flex-1","children":[false,["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","$Lfb",null,{"headerSlot":["$","$L4",null,{"parallelRouterKey":"header","error":"$fd","errorStyles":[],"errorScripts":[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0akev29afa59x.js","async":true,"nonce":"$undefined"}]],"template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],"defaultSlot":["$","$Lfe",null,{}]}],["$","$L4",null,{"parallelRouterKey":"children","error":"$fd","errorStyles":"$43:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorStyles","errorScripts":"$43:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorScripts","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$L4",null,{"parallelRouterKey":"content","error":"$fd","errorStyles":"$43:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorStyles","errorScripts":"$43:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorScripts","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]]}],false,["$","$3e",null,{"children":["$","$L100",null,{}]}],["$","$L101",null,{}]]}]}]}] 3c:o176,4e:["$","$L103",null,{"initial":{"chatId":"lS7rpJmAQ3o","snapshot":"$@104"},"children":"$L105"}] 9e:["$","$L107",null,{"params":{"chatId":"lS7rpJmAQ3o"},"promises":{"attributes":"$@108","externalMeta":"$@109","latest":"$@10a","messagesRange":"$@10b","messages":"$@10c","template":"$@10d","gitStatus":"$@10e"},"children":["$","$L10f",null,{"chatId":"lS7rpJmAQ3o"}]}] e6:null 3c:o770,3f:[["$","title","0",{"children":"Integrate DitherVeil component - v0 by Vercel"}],["$","meta","1",{"name":"description","content":"## Integrate the component from React Bits You are helping integrate an open-source React component into an existing application. ### Component:..."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","link","3",{"rel":"canonical","href":"https://v0.app/chat/integrate-ditherveil-component-lS7rpJmAQ3o"}],["$","meta","4",{"property":"og:title","content":"Integrate DitherVeil component - v0 by Vercel"}],["$","meta","5",{"property":"og:description","content":"## Integrate the component from React Bits You are helping integrate an open-source React component into an existing application. ### Component:..."}],["$","meta","6",{"property":"og:image","content":"https://v0.app/chat/api/og/lS7rpJmAQ3o"}],["$","meta","7",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","8",{"name":"twitter:title","content":"Integrate DitherVeil component - v0 by Vercel"}],["$","meta","9",{"name":"twitter:description","content":"## Integrate the component from React Bits You are helping integrate an open-source React component into an existing application. ### Component:..."}],["$","meta","10",{"name":"twitter:image","content":"https://v0.app/chat/api/og/lS7rpJmAQ3o"}],["$","link","11",{"rel":"icon","href":"/assets/icon-light-32x32.png","media":"(prefers-color-scheme: light)","sizes":"32x32","type":"image/png"}],["$","link","12",{"rel":"icon","href":"/assets/icon-dark-32x32.png","media":"(prefers-color-scheme: dark)","sizes":"32x32","type":"image/png"}],["$","link","13",{"rel":"icon","href":"/assets/icon.svg","sizes":"32x32","type":"image/svg+xml"}],["$","link","14",{"rel":"apple-touch-icon","href":"/assets/apple-icon.png","type":"image/png"}],["$","$L110","15",{}]] 3c:o8,45:null 3c:od8b,118:"ExplicitChatIdProvider" 119:I[903690,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$118"] 11a:I[838238,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"SWRDataProvider"] 2c:T8,variants2c:T5,scope108:{"ok":true,"value":{"designSystemId":null,"title":"Integrate DitherVeil component","privacy":"public","access":1,"isAdmin":false,"isAuthor":false,"ownerId":"team_AKsfbcMELfg0jBxb54UgyjCD","authorId":"anon:NHHS05B4FjQkTnZkvG0SW","tailwindV4Default":true,"nextVersionDefault":16,"nextVersion15Default":false,"forceVMRendering":false,"isNextLiteReadOnly":false,"canWriteToChat":false,"ownerRestriction":null,"canManageChat":false,"chatCreatedAt":1790255677485,"hasBlock":true,"vercelProject":null,"hasGitConnection":false,"gitBase":null,"gitHead":null,"hasSnowflakeIntegration":false,"chatHasAnySnowflakeIntegration":false,"storageEntityType":"v0-git-s3-storage","storageEntityId":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","vercelProjectId":"prj_EqVlsqGa2eABmZ6z2gmVIgYzmhzb","defaultPreviewPath":null,"agentWorkspace":false,"workspaceRuntime":false}} 109:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 10a:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 10b:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 10c:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 10d:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 10e:{"ok":true,"value":null,"__seedOnly":true} f8:null 11d:[] 11e:[["b_kh3piQZg5Dg",null],["b_M24PDVxdJaG",null],["b_nYnfCpdpxix",null],["b_uDT03DnvvAk",null],["b_rNMuwZtwjPe",null]] 11f:[["b_kh3piQZg5Dg",{"templateVersionId":null,"templateCanonId":null}],["b_M24PDVxdJaG",{"templateVersionId":null,"templateCanonId":null}],["b_nYnfCpdpxix",{"templateVersionId":null,"templateCanonId":null}],["b_uDT03DnvvAk",{"templateVersionId":null,"templateCanonId":null}],["b_rNMuwZtwjPe",{"templateVersionId":null,"templateCanonId":null}]] 120:[["b_rn7Vg8Uua6U","$D2026-09-24T13:15:04.039Z"],["b_o5rp7ftn0bg","$D2026-09-24T13:17:00.768Z"],["b_B9HwhepVlDV","$D2026-09-24T19:34:11.998Z"],["b_MdXa9tAPEh5","$D2026-09-24T19:47:59.941Z"],["b_OCuvaIUWk55","$D2026-09-24T19:48:29.272Z"],["b_PCQj8V5l3PA","$D2026-09-24T19:49:06.253Z"],["b_pSGfqSlLNPo","$D2026-09-24T19:49:08.095Z"],["b_kh3piQZg5Dg","$D2026-09-24T21:29:41.880Z"],["b_M24PDVxdJaG","$D2026-09-24T21:30:38.177Z"],["b_nYnfCpdpxix","$D2026-09-24T21:33:05.230Z"],["b_uDT03DnvvAk","$D2026-09-24T21:33:09.142Z"],["b_rNMuwZtwjPe","$D2026-09-24T21:33:15.162Z"]] 121:[["b_kh3piQZg5Dg",false],["b_M24PDVxdJaG",false],["b_nYnfCpdpxix",false],["b_uDT03DnvvAk",false],["b_rNMuwZtwjPe",false]] 3c:o615,122:[["b_kh3piQZg5Dg",{"git":{"ref":"main","sha":"759dcef0942b5e59d5a9918b003e6d3fcb094998","type":"github","repoId":0,"repoName":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","ownerName":"v0-git-s3-storage","commitMessage":"feat: replace PortraitHero with DitherVeil component in page layout\n\nAdded advanced DitherVeil visual effects for enhanced user experience"}}],["b_M24PDVxdJaG",{"git":{"ref":"main","sha":"78537c78264ea1e9aee7f5ce6db0bde63017c76e","type":"github","repoId":0,"repoName":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","ownerName":"v0-git-s3-storage","commitMessage":"refactor: migrate DitherVeil component to TypeScript and remove CSS file"}}],["b_nYnfCpdpxix",{"git":{"ref":"main","sha":"21a67715094f5f6d0312d4990f32f0f47663f9c0","type":"github","repoId":0,"repoName":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","ownerName":"v0-git-s3-storage","commitMessage":"feat: add CSS file and update DitherVeil component styling"}}],["b_uDT03DnvvAk",{"git":{"ref":"main","sha":"21a67715094f5f6d0312d4990f32f0f47663f9c0","type":"github","repoId":0,"repoName":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","ownerName":"v0-git-s3-storage","commitMessage":"feat: add CSS file and update DitherVeil component styling"}}],["b_rNMuwZtwjPe",{"git":{"ref":"main","sha":"21a67715094f5f6d0312d4990f32f0f47663f9c0","type":"github","repoId":0,"repoName":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","ownerName":"v0-git-s3-storage","commitMessage":"feat: add CSS file and update DitherVeil component styling"},"deploymentId":"dpl_2tosZ3pUaN3LTG2xLSAFBxZp7MWU"}]] 3c:o17c,123:[["b_kh3piQZg5Dg",null],["b_M24PDVxdJaG",null],["b_nYnfCpdpxix",null],["b_uDT03DnvvAk",null],["b_rNMuwZtwjPe",null]] 124:[["b_kh3piQZg5Dg",true],["b_M24PDVxdJaG",true],["b_nYnfCpdpxix",true],["b_uDT03DnvvAk",true],["b_rNMuwZtwjPe",true]] 125:[["b_kh3piQZg5Dg",true],["b_M24PDVxdJaG",true],["b_nYnfCpdpxix",true],["b_uDT03DnvvAk",true],["b_rNMuwZtwjPe",true]] 126:[] 127:T6932,3c:o6932,import { useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import { Renderer, Program, Mesh, Triangle, Texture, RenderTarget } from 'ogl'; type Pattern = 'bayer' | 'noise' | 'atkinson' | 'floyd' | 'lines'; type Palette = 'duotone' | 'rgb'; type Fit = 'contain' | 'cover'; type Kernel = [number, number, number][]; type Rgb = [number, number, number]; export interface DitherVeilProps { src?: string; fit?: Fit; pattern?: Pattern; pixelSize?: number; levels?: number; palette?: Palette; inkColor?: string; paperColor?: string; contrast?: number; brightness?: number; revealRadius?: number; softness?: number; linger?: number; rimColor?: string; rim?: number; reverse?: boolean; wander?: boolean; clickBurst?: boolean; className?: string; style?: CSSProperties; } type Settings = Required>; const DEFAULT_SRC = 'https://images.unsplash.com/photo-1737071371043-761e02b1ef95?q=80&w=1400&auto=format&fit=crop'; const ORDERED: Record = { bayer: 0, noise: 1, lines: 2 }; const KERNELS: Record = { atkinson: [ [1, 0, 1 / 8], [2, 0, 1 / 8], [-1, 1, 1 / 8], [0, 1, 1 / 8], [1, 1, 1 / 8], [0, 2, 1 / 8] ], floyd: [ [1, 0, 7 / 16], [-1, 1, 3 / 16], [0, 1, 5 / 16], [1, 1, 1 / 16] ] }; const MASK_SCALE = 0.5; const MAX_BURSTS = 4; const BURST_SECONDS = 1.2; const HOLD = 1.6; const INTRO_MS = 1100; const hexToRgb = (hex: string): Rgb => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.replace(/./g, c => c + c); const n = parseInt(h.slice(0, 6), 16); return Number.isNaN(n) ? [0, 0, 0] : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; }; const fitScale = (w: number, h: number, iw: number, ih: number, contain: boolean): [number, number] => { const ratio = w / h / (iw / ih); if (contain) return ratio > 1 ? [ratio, 1] : [1, 1 / ratio]; return ratio > 1 ? [1, 1 / ratio] : [ratio, 1]; }; const wanderAt = (t: number, w: number, h: number): [number, number] => [ w * (0.5 + 0.33 * Math.sin(t * 0.53) + 0.08 * Math.sin(t * 1.31 + 0.6)), h * (0.5 + 0.28 * Math.sin(t * 0.71 + 1.1) + 0.07 * Math.cos(t * 1.57)) ]; const measureEdge = (context: CanvasRenderingContext2D, image: HTMLImageElement): { matte: Rgb; plain: boolean } => { const size = 32; context.canvas.width = size; context.canvas.height = size; context.drawImage(image, 0, 0, size, size); const data = context.getImageData(0, 0, size, size).data; const sum = [0, 0, 0]; const squares = [0, 0, 0]; let count = 0; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { if (x > 0 && y > 0 && x < size - 1 && y < size - 1) continue; for (let c = 0; c < 3; c++) { const v = data[(y * size + x) * 4 + c] / 255; sum[c] += v; squares[c] += v * v; } count++; } } const matte: Rgb = [sum[0] / count, sum[1] / count, sum[2] / count]; const spread = matte.reduce((total, mean, c) => total + Math.sqrt(Math.max(0, squares[c] / count - mean * mean)), 0) / 3; return { matte, plain: spread < 0.06 }; }; let blueNoise: Uint8Array | null = null; const getBlueNoise = (): Uint8Array => { if (blueNoise) return blueNoise; const size = 64; const n = size * size; const wrap = size - 1; const taps: number[] = []; for (let dy = -6; dy <= 6; dy++) { for (let dx = -6; dx <= 6; dx++) taps.push(dx, dy, Math.exp(-(dx * dx + dy * dy) / 4.5)); } const energy = new Float32Array(n); const on = new Uint8Array(n); const splat = (i: number, sign: number) => { const x = i % size; const y = (i - x) / size; for (let k = 0; k < taps.length; k += 3) { energy[((y + taps[k + 1]) & wrap) * size + ((x + taps[k]) & wrap)] += sign * taps[k + 2]; } }; const find = (state: number, highest: boolean) => { let best = 0; let value = highest ? -Infinity : Infinity; for (let i = 0; i < n; i++) { if (on[i] !== state) continue; if (highest ? energy[i] > value : energy[i] < value) { value = energy[i]; best = i; } } return best; }; let seed = 7; const random = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const initial = Math.round(n * 0.1); for (let placed = 0; placed < initial; ) { const i = Math.floor(random() * n); if (on[i]) continue; on[i] = 1; splat(i, 1); placed++; } for (let guard = 0; guard < n; guard++) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); const gap = find(0, false); on[gap] = 1; splat(gap, 1); if (gap === cluster) break; } const seedOn = on.slice(); const seedEnergy = energy.slice(); const rank = new Uint16Array(n); for (let r = initial - 1; r >= 0; r--) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); rank[cluster] = r; } on.set(seedOn); energy.set(seedEnergy); for (let r = initial; r < n; r++) { const gap = find(0, false); on[gap] = 1; splat(gap, 1); rank[gap] = r; } const data = new Uint8Array(n * 4); for (let i = 0; i < n; i++) { const v = Math.floor((rank[i] / n) * 256); data[i * 4] = v; data[i * 4 + 1] = v; data[i * 4 + 2] = v; data[i * 4 + 3] = 255; } blueNoise = data; return data; }; const diffuse = ( pixels: Uint8ClampedArray, cols: number, rows: number, kernel: Kernel, levels: number, rgb: boolean, grade: (v: number) => number ): Uint8Array => { const channels = rgb ? 3 : 1; const values = new Float32Array(cols * rows * channels); for (let i = 0; i < cols * rows; i++) { const r = pixels[i * 4] / 255; const g = pixels[i * 4 + 1] / 255; const b = pixels[i * 4 + 2] / 255; if (rgb) { values[i * 3] = grade(r); values[i * 3 + 1] = grade(g); values[i * 3 + 2] = grade(b); } else { values[i] = grade(0.2126 * r + 0.7152 * g + 0.0722 * b); } } const steps = levels - 1; const out = new Uint8Array(cols * rows * 4); for (let y = 0; y < rows; y++) { const dir = y & 1 ? -1 : 1; for (let i = 0; i < cols; i++) { const x = dir > 0 ? i : cols - 1 - i; const p = y * cols + x; for (let c = 0; c < channels; c++) { const old = values[p * channels + c]; const q = Math.min(steps, Math.max(0, Math.round(old * steps))) / steps; const err = old - q; const byte = Math.round(q * 255); if (rgb) out[p * 4 + c] = byte; else out[p * 4] = out[p * 4 + 1] = out[p * 4 + 2] = byte; for (let k = 0; k < kernel.length; k++) { const nx = x + kernel[k][0] * dir; const ny = y + kernel[k][1]; if (nx < 0 || nx >= cols || ny >= rows) continue; values[(ny * cols + nx) * channels + c] += err * kernel[k][2]; } } out[p * 4 + 3] = 255; } } return out; }; const vertex = `#version 300 es in vec2 position; in vec2 uv; out vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); } `; const maskFragment = `#version 300 es precision highp float; uniform sampler2D tPrev; uniform vec2 uSize; uniform vec2 uFrom; uniform vec2 uTo; uniform float uRadius; uniform float uSoftness; uniform float uStrength; uniform float uFade; uniform float uHold; in vec2 vUv; out vec4 fragColor; float strokeDistance(vec2 p, vec2 a, vec2 b) { vec2 ab = b - a; float h = clamp(dot(p - a, ab) / max(dot(ab, ab), 0.0001), 0.0, 1.0); return length(p - a - ab * h); } void main() { vec2 p = vec2(vUv.x, 1.0 - vUv.y) * uSize; float trail = max(texture(tPrev, vUv).r - uFade, 0.0); float band = max(uRadius * uSoftness, 1.0) * uHold; float d = strokeDistance(p, uFrom, uTo); trail = max(trail, clamp((uRadius - d) / band, 0.0, 1.0) * uStrength); fragColor = vec4(trail, 0.0, 0.0, 1.0); } `; const viewFragment = `#version 300 es precision highp float; precision highp int; uniform sampler2D tImage; uniform sampler2D tMask; uniform sampler2D tNoise; uniform sampler2D tDiffused; uniform vec2 uResolution; uniform vec2 uCover; uniform float uLod; uniform float uCell; uniform int uPattern; uniform int uPalette; uniform float uLevels; uniform vec3 uInk; uniform vec3 uPaper; uniform vec3 uRimColor; uniform float uRim; uniform float uContrast; uniform float uBrightness; uniform float uReverse; uniform float uIntro; uniform float uHold; uniform vec3 uMatte; uniform float uKey; uniform vec2 uSize; uniform vec4 uBursts[4]; uniform float uBurstWidth; in vec2 vUv; out vec4 fragColor; float bayer(vec2 cell) { ivec2 p = ivec2(mod(cell, 8.0)); int v = p.x ^ p.y; int m = ((v & 1) << 5) | ((p.y & 1) << 4) | ((v & 2) << 2) | ((p.y & 2) << 1) | ((v & 4) >> 1) | ((p.y & 4) >> 2); return (float(m) + 0.5) / 64.0; } float blueNoise(vec2 cell) { return (texelFetch(tNoise, ivec2(mod(cell, 64.0)), 0).r * 255.0 + 0.5) / 256.0; } float engraving(vec2 cell) { float period = 6.0; float f = (mod(cell.x + cell.y, period) + 0.5) / period; return clamp(abs(f * 2.0 - 1.0) + (bayer(cell) - 0.5) * (2.0 / period), 0.0, 1.0); } vec2 imageUv(vec2 uv) { return (uv - 0.5) * uCover + 0.5; } float within(vec2 p) { vec2 s = step(vec2(0.0), p) * step(p, vec2(1.0)); return s.x * s.y; } vec3 grade(vec3 c) { return pow(clamp((c - 0.5) * uContrast + 0.5 + uBrightness, 0.0, 1.0), vec3(1.6)); } float shockwave(vec2 p) { float value = 0.0; for (int i = 0; i < 4; i++) { vec4 burst = uBursts[i]; if (burst.w <= 0.0) continue; float offset = distance(p, burst.xy) - burst.z; float edge = offset > 0.0 ? offset / (uBurstWidth * 0.35) : -offset / uBurstWidth; value = max(value, clamp(1.0 - edge, 0.0, 1.0) * burst.w); } return value; } vec3 toned(vec3 c) { return uPalette == 1 ? grade(c) : grade(vec3(dot(c, vec3(0.2126, 0.7152, 0.0722)))); } vec3 quantize(vec3 v, float t) { float steps = max(uLevels - 1.0, 1.0); vec3 s = v * steps; vec3 base = floor(s); return min(base + step(vec3(t), s - base), vec3(steps)) / steps; } void main() { vec2 px = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y); vec2 cell = floor(px / uCell); vec2 center = (cell + 0.5) * uCell; vec2 cellUv = vec2(center.x / uResolution.x, 1.0 - center.y / uResolution.y); vec2 sampleUv = imageUv(cellUv); float framed = within(sampleUv); vec3 level; if (uPattern == 3) { level = texelFetch(tDiffused, ivec2(cell), 0).rgb; } else { vec3 c = mix(uMatte, textureLod(tImage, sampleUv, uLod).rgb, framed); float t = uPattern == 1 ? blueNoise(cell) : (uPattern == 2 ? engraving(cell) : bayer(cell)); level = quantize(toned(c), t); } vec3 color = mix(uInk, mix(uInk, uPaper, level), max(framed, uKey)); vec3 backdrop = mix(uInk, uPaper, toned(uMatte)); vec2 photoUv = imageUv(vUv); vec3 raw = texture(tImage, photoUv).rgb; float plain = uKey * (1.0 - smoothstep(0.05, 0.22, distance(raw, uMatte))); vec3 photo = mix(mix(uInk, backdrop, uKey), mix(raw, backdrop, plain), within(photoUv)); vec2 point = vec2(cellUv.x, 1.0 - cellUv.y) * uSize; float mask = max(clamp(texture(tMask, cellUv).r * uHold, 0.0, 1.0), shockwave(point)); float shown = mix(mask, 1.0 - mask, uReverse); float order = bayer(cell.yx); float low = order * (1.0 - uRim); color = mix(color, uRimColor, step(low, shown) * step(0.001, uRim)); color = mix(color, photo, step(low + uRim, shown)); vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0); float spread = length((cellUv - 0.5) * aspect) / length(aspect * 0.5); float appear = step(spread * 0.72 + bayer(cell + vec2(3.0, 5.0)) * 0.28, uIntro * 1.001); fragColor = vec4(mix(uInk, color, appear), 1.0); } `; const DitherVeil = ({ src = DEFAULT_SRC, fit = 'contain', pattern = 'floyd', pixelSize = 2, levels = 2, palette = 'duotone', inkColor = '#120f17', paperColor = '#f4f1ea', contrast = 1.15, brightness = 0, revealRadius = 200, softness = 0.6, linger = 1, rimColor = '#a78bfa', rim = 0, reverse = false, wander = false, clickBurst = true, className = '', style }: DitherVeilProps) => { const containerRef = useRef(null); const settingsRef = useRef(null); const wakeRef = useRef<() => void>(() => {}); useEffect(() => { settingsRef.current = { fit, pattern, pixelSize, levels, palette, inkColor, paperColor, contrast, brightness, revealRadius, softness, linger, rimColor, rim, reverse, wander, clickBurst }; wakeRef.current(); }); useEffect(() => { const container = containerRef.current; if (!container) return undefined; const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio || 1, 2), alpha: false, antialias: false }); const gl = renderer.gl; const canvas = gl.canvas; canvas.style.display = 'block'; canvas.style.width = '100%'; canvas.style.height = '100%'; container.appendChild(canvas); const gl2 = gl as WebGL2RenderingContext; const floatMask = renderer.isWebgl2 && !!renderer.getExtension('EXT_color_buffer_float'); const geometry = new Triangle(gl); const dataTexture = () => new Texture(gl, { image: new Uint8Array(4), width: 1, height: 1, generateMipmaps: false, flipY: false, minFilter: gl.NEAREST, magFilter: gl.NEAREST }); const imageTexture = new Texture(gl, { minFilter: gl.LINEAR_MIPMAP_LINEAR, magFilter: gl.LINEAR }); const noiseTexture = dataTexture(); const diffusedTexture = dataTexture(); const createMask = (w: number, h: number) => new RenderTarget(gl, { width: w, height: h, depth: false, type: floatMask ? gl2.HALF_FLOAT : gl.UNSIGNED_BYTE, internalFormat: floatMask ? gl2.RGBA16F : gl.RGBA, minFilter: gl.LINEAR, magFilter: gl.LINEAR }); const destroyMask = (target: RenderTarget) => { gl.deleteFramebuffer(target.buffer); gl.deleteTexture(target.texture.texture); }; let masks = [createMask(2, 2), createMask(2, 2)]; const maskUniforms = { tPrev: { value: masks[0].texture }, uSize: { value: [1, 1] }, uFrom: { value: [0, 0] }, uTo: { value: [0, 0] }, uRadius: { value: 1 }, uSoftness: { value: 0.5 }, uStrength: { value: 0 }, uFade: { value: 1 }, uHold: { value: HOLD } }; const viewUniforms = { tImage: { value: imageTexture }, tMask: { value: masks[0].texture }, tNoise: { value: noiseTexture }, tDiffused: { value: diffusedTexture }, uResolution: { value: [1, 1] }, uCover: { value: [1, 1] }, uLod: { value: 0 }, uCell: { value: 3 }, uPattern: { value: 0 }, uPalette: { value: 0 }, uLevels: { value: 2 }, uInk: { value: [0, 0, 0] }, uPaper: { value: [1, 1, 1] }, uRimColor: { value: [1, 1, 1] }, uRim: { value: 0 }, uContrast: { value: 1 }, uBrightness: { value: 0 }, uReverse: { value: 0 }, uIntro: { value: 0 }, uHold: { value: HOLD }, uMatte: { value: [0, 0, 0] }, uKey: { value: 0 }, uSize: { value: [1, 1] }, uBursts: { value: Array.from({ length: MAX_BURSTS * 4 }, () => 0) }, uBurstWidth: { value: 60 } }; const program = (fragment: string, uniforms: Record) => new Program(gl, { vertex, fragment, uniforms, depthTest: false, depthWrite: false }); const maskMesh = new Mesh(gl, { geometry, program: program(maskFragment, maskUniforms) }); const viewMesh = new Mesh(gl, { geometry, program: program(viewFragment, viewUniforms) }); const sampler = document.createElement('canvas'); const samplerContext = sampler.getContext('2d', { willReadFrequently: true }); let image: HTMLImageElement | null = null; let introStart = 0; let diffusedKey = ''; let diffusionBlocked = false; let width = 1; let height = 1; let visible = true; let raf = 0; let last = performance.now(); let trailUntil = 0; let presence = 0; let drift = 0; const pointer = { x: 0, y: 0, inside: false, fresh: true, placed: false }; const brush = { x: 0, y: 0, px: 0, py: 0 }; const bursts: { x: number; y: number; start: number }[] = []; const layout = () => { width = Math.max(1, container.clientWidth); height = Math.max(1, container.clientHeight); renderer.setSize(width, height); viewUniforms.uResolution.value = [canvas.width, canvas.height]; maskUniforms.uSize.value = [width, height]; viewUniforms.uSize.value = [width, height]; const mw = Math.max(2, Math.round(width * MASK_SCALE)); const mh = Math.max(2, Math.round(height * MASK_SCALE)); if (mw !== masks[0].width || mh !== masks[0].height) { masks.forEach(destroyMask); masks = [createMask(mw, mh), createMask(mw, mh)]; } if (!pointer.placed) { pointer.x = width / 2; pointer.y = height / 2; } }; const updateDiffusion = (cell: number, s: Settings) => { if (!image || !samplerContext) return; const cols = Math.ceil(canvas.width / cell); const rows = Math.ceil(canvas.height / cell); const key = [ s.pattern, s.levels, s.palette, s.contrast, s.brightness, s.fit, cols, rows, canvas.width, canvas.height ].join('|'); if (key === diffusedKey) return; diffusedKey = key; const [cx, cy] = viewUniforms.uCover.value; const iw = image.naturalWidth; const ih = image.naturalHeight; sampler.width = cols; sampler.height = rows; samplerContext.imageSmoothingEnabled = true; samplerContext.imageSmoothingQuality = 'high'; const [mr, mg, mb] = viewUniforms.uMatte.value; samplerContext.fillStyle = `rgb(${mr * 255}, ${mg * 255}, ${mb * 255})`; samplerContext.fillRect(0, 0, cols, rows); const sx = (0.5 - 0.5 * cx) * iw; const sy = (0.5 - 0.5 * cy) * ih; const sw = ((cols * cell) / canvas.width) * cx * iw; const sh = ((rows * cell) / canvas.height) * cy * ih; const x0 = Math.max(sx, 0); const y0 = Math.max(sy, 0); const x1 = Math.min(sx + sw, iw); const y1 = Math.min(sy + sh, ih); if (x1 > x0 && y1 > y0) { samplerContext.drawImage( image, x0, y0, x1 - x0, y1 - y0, ((x0 - sx) / sw) * cols, ((y0 - sy) / sh) * rows, ((x1 - x0) / sw) * cols, ((y1 - y0) / sh) * rows ); } const grade = (v: number) => Math.pow(Math.min(1, Math.max(0, (v - 0.5) * s.contrast + 0.5 + s.brightness)), 1.6); const pixels = samplerContext.getImageData(0, 0, cols, rows).data; diffusedTexture.image = diffuse(pixels, cols, rows, KERNELS[s.pattern], s.levels, s.palette === 'rgb', grade); diffusedTexture.width = cols; diffusedTexture.height = rows; diffusedTexture.needsUpdate = true; }; const frame = (now: number) => { raf = 0; const s = settingsRef.current; if (!s) return; const dt = Math.min(0.05, Math.max(0, (now - last) / 1000)); last = now; const wanderOn = s.wander && !reducedMotion; let targetX = pointer.x; let targetY = pointer.y; if (!pointer.inside && wanderOn) { drift = Math.min(1, drift + dt / 1.2); const [wx, wy] = wanderAt(now / 1000, width, height); const k = drift * drift * (3 - 2 * drift); targetX += (wx - targetX) * k; targetY += (wy - targetY) * k; } else { drift = 0; } presence += ((pointer.inside || wanderOn ? 1 : 0) - presence) * (1 - Math.exp(-dt / 0.16)); if (pointer.fresh) { brush.x = brush.px = targetX; brush.y = brush.py = targetY; pointer.fresh = false; } else { const follow = 1 - Math.exp(-dt / 0.035); brush.x += (targetX - brush.x) * follow; brush.y += (targetY - brush.y) * follow; } const burstData = viewUniforms.uBursts.value; burstData.fill(0); for (let i = bursts.length - 1; i >= 0; i--) { if ((now - bursts[i].start) / 1000 >= BURST_SECONDS) bursts.splice(i, 1); } bursts.forEach((b, i) => { const k = Math.max(0, (now - b.start) / 1000 / BURST_SECONDS); const reach = Math.hypot(Math.max(b.x, width - b.x), Math.max(b.y, height - b.y)) + viewUniforms.uBurstWidth.value; burstData[i * 4] = b.x; burstData[i * 4 + 1] = b.y; burstData[i * 4 + 2] = reach * Math.sin((k * Math.PI) / 2); burstData[i * 4 + 3] = 1 - k * k * k; }); if (presence > 0.002) trailUntil = now + s.linger * 1000 + 150; const minFade = floatMask ? 0 : 1.5 / 255; const fade = s.linger > 0 ? dt / s.linger : 1; maskUniforms.tPrev.value = masks[0].texture; maskUniforms.uFrom.value = [brush.px, brush.py]; maskUniforms.uTo.value = [brush.x, brush.y]; maskUniforms.uRadius.value = s.revealRadius * (0.45 + 0.55 * presence); maskUniforms.uSoftness.value = s.softness; maskUniforms.uStrength.value = presence; maskUniforms.uFade.value = Math.max(fade, minFade); viewUniforms.uBurstWidth.value = Math.max(60, s.revealRadius * 0.9); renderer.render({ scene: maskMesh, target: masks[1] }); masks.reverse(); brush.px = brush.x; brush.py = brush.y; const cell = Math.max(1, Math.round(s.pixelSize * renderer.dpr)); if (image) { viewUniforms.uCover.value = fitScale( canvas.width, canvas.height, image.naturalWidth, image.naturalHeight, s.fit === 'contain' ); } let patternIndex = ORDERED[s.pattern] ?? 0; if (KERNELS[s.pattern]) { patternIndex = 0; if (image && !diffusionBlocked) { try { updateDiffusion(cell, s); patternIndex = 3; } catch { diffusionBlocked = true; } } } if (patternIndex === 1 && noiseTexture.width !== 64) { noiseTexture.image = getBlueNoise(); noiseTexture.width = 64; noiseTexture.height = 64; noiseTexture.needsUpdate = true; } const texelsPerPixel = image ? (viewUniforms.uCover.value[0] * image.naturalWidth) / canvas.width : 1; viewUniforms.tMask.value = masks[0].texture; viewUniforms.uCell.value = cell; viewUniforms.uLod.value = Math.log2(Math.max(cell * texelsPerPixel, 1)); viewUniforms.uPattern.value = patternIndex; viewUniforms.uPalette.value = s.palette === 'rgb' ? 1 : 0; viewUniforms.uLevels.value = Math.max(2, Math.round(s.levels)); viewUniforms.uInk.value = hexToRgb(s.inkColor); viewUniforms.uPaper.value = hexToRgb(s.paperColor); viewUniforms.uRimColor.value = hexToRgb(s.rimColor); viewUniforms.uRim.value = Math.min(Math.max(s.rim, 0), 0.95); viewUniforms.uContrast.value = s.contrast; viewUniforms.uBrightness.value = s.brightness; viewUniforms.uReverse.value = s.reverse ? 1 : 0; const intro = image ? Math.min(1, (now - introStart) / INTRO_MS) : 0; viewUniforms.uIntro.value = 1 - Math.pow(1 - intro, 2); renderer.render({ scene: viewMesh }); const busy = pointer.inside || wanderOn || presence > 0.002 || bursts.length > 0 || now < trailUntil || (image && intro < 1); if (busy && visible) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; wakeRef.current = wake; const img = new Image(); img.crossOrigin = 'anonymous'; img.decoding = 'async'; img.onload = () => { image = img; imageTexture.image = img; try { if (samplerContext) { const edge = measureEdge(samplerContext, img); viewUniforms.uMatte.value = edge.matte; viewUniforms.uKey.value = edge.plain ? 1 : 0; } } catch {} introStart = performance.now(); wake(); }; img.src = src; const locate = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.placed = true; }; const onMove = (e: PointerEvent) => { locate(e); if (!pointer.inside) { pointer.inside = true; pointer.fresh = true; } wake(); }; const onLeave = () => { pointer.inside = false; wake(); }; const onDown = (e: PointerEvent) => { onMove(e); if (!settingsRef.current?.clickBurst || (e.pointerType === 'mouse' && e.button !== 0)) return; bursts.push({ x: pointer.x, y: pointer.y, start: performance.now() }); if (bursts.length > MAX_BURSTS) bursts.shift(); }; container.addEventListener('pointermove', onMove, { passive: true }); container.addEventListener('pointerenter', onMove, { passive: true }); container.addEventListener('pointerdown', onDown, { passive: true }); container.addEventListener('pointerleave', onLeave, { passive: true }); container.addEventListener('pointercancel', onLeave, { passive: true }); const resizeObserver = new ResizeObserver(() => { layout(); wake(); }); resizeObserver.observe(container); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); intersectionObserver.observe(container); layout(); wake(); return () => { cancelAnimationFrame(raf); wakeRef.current = () => {}; resizeObserver.disconnect(); intersectionObserver.disconnect(); img.onload = null; container.removeEventListener('pointermove', onMove); container.removeEventListener('pointerenter', onMove); container.removeEventListener('pointerdown', onDown); container.removeEventListener('pointerleave', onLeave); container.removeEventListener('pointercancel', onLeave); gl.getExtension('WEBGL_lose_context')?.loseContext(); if (canvas.parentNode) canvas.parentNode.removeChild(canvas); }; }, [src]); return (

); }; export default DitherVeil;3c:oa,128:T6921,3c:o6921,Or if you want it as css import { useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import { Renderer, Program, Mesh, Triangle, Texture, RenderTarget } from 'ogl'; import './DitherVeil.css'; type Pattern = 'bayer' | 'noise' | 'atkinson' | 'floyd' | 'lines'; type Palette = 'duotone' | 'rgb'; type Fit = 'contain' | 'cover'; type Kernel = [number, number, number][]; type Rgb = [number, number, number]; export interface DitherVeilProps { src?: string; fit?: Fit; pattern?: Pattern; pixelSize?: number; levels?: number; palette?: Palette; inkColor?: string; paperColor?: string; contrast?: number; brightness?: number; revealRadius?: number; softness?: number; linger?: number; rimColor?: string; rim?: number; reverse?: boolean; wander?: boolean; clickBurst?: boolean; className?: string; style?: CSSProperties; } type Settings = Required>; const DEFAULT_SRC = 'https://images.unsplash.com/photo-1737071371043-761e02b1ef95?q=80&w=1400&auto=format&fit=crop'; const ORDERED: Record = { bayer: 0, noise: 1, lines: 2 }; const KERNELS: Record = { atkinson: [ [1, 0, 1 / 8], [2, 0, 1 / 8], [-1, 1, 1 / 8], [0, 1, 1 / 8], [1, 1, 1 / 8], [0, 2, 1 / 8] ], floyd: [ [1, 0, 7 / 16], [-1, 1, 3 / 16], [0, 1, 5 / 16], [1, 1, 1 / 16] ] }; const MASK_SCALE = 0.5; const MAX_BURSTS = 4; const BURST_SECONDS = 1.2; const HOLD = 1.6; const INTRO_MS = 1100; const hexToRgb = (hex: string): Rgb => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.replace(/./g, c => c + c); const n = parseInt(h.slice(0, 6), 16); return Number.isNaN(n) ? [0, 0, 0] : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; }; const fitScale = (w: number, h: number, iw: number, ih: number, contain: boolean): [number, number] => { const ratio = w / h / (iw / ih); if (contain) return ratio > 1 ? [ratio, 1] : [1, 1 / ratio]; return ratio > 1 ? [1, 1 / ratio] : [ratio, 1]; }; const wanderAt = (t: number, w: number, h: number): [number, number] => [ w * (0.5 + 0.33 * Math.sin(t * 0.53) + 0.08 * Math.sin(t * 1.31 + 0.6)), h * (0.5 + 0.28 * Math.sin(t * 0.71 + 1.1) + 0.07 * Math.cos(t * 1.57)) ]; const measureEdge = (context: CanvasRenderingContext2D, image: HTMLImageElement): { matte: Rgb; plain: boolean } => { const size = 32; context.canvas.width = size; context.canvas.height = size; context.drawImage(image, 0, 0, size, size); const data = context.getImageData(0, 0, size, size).data; const sum = [0, 0, 0]; const squares = [0, 0, 0]; let count = 0; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { if (x > 0 && y > 0 && x < size - 1 && y < size - 1) continue; for (let c = 0; c < 3; c++) { const v = data[(y * size + x) * 4 + c] / 255; sum[c] += v; squares[c] += v * v; } count++; } } const matte: Rgb = [sum[0] / count, sum[1] / count, sum[2] / count]; const spread = matte.reduce((total, mean, c) => total + Math.sqrt(Math.max(0, squares[c] / count - mean * mean)), 0) / 3; return { matte, plain: spread < 0.06 }; }; let blueNoise: Uint8Array | null = null; const getBlueNoise = (): Uint8Array => { if (blueNoise) return blueNoise; const size = 64; const n = size * size; const wrap = size - 1; const taps: number[] = []; for (let dy = -6; dy <= 6; dy++) { for (let dx = -6; dx <= 6; dx++) taps.push(dx, dy, Math.exp(-(dx * dx + dy * dy) / 4.5)); } const energy = new Float32Array(n); const on = new Uint8Array(n); const splat = (i: number, sign: number) => { const x = i % size; const y = (i - x) / size; for (let k = 0; k < taps.length; k += 3) { energy[((y + taps[k + 1]) & wrap) * size + ((x + taps[k]) & wrap)] += sign * taps[k + 2]; } }; const find = (state: number, highest: boolean) => { let best = 0; let value = highest ? -Infinity : Infinity; for (let i = 0; i < n; i++) { if (on[i] !== state) continue; if (highest ? energy[i] > value : energy[i] < value) { value = energy[i]; best = i; } } return best; }; let seed = 7; const random = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const initial = Math.round(n * 0.1); for (let placed = 0; placed < initial; ) { const i = Math.floor(random() * n); if (on[i]) continue; on[i] = 1; splat(i, 1); placed++; } for (let guard = 0; guard < n; guard++) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); const gap = find(0, false); on[gap] = 1; splat(gap, 1); if (gap === cluster) break; } const seedOn = on.slice(); const seedEnergy = energy.slice(); const rank = new Uint16Array(n); for (let r = initial - 1; r >= 0; r--) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); rank[cluster] = r; } on.set(seedOn); energy.set(seedEnergy); for (let r = initial; r < n; r++) { const gap = find(0, false); on[gap] = 1; splat(gap, 1); rank[gap] = r; } const data = new Uint8Array(n * 4); for (let i = 0; i < n; i++) { const v = Math.floor((rank[i] / n) * 256); data[i * 4] = v; data[i * 4 + 1] = v; data[i * 4 + 2] = v; data[i * 4 + 3] = 255; } blueNoise = data; return data; }; const diffuse = ( pixels: Uint8ClampedArray, cols: number, rows: number, kernel: Kernel, levels: number, rgb: boolean, grade: (v: number) => number ): Uint8Array => { const channels = rgb ? 3 : 1; const values = new Float32Array(cols * rows * channels); for (let i = 0; i < cols * rows; i++) { const r = pixels[i * 4] / 255; const g = pixels[i * 4 + 1] / 255; const b = pixels[i * 4 + 2] / 255; if (rgb) { values[i * 3] = grade(r); values[i * 3 + 1] = grade(g); values[i * 3 + 2] = grade(b); } else { values[i] = grade(0.2126 * r + 0.7152 * g + 0.0722 * b); } } const steps = levels - 1; const out = new Uint8Array(cols * rows * 4); for (let y = 0; y < rows; y++) { const dir = y & 1 ? -1 : 1; for (let i = 0; i < cols; i++) { const x = dir > 0 ? i : cols - 1 - i; const p = y * cols + x; for (let c = 0; c < channels; c++) { const old = values[p * channels + c]; const q = Math.min(steps, Math.max(0, Math.round(old * steps))) / steps; const err = old - q; const byte = Math.round(q * 255); if (rgb) out[p * 4 + c] = byte; else out[p * 4] = out[p * 4 + 1] = out[p * 4 + 2] = byte; for (let k = 0; k < kernel.length; k++) { const nx = x + kernel[k][0] * dir; const ny = y + kernel[k][1]; if (nx < 0 || nx >= cols || ny >= rows) continue; values[(ny * cols + nx) * channels + c] += err * kernel[k][2]; } } out[p * 4 + 3] = 255; } } return out; }; const vertex = `#version 300 es in vec2 position; in vec2 uv; out vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); } `; const maskFragment = `#version 300 es precision highp float; uniform sampler2D tPrev; uniform vec2 uSize; uniform vec2 uFrom; uniform vec2 uTo; uniform float uRadius; uniform float uSoftness; uniform float uStrength; uniform float uFade; uniform float uHold; in vec2 vUv; out vec4 fragColor; float strokeDistance(vec2 p, vec2 a, vec2 b) { vec2 ab = b - a; float h = clamp(dot(p - a, ab) / max(dot(ab, ab), 0.0001), 0.0, 1.0); return length(p - a - ab * h); } void main() { vec2 p = vec2(vUv.x, 1.0 - vUv.y) * uSize; float trail = max(texture(tPrev, vUv).r - uFade, 0.0); float band = max(uRadius * uSoftness, 1.0) * uHold; float d = strokeDistance(p, uFrom, uTo); trail = max(trail, clamp((uRadius - d) / band, 0.0, 1.0) * uStrength); fragColor = vec4(trail, 0.0, 0.0, 1.0); } `; const viewFragment = `#version 300 es precision highp float; precision highp int; uniform sampler2D tImage; uniform sampler2D tMask; uniform sampler2D tNoise; uniform sampler2D tDiffused; uniform vec2 uResolution; uniform vec2 uCover; uniform float uLod; uniform float uCell; uniform int uPattern; uniform int uPalette; uniform float uLevels; uniform vec3 uInk; uniform vec3 uPaper; uniform vec3 uRimColor; uniform float uRim; uniform float uContrast; uniform float uBrightness; uniform float uReverse; uniform float uIntro; uniform float uHold; uniform vec3 uMatte; uniform float uKey; uniform vec2 uSize; uniform vec4 uBursts[4]; uniform float uBurstWidth; in vec2 vUv; out vec4 fragColor; float bayer(vec2 cell) { ivec2 p = ivec2(mod(cell, 8.0)); int v = p.x ^ p.y; int m = ((v & 1) << 5) | ((p.y & 1) << 4) | ((v & 2) << 2) | ((p.y & 2) << 1) | ((v & 4) >> 1) | ((p.y & 4) >> 2); return (float(m) + 0.5) / 64.0; } float blueNoise(vec2 cell) { return (texelFetch(tNoise, ivec2(mod(cell, 64.0)), 0).r * 255.0 + 0.5) / 256.0; } float engraving(vec2 cell) { float period = 6.0; float f = (mod(cell.x + cell.y, period) + 0.5) / period; return clamp(abs(f * 2.0 - 1.0) + (bayer(cell) - 0.5) * (2.0 / period), 0.0, 1.0); } vec2 imageUv(vec2 uv) { return (uv - 0.5) * uCover + 0.5; } float within(vec2 p) { vec2 s = step(vec2(0.0), p) * step(p, vec2(1.0)); return s.x * s.y; } vec3 grade(vec3 c) { return pow(clamp((c - 0.5) * uContrast + 0.5 + uBrightness, 0.0, 1.0), vec3(1.6)); } float shockwave(vec2 p) { float value = 0.0; for (int i = 0; i < 4; i++) { vec4 burst = uBursts[i]; if (burst.w <= 0.0) continue; float offset = distance(p, burst.xy) - burst.z; float edge = offset > 0.0 ? offset / (uBurstWidth * 0.35) : -offset / uBurstWidth; value = max(value, clamp(1.0 - edge, 0.0, 1.0) * burst.w); } return value; } vec3 toned(vec3 c) { return uPalette == 1 ? grade(c) : grade(vec3(dot(c, vec3(0.2126, 0.7152, 0.0722)))); } vec3 quantize(vec3 v, float t) { float steps = max(uLevels - 1.0, 1.0); vec3 s = v * steps; vec3 base = floor(s); return min(base + step(vec3(t), s - base), vec3(steps)) / steps; } void main() { vec2 px = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y); vec2 cell = floor(px / uCell); vec2 center = (cell + 0.5) * uCell; vec2 cellUv = vec2(center.x / uResolution.x, 1.0 - center.y / uResolution.y); vec2 sampleUv = imageUv(cellUv); float framed = within(sampleUv); vec3 level; if (uPattern == 3) { level = texelFetch(tDiffused, ivec2(cell), 0).rgb; } else { vec3 c = mix(uMatte, textureLod(tImage, sampleUv, uLod).rgb, framed); float t = uPattern == 1 ? blueNoise(cell) : (uPattern == 2 ? engraving(cell) : bayer(cell)); level = quantize(toned(c), t); } vec3 color = mix(uInk, mix(uInk, uPaper, level), max(framed, uKey)); vec3 backdrop = mix(uInk, uPaper, toned(uMatte)); vec2 photoUv = imageUv(vUv); vec3 raw = texture(tImage, photoUv).rgb; float plain = uKey * (1.0 - smoothstep(0.05, 0.22, distance(raw, uMatte))); vec3 photo = mix(mix(uInk, backdrop, uKey), mix(raw, backdrop, plain), within(photoUv)); vec2 point = vec2(cellUv.x, 1.0 - cellUv.y) * uSize; float mask = max(clamp(texture(tMask, cellUv).r * uHold, 0.0, 1.0), shockwave(point)); float shown = mix(mask, 1.0 - mask, uReverse); float order = bayer(cell.yx); float low = order * (1.0 - uRim); color = mix(color, uRimColor, step(low, shown) * step(0.001, uRim)); color = mix(color, photo, step(low + uRim, shown)); vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0); float spread = length((cellUv - 0.5) * aspect) / length(aspect * 0.5); float appear = step(spread * 0.72 + bayer(cell + vec2(3.0, 5.0)) * 0.28, uIntro * 1.001); fragColor = vec4(mix(uInk, color, appear), 1.0); } `; const DitherVeil = ({ src = DEFAULT_SRC, fit = 'contain', pattern = 'floyd', pixelSize = 2, levels = 2, palette = 'duotone', inkColor = '#120f17', paperColor = '#f4f1ea', contrast = 1.15, brightness = 0, revealRadius = 200, softness = 0.6, linger = 1, rimColor = '#a78bfa', rim = 0, reverse = false, wander = false, clickBurst = true, className = '', style }: DitherVeilProps) => { const containerRef = useRef(null); const settingsRef = useRef(null); const wakeRef = useRef<() => void>(() => {}); useEffect(() => { settingsRef.current = { fit, pattern, pixelSize, levels, palette, inkColor, paperColor, contrast, brightness, revealRadius, softness, linger, rimColor, rim, reverse, wander, clickBurst }; wakeRef.current(); }); useEffect(() => { const container = containerRef.current; if (!container) return undefined; const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio || 1, 2), alpha: false, antialias: false }); const gl = renderer.gl; const canvas = gl.canvas; canvas.style.display = 'block'; canvas.style.width = '100%'; canvas.style.height = '100%'; container.appendChild(canvas); const gl2 = gl as WebGL2RenderingContext; const floatMask = renderer.isWebgl2 && !!renderer.getExtension('EXT_color_buffer_float'); const geometry = new Triangle(gl); const dataTexture = () => new Texture(gl, { image: new Uint8Array(4), width: 1, height: 1, generateMipmaps: false, flipY: false, minFilter: gl.NEAREST, magFilter: gl.NEAREST }); const imageTexture = new Texture(gl, { minFilter: gl.LINEAR_MIPMAP_LINEAR, magFilter: gl.LINEAR }); const noiseTexture = dataTexture(); const diffusedTexture = dataTexture(); const createMask = (w: number, h: number) => new RenderTarget(gl, { width: w, height: h, depth: false, type: floatMask ? gl2.HALF_FLOAT : gl.UNSIGNED_BYTE, internalFormat: floatMask ? gl2.RGBA16F : gl.RGBA, minFilter: gl.LINEAR, magFilter: gl.LINEAR }); const destroyMask = (target: RenderTarget) => { gl.deleteFramebuffer(target.buffer); gl.deleteTexture(target.texture.texture); }; let masks = [createMask(2, 2), createMask(2, 2)]; const maskUniforms = { tPrev: { value: masks[0].texture }, uSize: { value: [1, 1] }, uFrom: { value: [0, 0] }, uTo: { value: [0, 0] }, uRadius: { value: 1 }, uSoftness: { value: 0.5 }, uStrength: { value: 0 }, uFade: { value: 1 }, uHold: { value: HOLD } }; const viewUniforms = { tImage: { value: imageTexture }, tMask: { value: masks[0].texture }, tNoise: { value: noiseTexture }, tDiffused: { value: diffusedTexture }, uResolution: { value: [1, 1] }, uCover: { value: [1, 1] }, uLod: { value: 0 }, uCell: { value: 3 }, uPattern: { value: 0 }, uPalette: { value: 0 }, uLevels: { value: 2 }, uInk: { value: [0, 0, 0] }, uPaper: { value: [1, 1, 1] }, uRimColor: { value: [1, 1, 1] }, uRim: { value: 0 }, uContrast: { value: 1 }, uBrightness: { value: 0 }, uReverse: { value: 0 }, uIntro: { value: 0 }, uHold: { value: HOLD }, uMatte: { value: [0, 0, 0] }, uKey: { value: 0 }, uSize: { value: [1, 1] }, uBursts: { value: Array.from({ length: MAX_BURSTS * 4 }, () => 0) }, uBurstWidth: { value: 60 } }; const program = (fragment: string, uniforms: Record) => new Program(gl, { vertex, fragment, uniforms, depthTest: false, depthWrite: false }); const maskMesh = new Mesh(gl, { geometry, program: program(maskFragment, maskUniforms) }); const viewMesh = new Mesh(gl, { geometry, program: program(viewFragment, viewUniforms) }); const sampler = document.createElement('canvas'); const samplerContext = sampler.getContext('2d', { willReadFrequently: true }); let image: HTMLImageElement | null = null; let introStart = 0; let diffusedKey = ''; let diffusionBlocked = false; let width = 1; let height = 1; let visible = true; let raf = 0; let last = performance.now(); let trailUntil = 0; let presence = 0; let drift = 0; const pointer = { x: 0, y: 0, inside: false, fresh: true, placed: false }; const brush = { x: 0, y: 0, px: 0, py: 0 }; const bursts: { x: number; y: number; start: number }[] = []; const layout = () => { width = Math.max(1, container.clientWidth); height = Math.max(1, container.clientHeight); renderer.setSize(width, height); viewUniforms.uResolution.value = [canvas.width, canvas.height]; maskUniforms.uSize.value = [width, height]; viewUniforms.uSize.value = [width, height]; const mw = Math.max(2, Math.round(width * MASK_SCALE)); const mh = Math.max(2, Math.round(height * MASK_SCALE)); if (mw !== masks[0].width || mh !== masks[0].height) { masks.forEach(destroyMask); masks = [createMask(mw, mh), createMask(mw, mh)]; } if (!pointer.placed) { pointer.x = width / 2; pointer.y = height / 2; } }; const updateDiffusion = (cell: number, s: Settings) => { if (!image || !samplerContext) return; const cols = Math.ceil(canvas.width / cell); const rows = Math.ceil(canvas.height / cell); const key = [ s.pattern, s.levels, s.palette, s.contrast, s.brightness, s.fit, cols, rows, canvas.width, canvas.height ].join('|'); if (key === diffusedKey) return; diffusedKey = key; const [cx, cy] = viewUniforms.uCover.value; const iw = image.naturalWidth; const ih = image.naturalHeight; sampler.width = cols; sampler.height = rows; samplerContext.imageSmoothingEnabled = true; samplerContext.imageSmoothingQuality = 'high'; const [mr, mg, mb] = viewUniforms.uMatte.value; samplerContext.fillStyle = `rgb(${mr * 255}, ${mg * 255}, ${mb * 255})`; samplerContext.fillRect(0, 0, cols, rows); const sx = (0.5 - 0.5 * cx) * iw; const sy = (0.5 - 0.5 * cy) * ih; const sw = ((cols * cell) / canvas.width) * cx * iw; const sh = ((rows * cell) / canvas.height) * cy * ih; const x0 = Math.max(sx, 0); const y0 = Math.max(sy, 0); const x1 = Math.min(sx + sw, iw); const y1 = Math.min(sy + sh, ih); if (x1 > x0 && y1 > y0) { samplerContext.drawImage( image, x0, y0, x1 - x0, y1 - y0, ((x0 - sx) / sw) * cols, ((y0 - sy) / sh) * rows, ((x1 - x0) / sw) * cols, ((y1 - y0) / sh) * rows ); } const grade = (v: number) => Math.pow(Math.min(1, Math.max(0, (v - 0.5) * s.contrast + 0.5 + s.brightness)), 1.6); const pixels = samplerContext.getImageData(0, 0, cols, rows).data; diffusedTexture.image = diffuse(pixels, cols, rows, KERNELS[s.pattern], s.levels, s.palette === 'rgb', grade); diffusedTexture.width = cols; diffusedTexture.height = rows; diffusedTexture.needsUpdate = true; }; const frame = (now: number) => { raf = 0; const s = settingsRef.current; if (!s) return; const dt = Math.min(0.05, Math.max(0, (now - last) / 1000)); last = now; const wanderOn = s.wander && !reducedMotion; let targetX = pointer.x; let targetY = pointer.y; if (!pointer.inside && wanderOn) { drift = Math.min(1, drift + dt / 1.2); const [wx, wy] = wanderAt(now / 1000, width, height); const k = drift * drift * (3 - 2 * drift); targetX += (wx - targetX) * k; targetY += (wy - targetY) * k; } else { drift = 0; } presence += ((pointer.inside || wanderOn ? 1 : 0) - presence) * (1 - Math.exp(-dt / 0.16)); if (pointer.fresh) { brush.x = brush.px = targetX; brush.y = brush.py = targetY; pointer.fresh = false; } else { const follow = 1 - Math.exp(-dt / 0.035); brush.x += (targetX - brush.x) * follow; brush.y += (targetY - brush.y) * follow; } const burstData = viewUniforms.uBursts.value; burstData.fill(0); for (let i = bursts.length - 1; i >= 0; i--) { if ((now - bursts[i].start) / 1000 >= BURST_SECONDS) bursts.splice(i, 1); } bursts.forEach((b, i) => { const k = Math.max(0, (now - b.start) / 1000 / BURST_SECONDS); const reach = Math.hypot(Math.max(b.x, width - b.x), Math.max(b.y, height - b.y)) + viewUniforms.uBurstWidth.value; burstData[i * 4] = b.x; burstData[i * 4 + 1] = b.y; burstData[i * 4 + 2] = reach * Math.sin((k * Math.PI) / 2); burstData[i * 4 + 3] = 1 - k * k * k; }); if (presence > 0.002) trailUntil = now + s.linger * 1000 + 150; const minFade = floatMask ? 0 : 1.5 / 255; const fade = s.linger > 0 ? dt / s.linger : 1; maskUniforms.tPrev.value = masks[0].texture; maskUniforms.uFrom.value = [brush.px, brush.py]; maskUniforms.uTo.value = [brush.x, brush.y]; maskUniforms.uRadius.value = s.revealRadius * (0.45 + 0.55 * presence); maskUniforms.uSoftness.value = s.softness; maskUniforms.uStrength.value = presence; maskUniforms.uFade.value = Math.max(fade, minFade); viewUniforms.uBurstWidth.value = Math.max(60, s.revealRadius * 0.9); renderer.render({ scene: maskMesh, target: masks[1] }); masks.reverse(); brush.px = brush.x; brush.py = brush.y; const cell = Math.max(1, Math.round(s.pixelSize * renderer.dpr)); if (image) { viewUniforms.uCover.value = fitScale( canvas.width, canvas.height, image.naturalWidth, image.naturalHeight, s.fit === 'contain' ); } let patternIndex = ORDERED[s.pattern] ?? 0; if (KERNELS[s.pattern]) { patternIndex = 0; if (image && !diffusionBlocked) { try { updateDiffusion(cell, s); patternIndex = 3; } catch { diffusionBlocked = true; } } } if (patternIndex === 1 && noiseTexture.width !== 64) { noiseTexture.image = getBlueNoise(); noiseTexture.width = 64; noiseTexture.height = 64; noiseTexture.needsUpdate = true; } const texelsPerPixel = image ? (viewUniforms.uCover.value[0] * image.naturalWidth) / canvas.width : 1; viewUniforms.tMask.value = masks[0].texture; viewUniforms.uCell.value = cell; viewUniforms.uLod.value = Math.log2(Math.max(cell * texelsPerPixel, 1)); viewUniforms.uPattern.value = patternIndex; viewUniforms.uPalette.value = s.palette === 'rgb' ? 1 : 0; viewUniforms.uLevels.value = Math.max(2, Math.round(s.levels)); viewUniforms.uInk.value = hexToRgb(s.inkColor); viewUniforms.uPaper.value = hexToRgb(s.paperColor); viewUniforms.uRimColor.value = hexToRgb(s.rimColor); viewUniforms.uRim.value = Math.min(Math.max(s.rim, 0), 0.95); viewUniforms.uContrast.value = s.contrast; viewUniforms.uBrightness.value = s.brightness; viewUniforms.uReverse.value = s.reverse ? 1 : 0; const intro = image ? Math.min(1, (now - introStart) / INTRO_MS) : 0; viewUniforms.uIntro.value = 1 - Math.pow(1 - intro, 2); renderer.render({ scene: viewMesh }); const busy = pointer.inside || wanderOn || presence > 0.002 || bursts.length > 0 || now < trailUntil || (image && intro < 1); if (busy && visible) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; wakeRef.current = wake; const img = new Image(); img.crossOrigin = 'anonymous'; img.decoding = 'async'; img.onload = () => { image = img; imageTexture.image = img; try { if (samplerContext) { const edge = measureEdge(samplerContext, img); viewUniforms.uMatte.value = edge.matte; viewUniforms.uKey.value = edge.plain ? 1 : 0; } } catch {} introStart = performance.now(); wake(); }; img.src = src; const locate = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.placed = true; }; const onMove = (e: PointerEvent) => { locate(e); if (!pointer.inside) { pointer.inside = true; pointer.fresh = true; } wake(); }; const onLeave = () => { pointer.inside = false; wake(); }; const onDown = (e: PointerEvent) => { onMove(e); if (!settingsRef.current?.clickBurst || (e.pointerType === 'mouse' && e.button !== 0)) return; bursts.push({ x: pointer.x, y: pointer.y, start: performance.now() }); if (bursts.length > MAX_BURSTS) bursts.shift(); }; container.addEventListener('pointermove', onMove, { passive: true }); container.addEventListener('pointerenter', onMove, { passive: true }); container.addEventListener('pointerdown', onDown, { passive: true }); container.addEventListener('pointerleave', onLeave, { passive: true }); container.addEventListener('pointercancel', onLeave, { passive: true }); const resizeObserver = new ResizeObserver(() => { layout(); wake(); }); resizeObserver.observe(container); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); intersectionObserver.observe(container); layout(); wake(); return () => { cancelAnimationFrame(raf); wakeRef.current = () => {}; resizeObserver.disconnect(); intersectionObserver.disconnect(); img.onload = null; container.removeEventListener('pointermove', onMove); container.removeEventListener('pointerenter', onMove); container.removeEventListener('pointerdown', onDown); container.removeEventListener('pointerleave', onLeave); container.removeEventListener('pointercancel', onLeave); gl.getExtension('WEBGL_lose_context')?.loseContext(); if (canvas.parentNode) canvas.parentNode.removeChild(canvas); }; }, [src]); return

; }; export default DitherVeil;3c:oa,129:T6952,3c:o6952,[V0_FILE]typescriptreact:file="/components/dither-veil.tsx" 'use client' import { useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import { Renderer, Program, Mesh, Triangle, Texture, RenderTarget } from 'ogl'; import './dither-veil.css'; type Pattern = 'bayer' | 'noise' | 'atkinson' | 'floyd' | 'lines'; type Palette = 'duotone' | 'rgb'; type Fit = 'contain' | 'cover'; type Kernel = [number, number, number][]; type Rgb = [number, number, number]; export interface DitherVeilProps { src?: string; fit?: Fit; pattern?: Pattern; pixelSize?: number; levels?: number; palette?: Palette; inkColor?: string; paperColor?: string; contrast?: number; brightness?: number; revealRadius?: number; softness?: number; linger?: number; rimColor?: string; rim?: number; reverse?: boolean; wander?: boolean; clickBurst?: boolean; className?: string; style?: CSSProperties; } type Settings = Required>; const DEFAULT_SRC = 'https://images.unsplash.com/photo-1737071371043-761e02b1ef95?q=80&w=1400&auto=format&fit=crop'; const ORDERED: Record = { bayer: 0, noise: 1, lines: 2 }; const KERNELS: Record = { atkinson: [ [1, 0, 1 / 8], [2, 0, 1 / 8], [-1, 1, 1 / 8], [0, 1, 1 / 8], [1, 1, 1 / 8], [0, 2, 1 / 8] ], floyd: [ [1, 0, 7 / 16], [-1, 1, 3 / 16], [0, 1, 5 / 16], [1, 1, 1 / 16] ] }; const MASK_SCALE = 0.5; const MAX_BURSTS = 4; const BURST_SECONDS = 1.2; const HOLD = 1.6; const INTRO_MS = 1100; const hexToRgb = (hex: string): Rgb => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.replace(/./g, c => c + c); const n = parseInt(h.slice(0, 6), 16); return Number.isNaN(n) ? [0, 0, 0] : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; }; const fitScale = (w: number, h: number, iw: number, ih: number, contain: boolean): [number, number] => { const ratio = w / h / (iw / ih); if (contain) return ratio > 1 ? [ratio, 1] : [1, 1 / ratio]; return ratio > 1 ? [1, 1 / ratio] : [ratio, 1]; }; const wanderAt = (t: number, w: number, h: number): [number, number] => [ w * (0.5 + 0.33 * Math.sin(t * 0.53) + 0.08 * Math.sin(t * 1.31 + 0.6)), h * (0.5 + 0.28 * Math.sin(t * 0.71 + 1.1) + 0.07 * Math.cos(t * 1.57)) ]; const measureEdge = (context: CanvasRenderingContext2D, image: HTMLImageElement): { matte: Rgb; plain: boolean } => { const size = 32; context.canvas.width = size; context.canvas.height = size; context.drawImage(image, 0, 0, size, size); const data = context.getImageData(0, 0, size, size).data; const sum = [0, 0, 0]; const squares = [0, 0, 0]; let count = 0; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { if (x > 0 && y > 0 && x < size - 1 && y < size - 1) continue; for (let c = 0; c < 3; c++) { const v = data[(y * size + x) * 4 + c] / 255; sum[c] += v; squares[c] += v * v; } count++; } } const matte: Rgb = [sum[0] / count, sum[1] / count, sum[2] / count]; const spread = matte.reduce((total, mean, c) => total + Math.sqrt(Math.max(0, squares[c] / count - mean * mean)), 0) / 3; return { matte, plain: spread < 0.06 }; }; let blueNoise: Uint8Array | null = null; const getBlueNoise = (): Uint8Array => { if (blueNoise) return blueNoise; const size = 64; const n = size * size; const wrap = size - 1; const taps: number[] = []; for (let dy = -6; dy <= 6; dy++) { for (let dx = -6; dx <= 6; dx++) taps.push(dx, dy, Math.exp(-(dx * dx + dy * dy) / 4.5)); } const energy = new Float32Array(n); const on = new Uint8Array(n); const splat = (i: number, sign: number) => { const x = i % size; const y = (i - x) / size; for (let k = 0; k < taps.length; k += 3) { energy[((y + taps[k + 1]) & wrap) * size + ((x + taps[k]) & wrap)] += sign * taps[k + 2]; } }; const find = (state: number, highest: boolean) => { let best = 0; let value = highest ? -Infinity : Infinity; for (let i = 0; i < n; i++) { if (on[i] !== state) continue; if (highest ? energy[i] > value : energy[i] < value) { value = energy[i]; best = i; } } return best; }; let seed = 7; const random = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const initial = Math.round(n * 0.1); for (let placed = 0; placed < initial; ) { const i = Math.floor(random() * n); if (on[i]) continue; on[i] = 1; splat(i, 1); placed++; } for (let guard = 0; guard < n; guard++) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); const gap = find(0, false); on[gap] = 1; splat(gap, 1); if (gap === cluster) break; } const seedOn = on.slice(); const seedEnergy = energy.slice(); const rank = new Uint16Array(n); for (let r = initial - 1; r >= 0; r--) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); rank[cluster] = r; } on.set(seedOn); energy.set(seedEnergy); for (let r = initial; r < n; r++) { const gap = find(0, false); on[gap] = 1; splat(gap, 1); rank[gap] = r; } const data = new Uint8Array(n * 4); for (let i = 0; i < n; i++) { const v = Math.floor((rank[i] / n) * 256); data[i * 4] = v; data[i * 4 + 1] = v; data[i * 4 + 2] = v; data[i * 4 + 3] = 255; } blueNoise = data; return data; }; const diffuse = ( pixels: Uint8ClampedArray, cols: number, rows: number, kernel: Kernel, levels: number, rgb: boolean, grade: (v: number) => number ): Uint8Array => { const channels = rgb ? 3 : 1; const values = new Float32Array(cols * rows * channels); for (let i = 0; i < cols * rows; i++) { const r = pixels[i * 4] / 255; const g = pixels[i * 4 + 1] / 255; const b = pixels[i * 4 + 2] / 255; if (rgb) { values[i * 3] = grade(r); values[i * 3 + 1] = grade(g); values[i * 3 + 2] = grade(b); } else { values[i] = grade(0.2126 * r + 0.7152 * g + 0.0722 * b); } } const steps = levels - 1; const out = new Uint8Array(cols * rows * 4); for (let y = 0; y < rows; y++) { const dir = y & 1 ? -1 : 1; for (let i = 0; i < cols; i++) { const x = dir > 0 ? i : cols - 1 - i; const p = y * cols + x; for (let c = 0; c < channels; c++) { const old = values[p * channels + c]; const q = Math.min(steps, Math.max(0, Math.round(old * steps))) / steps; const err = old - q; const byte = Math.round(q * 255); if (rgb) out[p * 4 + c] = byte; else out[p * 4] = out[p * 4 + 1] = out[p * 4 + 2] = byte; for (let k = 0; k < kernel.length; k++) { const nx = x + kernel[k][0] * dir; const ny = y + kernel[k][1]; if (nx < 0 || nx >= cols || ny >= rows) continue; values[(ny * cols + nx) * channels + c] += err * kernel[k][2]; } } out[p * 4 + 3] = 255; } } return out; }; const vertex = `#version 300 es in vec2 position; in vec2 uv; out vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); } `; const maskFragment = `#version 300 es precision highp float; uniform sampler2D tPrev; uniform vec2 uSize; uniform vec2 uFrom; uniform vec2 uTo; uniform float uRadius; uniform float uSoftness; uniform float uStrength; uniform float uFade; uniform float uHold; in vec2 vUv; out vec4 fragColor; float strokeDistance(vec2 p, vec2 a, vec2 b) { vec2 ab = b - a; float h = clamp(dot(p - a, ab) / max(dot(ab, ab), 0.0001), 0.0, 1.0); return length(p - a - ab * h); } void main() { vec2 p = vec2(vUv.x, 1.0 - vUv.y) * uSize; float trail = max(texture(tPrev, vUv).r - uFade, 0.0); float band = max(uRadius * uSoftness, 1.0) * uHold; float d = strokeDistance(p, uFrom, uTo); trail = max(trail, clamp((uRadius - d) / band, 0.0, 1.0) * uStrength); fragColor = vec4(trail, 0.0, 0.0, 1.0); } `; const viewFragment = `#version 300 es precision highp float; precision highp int; uniform sampler2D tImage; uniform sampler2D tMask; uniform sampler2D tNoise; uniform sampler2D tDiffused; uniform vec2 uResolution; uniform vec2 uCover; uniform float uLod; uniform float uCell; uniform int uPattern; uniform int uPalette; uniform float uLevels; uniform vec3 uInk; uniform vec3 uPaper; uniform vec3 uRimColor; uniform float uRim; uniform float uContrast; uniform float uBrightness; uniform float uReverse; uniform float uIntro; uniform float uHold; uniform vec3 uMatte; uniform float uKey; uniform vec2 uSize; uniform vec4 uBursts[4]; uniform float uBurstWidth; in vec2 vUv; out vec4 fragColor; float bayer(vec2 cell) { ivec2 p = ivec2(mod(cell, 8.0)); int v = p.x ^ p.y; int m = ((v & 1) << 5) | ((p.y & 1) << 4) | ((v & 2) << 2) | ((p.y & 2) << 1) | ((v & 4) >> 1) | ((p.y & 4) >> 2); return (float(m) + 0.5) / 64.0; } float blueNoise(vec2 cell) { return (texelFetch(tNoise, ivec2(mod(cell, 64.0)), 0).r * 255.0 + 0.5) / 256.0; } float engraving(vec2 cell) { float period = 6.0; float f = (mod(cell.x + cell.y, period) + 0.5) / period; return clamp(abs(f * 2.0 - 1.0) + (bayer(cell) - 0.5) * (2.0 / period), 0.0, 1.0); } vec2 imageUv(vec2 uv) { return (uv - 0.5) * uCover + 0.5; } float within(vec2 p) { vec2 s = step(vec2(0.0), p) * step(p, vec2(1.0)); return s.x * s.y; } vec3 grade(vec3 c) { return pow(clamp((c - 0.5) * uContrast + 0.5 + uBrightness, 0.0, 1.0), vec3(1.6)); } float shockwave(vec2 p) { float value = 0.0; for (int i = 0; i < 4; i++) { vec4 burst = uBursts[i]; if (burst.w <= 0.0) continue; float offset = distance(p, burst.xy) - burst.z; float edge = offset > 0.0 ? offset / (uBurstWidth * 0.35) : -offset / uBurstWidth; value = max(value, clamp(1.0 - edge, 0.0, 1.0) * burst.w); } return value; } vec3 toned(vec3 c) { return uPalette == 1 ? grade(c) : grade(vec3(dot(c, vec3(0.2126, 0.7152, 0.0722)))); } vec3 quantize(vec3 v, float t) { float steps = max(uLevels - 1.0, 1.0); vec3 s = v * steps; vec3 base = floor(s); return min(base + step(vec3(t), s - base), vec3(steps)) / steps; } void main() { vec2 px = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y); vec2 cell = floor(px / uCell); vec2 center = (cell + 0.5) * uCell; vec2 cellUv = vec2(center.x / uResolution.x, 1.0 - center.y / uResolution.y); vec2 sampleUv = imageUv(cellUv); float framed = within(sampleUv); vec3 level; if (uPattern == 3) { level = texelFetch(tDiffused, ivec2(cell), 0).rgb; } else { vec3 c = mix(uMatte, textureLod(tImage, sampleUv, uLod).rgb, framed); float t = uPattern == 1 ? blueNoise(cell) : (uPattern == 2 ? engraving(cell) : bayer(cell)); level = quantize(toned(c), t); } vec3 color = mix(uInk, mix(uInk, uPaper, level), max(framed, uKey)); vec3 backdrop = mix(uInk, uPaper, toned(uMatte)); vec2 photoUv = imageUv(vUv); vec3 raw = texture(tImage, photoUv).rgb; float plain = uKey * (1.0 - smoothstep(0.05, 0.22, distance(raw, uMatte))); vec3 photo = mix(mix(uInk, backdrop, uKey), mix(raw, backdrop, plain), within(photoUv)); vec2 point = vec2(cellUv.x, 1.0 - cellUv.y) * uSize; float mask = max(clamp(texture(tMask, cellUv).r * uHold, 0.0, 1.0), shockwave(point)); float shown = mix(mask, 1.0 - mask, uReverse); float order = bayer(cell.yx); float low = order * (1.0 - uRim); color = mix(color, uRimColor, step(low, shown) * step(0.001, uRim)); color = mix(color, photo, step(low + uRim, shown)); vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0); float spread = length((cellUv - 0.5) * aspect) / length(aspect * 0.5); float appear = step(spread * 0.72 + bayer(cell + vec2(3.0, 5.0)) * 0.28, uIntro * 1.001); fragColor = vec4(mix(uInk, color, appear), 1.0); } `; const DitherVeil = ({ src = DEFAULT_SRC, fit = 'contain', pattern = 'floyd', pixelSize = 2, levels = 2, palette = 'duotone', inkColor = '#120f17', paperColor = '#f4f1ea', contrast = 1.15, brightness = 0, revealRadius = 200, softness = 0.6, linger = 1, rimColor = '#a78bfa', rim = 0, reverse = false, wander = false, clickBurst = true, className = '', style }: DitherVeilProps) => { const containerRef = useRef(null); const settingsRef = useRef(null); const wakeRef = useRef<() => void>(() => {}); useEffect(() => { settingsRef.current = { fit, pattern, pixelSize, levels, palette, inkColor, paperColor, contrast, brightness, revealRadius, softness, linger, rimColor, rim, reverse, wander, clickBurst }; wakeRef.current(); }); useEffect(() => { const container = containerRef.current; if (!container) return undefined; const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio || 1, 2), alpha: false, antialias: false }); const gl = renderer.gl; const canvas = gl.canvas; canvas.style.display = 'block'; canvas.style.width = '100%'; canvas.style.height = '100%'; container.appendChild(canvas); const gl2 = gl as WebGL2RenderingContext; const floatMask = renderer.isWebgl2 && !!renderer.getExtension('EXT_color_buffer_float'); const geometry = new Triangle(gl); const dataTexture = () => new Texture(gl, { image: new Uint8Array(4), width: 1, height: 1, generateMipmaps: false, flipY: false, minFilter: gl.NEAREST, magFilter: gl.NEAREST }); const imageTexture = new Texture(gl, { minFilter: gl.LINEAR_MIPMAP_LINEAR, magFilter: gl.LINEAR }); const noiseTexture = dataTexture(); const diffusedTexture = dataTexture(); const createMask = (w: number, h: number) => new RenderTarget(gl, { width: w, height: h, depth: false, type: floatMask ? gl2.HALF_FLOAT : gl.UNSIGNED_BYTE, internalFormat: floatMask ? gl2.RGBA16F : gl.RGBA, minFilter: gl.LINEAR, magFilter: gl.LINEAR }); const destroyMask = (target: RenderTarget) => { gl.deleteFramebuffer(target.buffer); gl.deleteTexture(target.texture.texture); }; let masks = [createMask(2, 2), createMask(2, 2)]; const maskUniforms = { tPrev: { value: masks[0].texture }, uSize: { value: [1, 1] }, uFrom: { value: [0, 0] }, uTo: { value: [0, 0] }, uRadius: { value: 1 }, uSoftness: { value: 0.5 }, uStrength: { value: 0 }, uFade: { value: 1 }, uHold: { value: HOLD } }; const viewUniforms = { tImage: { value: imageTexture }, tMask: { value: masks[0].texture }, tNoise: { value: noiseTexture }, tDiffused: { value: diffusedTexture }, uResolution: { value: [1, 1] }, uCover: { value: [1, 1] }, uLod: { value: 0 }, uCell: { value: 3 }, uPattern: { value: 0 }, uPalette: { value: 0 }, uLevels: { value: 2 }, uInk: { value: [0, 0, 0] }, uPaper: { value: [1, 1, 1] }, uRimColor: { value: [1, 1, 1] }, uRim: { value: 0 }, uContrast: { value: 1 }, uBrightness: { value: 0 }, uReverse: { value: 0 }, uIntro: { value: 0 }, uHold: { value: HOLD }, uMatte: { value: [0, 0, 0] }, uKey: { value: 0 }, uSize: { value: [1, 1] }, uBursts: { value: Array.from({ length: MAX_BURSTS * 4 }, () => 0) }, uBurstWidth: { value: 60 } }; const program = (fragment: string, uniforms: Record) => new Program(gl, { vertex, fragment, uniforms, depthTest: false, depthWrite: false }); const maskMesh = new Mesh(gl, { geometry, program: program(maskFragment, maskUniforms) }); const viewMesh = new Mesh(gl, { geometry, program: program(viewFragment, viewUniforms) }); const sampler = document.createElement('canvas'); const samplerContext = sampler.getContext('2d', { willReadFrequently: true }); let image: HTMLImageElement | null = null; let introStart = 0; let diffusedKey = ''; let diffusionBlocked = false; let width = 1; let height = 1; let visible = true; let raf = 0; let last = performance.now(); let trailUntil = 0; let presence = 0; let drift = 0; const pointer = { x: 0, y: 0, inside: false, fresh: true, placed: false }; const brush = { x: 0, y: 0, px: 0, py: 0 }; const bursts: { x: number; y: number; start: number }[] = []; const layout = () => { width = Math.max(1, container.clientWidth); height = Math.max(1, container.clientHeight); renderer.setSize(width, height); viewUniforms.uResolution.value = [canvas.width, canvas.height]; maskUniforms.uSize.value = [width, height]; viewUniforms.uSize.value = [width, height]; const mw = Math.max(2, Math.round(width * MASK_SCALE)); const mh = Math.max(2, Math.round(height * MASK_SCALE)); if (mw !== masks[0].width || mh !== masks[0].height) { masks.forEach(destroyMask); masks = [createMask(mw, mh), createMask(mw, mh)]; } if (!pointer.placed) { pointer.x = width / 2; pointer.y = height / 2; } }; const updateDiffusion = (cell: number, s: Settings) => { if (!image || !samplerContext) return; const cols = Math.ceil(canvas.width / cell); const rows = Math.ceil(canvas.height / cell); const key = [ s.pattern, s.levels, s.palette, s.contrast, s.brightness, s.fit, cols, rows, canvas.width, canvas.height ].join('|'); if (key === diffusedKey) return; diffusedKey = key; const [cx, cy] = viewUniforms.uCover.value; const iw = image.naturalWidth; const ih = image.naturalHeight; sampler.width = cols; sampler.height = rows; samplerContext.imageSmoothingEnabled = true; samplerContext.imageSmoothingQuality = 'high'; const [mr, mg, mb] = viewUniforms.uMatte.value; samplerContext.fillStyle = `rgb(${mr * 255}, ${mg * 255}, ${mb * 255})`; samplerContext.fillRect(0, 0, cols, rows); const sx = (0.5 - 0.5 * cx) * iw; const sy = (0.5 - 0.5 * cy) * ih; const sw = ((cols * cell) / canvas.width) * cx * iw; const sh = ((rows * cell) / canvas.height) * cy * ih; const x0 = Math.max(sx, 0); const y0 = Math.max(sy, 0); const x1 = Math.min(sx + sw, iw); const y1 = Math.min(sy + sh, ih); if (x1 > x0 && y1 > y0) { samplerContext.drawImage( image, x0, y0, x1 - x0, y1 - y0, ((x0 - sx) / sw) * cols, ((y0 - sy) / sh) * rows, ((x1 - x0) / sw) * cols, ((y1 - y0) / sh) * rows ); } const grade = (v: number) => Math.pow(Math.min(1, Math.max(0, (v - 0.5) * s.contrast + 0.5 + s.brightness)), 1.6); const pixels = samplerContext.getImageData(0, 0, cols, rows).data; diffusedTexture.image = diffuse(pixels, cols, rows, KERNELS[s.pattern], s.levels, s.palette === 'rgb', grade); diffusedTexture.width = cols; diffusedTexture.height = rows; diffusedTexture.needsUpdate = true; }; const frame = (now: number) => { raf = 0; const s = settingsRef.current; if (!s) return; const dt = Math.min(0.05, Math.max(0, (now - last) / 1000)); last = now; const wanderOn = s.wander && !reducedMotion; let targetX = pointer.x; let targetY = pointer.y; if (!pointer.inside && wanderOn) { drift = Math.min(1, drift + dt / 1.2); const [wx, wy] = wanderAt(now / 1000, width, height); const k = drift * drift * (3 - 2 * drift); targetX += (wx - targetX) * k; targetY += (wy - targetY) * k; } else { drift = 0; } presence += ((pointer.inside || wanderOn ? 1 : 0) - presence) * (1 - Math.exp(-dt / 0.16)); if (pointer.fresh) { brush.x = brush.px = targetX; brush.y = brush.py = targetY; pointer.fresh = false; } else { const follow = 1 - Math.exp(-dt / 0.035); brush.x += (targetX - brush.x) * follow; brush.y += (targetY - brush.y) * follow; } const burstData = viewUniforms.uBursts.value; burstData.fill(0); for (let i = bursts.length - 1; i >= 0; i--) { if ((now - bursts[i].start) / 1000 >= BURST_SECONDS) bursts.splice(i, 1); } bursts.forEach((b, i) => { const k = Math.max(0, (now - b.start) / 1000 / BURST_SECONDS); const reach = Math.hypot(Math.max(b.x, width - b.x), Math.max(b.y, height - b.y)) + viewUniforms.uBurstWidth.value; burstData[i * 4] = b.x; burstData[i * 4 + 1] = b.y; burstData[i * 4 + 2] = reach * Math.sin((k * Math.PI) / 2); burstData[i * 4 + 3] = 1 - k * k * k; }); if (presence > 0.002) trailUntil = now + s.linger * 1000 + 150; const minFade = floatMask ? 0 : 1.5 / 255; const fade = s.linger > 0 ? dt / s.linger : 1; maskUniforms.tPrev.value = masks[0].texture; maskUniforms.uFrom.value = [brush.px, brush.py]; maskUniforms.uTo.value = [brush.x, brush.y]; maskUniforms.uRadius.value = s.revealRadius * (0.45 + 0.55 * presence); maskUniforms.uSoftness.value = s.softness; maskUniforms.uStrength.value = presence; maskUniforms.uFade.value = Math.max(fade, minFade); viewUniforms.uBurstWidth.value = Math.max(60, s.revealRadius * 0.9); renderer.render({ scene: maskMesh, target: masks[1] }); masks.reverse(); brush.px = brush.x; brush.py = brush.y; const cell = Math.max(1, Math.round(s.pixelSize * renderer.dpr)); if (image) { viewUniforms.uCover.value = fitScale( canvas.width, canvas.height, image.naturalWidth, image.naturalHeight, s.fit === 'contain' ); } let patternIndex = ORDERED[s.pattern] ?? 0; if (KERNELS[s.pattern]) { patternIndex = 0; if (image && !diffusionBlocked) { try { updateDiffusion(cell, s); patternIndex = 3; } catch { diffusionBlocked = true; } } } if (patternIndex === 1 && noiseTexture.width !== 64) { noiseTexture.image = getBlueNoise(); noiseTexture.width = 64; noiseTexture.height = 64; noiseTexture.needsUpdate = true; } const texelsPerPixel = image ? (viewUniforms.uCover.value[0] * image.naturalWidth) / canvas.width : 1; viewUniforms.tMask.value = masks[0].texture; viewUniforms.uCell.value = cell; viewUniforms.uLod.value = Math.log2(Math.max(cell * texelsPerPixel, 1)); viewUniforms.uPattern.value = patternIndex; viewUniforms.uPalette.value = s.palette === 'rgb' ? 1 : 0; viewUniforms.uLevels.value = Math.max(2, Math.round(s.levels)); viewUniforms.uInk.value = hexToRgb(s.inkColor); viewUniforms.uPaper.value = hexToRgb(s.paperColor); viewUniforms.uRimColor.value = hexToRgb(s.rimColor); viewUniforms.uRim.value = Math.min(Math.max(s.rim, 0), 0.95); viewUniforms.uContrast.value = s.contrast; viewUniforms.uBrightness.value = s.brightness; viewUniforms.uReverse.value = s.reverse ? 1 : 0; const intro = image ? Math.min(1, (now - introStart) / INTRO_MS) : 0; viewUniforms.uIntro.value = 1 - Math.pow(1 - intro, 2); renderer.render({ scene: viewMesh }); const busy = pointer.inside || wanderOn || presence > 0.002 || bursts.length > 0 || now < trailUntil || (image && intro < 1); if (busy && visible) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; wakeRef.current = wake; const img = new Image(); img.crossOrigin = 'anonymous'; img.decoding = 'async'; img.onload = () => { image = img; imageTexture.image = img; try { if (samplerContext) { const edge = measureEdge(samplerContext, img); viewUniforms.uMatte.value = edge.matte; viewUniforms.uKey.value = edge.plain ? 1 : 0; } } catch {} introStart = performance.now(); wake(); }; img.src = src; const locate = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.placed = true; }; const onMove = (e: PointerEvent) => { locate(e); if (!pointer.inside) { pointer.inside = true; pointer.fresh = true; } wake(); }; const onLeave = () => { pointer.inside = false; wake(); }; const onDown = (e: PointerEvent) => { onMove(e); if (!settingsRef.current?.clickBurst || (e.pointerType === 'mouse' && e.button !== 0)) return; bursts.push({ x: pointer.x, y: pointer.y, start: performance.now() }); if (bursts.length > MAX_BURSTS) bursts.shift(); }; container.addEventListener('pointermove', onMove, { passive: true }); container.addEventListener('pointerenter', onMove, { passive: true }); container.addEventListener('pointerdown', onDown, { passive: true }); container.addEventListener('pointerleave', onLeave, { passive: true }); container.addEventListener('pointercancel', onLeave, { passive: true }); const resizeObserver = new ResizeObserver(() => { layout(); wake(); }); resizeObserver.observe(container); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); intersectionObserver.observe(container); layout(); wake(); return () => { cancelAnimationFrame(raf); wakeRef.current = () => {}; resizeObserver.disconnect(); intersectionObserver.disconnect(); img.onload = null; container.removeEventListener('pointermove', onMove); container.removeEventListener('pointerenter', onMove); container.removeEventListener('pointerdown', onDown); container.removeEventListener('pointerleave', onLeave); container.removeEventListener('pointercancel', onLeave); gl.getExtension('WEBGL_lose_context')?.loseContext(); if (canvas.parentNode) canvas.parentNode.removeChild(canvas); }; }, [src]); return

; }; export default DitherVeil;3c:oa,12a:T6952,3c:o6952,[V0_FILE]typescriptreact:file="/components/dither-veil.tsx" 'use client' import { useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import { Renderer, Program, Mesh, Triangle, Texture, RenderTarget } from 'ogl'; import './dither-veil.css'; type Pattern = 'bayer' | 'noise' | 'atkinson' | 'floyd' | 'lines'; type Palette = 'duotone' | 'rgb'; type Fit = 'contain' | 'cover'; type Kernel = [number, number, number][]; type Rgb = [number, number, number]; export interface DitherVeilProps { src?: string; fit?: Fit; pattern?: Pattern; pixelSize?: number; levels?: number; palette?: Palette; inkColor?: string; paperColor?: string; contrast?: number; brightness?: number; revealRadius?: number; softness?: number; linger?: number; rimColor?: string; rim?: number; reverse?: boolean; wander?: boolean; clickBurst?: boolean; className?: string; style?: CSSProperties; } type Settings = Required>; const DEFAULT_SRC = 'https://images.unsplash.com/photo-1737071371043-761e02b1ef95?q=80&w=1400&auto=format&fit=crop'; const ORDERED: Record = { bayer: 0, noise: 1, lines: 2 }; const KERNELS: Record = { atkinson: [ [1, 0, 1 / 8], [2, 0, 1 / 8], [-1, 1, 1 / 8], [0, 1, 1 / 8], [1, 1, 1 / 8], [0, 2, 1 / 8] ], floyd: [ [1, 0, 7 / 16], [-1, 1, 3 / 16], [0, 1, 5 / 16], [1, 1, 1 / 16] ] }; const MASK_SCALE = 0.5; const MAX_BURSTS = 4; const BURST_SECONDS = 1.2; const HOLD = 1.6; const INTRO_MS = 1100; const hexToRgb = (hex: string): Rgb => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.replace(/./g, c => c + c); const n = parseInt(h.slice(0, 6), 16); return Number.isNaN(n) ? [0, 0, 0] : [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; }; const fitScale = (w: number, h: number, iw: number, ih: number, contain: boolean): [number, number] => { const ratio = w / h / (iw / ih); if (contain) return ratio > 1 ? [ratio, 1] : [1, 1 / ratio]; return ratio > 1 ? [1, 1 / ratio] : [ratio, 1]; }; const wanderAt = (t: number, w: number, h: number): [number, number] => [ w * (0.5 + 0.33 * Math.sin(t * 0.53) + 0.08 * Math.sin(t * 1.31 + 0.6)), h * (0.5 + 0.28 * Math.sin(t * 0.71 + 1.1) + 0.07 * Math.cos(t * 1.57)) ]; const measureEdge = (context: CanvasRenderingContext2D, image: HTMLImageElement): { matte: Rgb; plain: boolean } => { const size = 32; context.canvas.width = size; context.canvas.height = size; context.drawImage(image, 0, 0, size, size); const data = context.getImageData(0, 0, size, size).data; const sum = [0, 0, 0]; const squares = [0, 0, 0]; let count = 0; for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { if (x > 0 && y > 0 && x < size - 1 && y < size - 1) continue; for (let c = 0; c < 3; c++) { const v = data[(y * size + x) * 4 + c] / 255; sum[c] += v; squares[c] += v * v; } count++; } } const matte: Rgb = [sum[0] / count, sum[1] / count, sum[2] / count]; const spread = matte.reduce((total, mean, c) => total + Math.sqrt(Math.max(0, squares[c] / count - mean * mean)), 0) / 3; return { matte, plain: spread < 0.06 }; }; let blueNoise: Uint8Array | null = null; const getBlueNoise = (): Uint8Array => { if (blueNoise) return blueNoise; const size = 64; const n = size * size; const wrap = size - 1; const taps: number[] = []; for (let dy = -6; dy <= 6; dy++) { for (let dx = -6; dx <= 6; dx++) taps.push(dx, dy, Math.exp(-(dx * dx + dy * dy) / 4.5)); } const energy = new Float32Array(n); const on = new Uint8Array(n); const splat = (i: number, sign: number) => { const x = i % size; const y = (i - x) / size; for (let k = 0; k < taps.length; k += 3) { energy[((y + taps[k + 1]) & wrap) * size + ((x + taps[k]) & wrap)] += sign * taps[k + 2]; } }; const find = (state: number, highest: boolean) => { let best = 0; let value = highest ? -Infinity : Infinity; for (let i = 0; i < n; i++) { if (on[i] !== state) continue; if (highest ? energy[i] > value : energy[i] < value) { value = energy[i]; best = i; } } return best; }; let seed = 7; const random = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const initial = Math.round(n * 0.1); for (let placed = 0; placed < initial; ) { const i = Math.floor(random() * n); if (on[i]) continue; on[i] = 1; splat(i, 1); placed++; } for (let guard = 0; guard < n; guard++) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); const gap = find(0, false); on[gap] = 1; splat(gap, 1); if (gap === cluster) break; } const seedOn = on.slice(); const seedEnergy = energy.slice(); const rank = new Uint16Array(n); for (let r = initial - 1; r >= 0; r--) { const cluster = find(1, true); on[cluster] = 0; splat(cluster, -1); rank[cluster] = r; } on.set(seedOn); energy.set(seedEnergy); for (let r = initial; r < n; r++) { const gap = find(0, false); on[gap] = 1; splat(gap, 1); rank[gap] = r; } const data = new Uint8Array(n * 4); for (let i = 0; i < n; i++) { const v = Math.floor((rank[i] / n) * 256); data[i * 4] = v; data[i * 4 + 1] = v; data[i * 4 + 2] = v; data[i * 4 + 3] = 255; } blueNoise = data; return data; }; const diffuse = ( pixels: Uint8ClampedArray, cols: number, rows: number, kernel: Kernel, levels: number, rgb: boolean, grade: (v: number) => number ): Uint8Array => { const channels = rgb ? 3 : 1; const values = new Float32Array(cols * rows * channels); for (let i = 0; i < cols * rows; i++) { const r = pixels[i * 4] / 255; const g = pixels[i * 4 + 1] / 255; const b = pixels[i * 4 + 2] / 255; if (rgb) { values[i * 3] = grade(r); values[i * 3 + 1] = grade(g); values[i * 3 + 2] = grade(b); } else { values[i] = grade(0.2126 * r + 0.7152 * g + 0.0722 * b); } } const steps = levels - 1; const out = new Uint8Array(cols * rows * 4); for (let y = 0; y < rows; y++) { const dir = y & 1 ? -1 : 1; for (let i = 0; i < cols; i++) { const x = dir > 0 ? i : cols - 1 - i; const p = y * cols + x; for (let c = 0; c < channels; c++) { const old = values[p * channels + c]; const q = Math.min(steps, Math.max(0, Math.round(old * steps))) / steps; const err = old - q; const byte = Math.round(q * 255); if (rgb) out[p * 4 + c] = byte; else out[p * 4] = out[p * 4 + 1] = out[p * 4 + 2] = byte; for (let k = 0; k < kernel.length; k++) { const nx = x + kernel[k][0] * dir; const ny = y + kernel[k][1]; if (nx < 0 || nx >= cols || ny >= rows) continue; values[(ny * cols + nx) * channels + c] += err * kernel[k][2]; } } out[p * 4 + 3] = 255; } } return out; }; const vertex = `#version 300 es in vec2 position; in vec2 uv; out vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); } `; const maskFragment = `#version 300 es precision highp float; uniform sampler2D tPrev; uniform vec2 uSize; uniform vec2 uFrom; uniform vec2 uTo; uniform float uRadius; uniform float uSoftness; uniform float uStrength; uniform float uFade; uniform float uHold; in vec2 vUv; out vec4 fragColor; float strokeDistance(vec2 p, vec2 a, vec2 b) { vec2 ab = b - a; float h = clamp(dot(p - a, ab) / max(dot(ab, ab), 0.0001), 0.0, 1.0); return length(p - a - ab * h); } void main() { vec2 p = vec2(vUv.x, 1.0 - vUv.y) * uSize; float trail = max(texture(tPrev, vUv).r - uFade, 0.0); float band = max(uRadius * uSoftness, 1.0) * uHold; float d = strokeDistance(p, uFrom, uTo); trail = max(trail, clamp((uRadius - d) / band, 0.0, 1.0) * uStrength); fragColor = vec4(trail, 0.0, 0.0, 1.0); } `; const viewFragment = `#version 300 es precision highp float; precision highp int; uniform sampler2D tImage; uniform sampler2D tMask; uniform sampler2D tNoise; uniform sampler2D tDiffused; uniform vec2 uResolution; uniform vec2 uCover; uniform float uLod; uniform float uCell; uniform int uPattern; uniform int uPalette; uniform float uLevels; uniform vec3 uInk; uniform vec3 uPaper; uniform vec3 uRimColor; uniform float uRim; uniform float uContrast; uniform float uBrightness; uniform float uReverse; uniform float uIntro; uniform float uHold; uniform vec3 uMatte; uniform float uKey; uniform vec2 uSize; uniform vec4 uBursts[4]; uniform float uBurstWidth; in vec2 vUv; out vec4 fragColor; float bayer(vec2 cell) { ivec2 p = ivec2(mod(cell, 8.0)); int v = p.x ^ p.y; int m = ((v & 1) << 5) | ((p.y & 1) << 4) | ((v & 2) << 2) | ((p.y & 2) << 1) | ((v & 4) >> 1) | ((p.y & 4) >> 2); return (float(m) + 0.5) / 64.0; } float blueNoise(vec2 cell) { return (texelFetch(tNoise, ivec2(mod(cell, 64.0)), 0).r * 255.0 + 0.5) / 256.0; } float engraving(vec2 cell) { float period = 6.0; float f = (mod(cell.x + cell.y, period) + 0.5) / period; return clamp(abs(f * 2.0 - 1.0) + (bayer(cell) - 0.5) * (2.0 / period), 0.0, 1.0); } vec2 imageUv(vec2 uv) { return (uv - 0.5) * uCover + 0.5; } float within(vec2 p) { vec2 s = step(vec2(0.0), p) * step(p, vec2(1.0)); return s.x * s.y; } vec3 grade(vec3 c) { return pow(clamp((c - 0.5) * uContrast + 0.5 + uBrightness, 0.0, 1.0), vec3(1.6)); } float shockwave(vec2 p) { float value = 0.0; for (int i = 0; i < 4; i++) { vec4 burst = uBursts[i]; if (burst.w <= 0.0) continue; float offset = distance(p, burst.xy) - burst.z; float edge = offset > 0.0 ? offset / (uBurstWidth * 0.35) : -offset / uBurstWidth; value = max(value, clamp(1.0 - edge, 0.0, 1.0) * burst.w); } return value; } vec3 toned(vec3 c) { return uPalette == 1 ? grade(c) : grade(vec3(dot(c, vec3(0.2126, 0.7152, 0.0722)))); } vec3 quantize(vec3 v, float t) { float steps = max(uLevels - 1.0, 1.0); vec3 s = v * steps; vec3 base = floor(s); return min(base + step(vec3(t), s - base), vec3(steps)) / steps; } void main() { vec2 px = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y); vec2 cell = floor(px / uCell); vec2 center = (cell + 0.5) * uCell; vec2 cellUv = vec2(center.x / uResolution.x, 1.0 - center.y / uResolution.y); vec2 sampleUv = imageUv(cellUv); float framed = within(sampleUv); vec3 level; if (uPattern == 3) { level = texelFetch(tDiffused, ivec2(cell), 0).rgb; } else { vec3 c = mix(uMatte, textureLod(tImage, sampleUv, uLod).rgb, framed); float t = uPattern == 1 ? blueNoise(cell) : (uPattern == 2 ? engraving(cell) : bayer(cell)); level = quantize(toned(c), t); } vec3 color = mix(uInk, mix(uInk, uPaper, level), max(framed, uKey)); vec3 backdrop = mix(uInk, uPaper, toned(uMatte)); vec2 photoUv = imageUv(vUv); vec3 raw = texture(tImage, photoUv).rgb; float plain = uKey * (1.0 - smoothstep(0.05, 0.22, distance(raw, uMatte))); vec3 photo = mix(mix(uInk, backdrop, uKey), mix(raw, backdrop, plain), within(photoUv)); vec2 point = vec2(cellUv.x, 1.0 - cellUv.y) * uSize; float mask = max(clamp(texture(tMask, cellUv).r * uHold, 0.0, 1.0), shockwave(point)); float shown = mix(mask, 1.0 - mask, uReverse); float order = bayer(cell.yx); float low = order * (1.0 - uRim); color = mix(color, uRimColor, step(low, shown) * step(0.001, uRim)); color = mix(color, photo, step(low + uRim, shown)); vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0); float spread = length((cellUv - 0.5) * aspect) / length(aspect * 0.5); float appear = step(spread * 0.72 + bayer(cell + vec2(3.0, 5.0)) * 0.28, uIntro * 1.001); fragColor = vec4(mix(uInk, color, appear), 1.0); } `; const DitherVeil = ({ src = DEFAULT_SRC, fit = 'contain', pattern = 'floyd', pixelSize = 2, levels = 2, palette = 'duotone', inkColor = '#120f17', paperColor = '#f4f1ea', contrast = 1.15, brightness = 0, revealRadius = 200, softness = 0.6, linger = 1, rimColor = '#a78bfa', rim = 0, reverse = false, wander = false, clickBurst = true, className = '', style }: DitherVeilProps) => { const containerRef = useRef(null); const settingsRef = useRef(null); const wakeRef = useRef<() => void>(() => {}); useEffect(() => { settingsRef.current = { fit, pattern, pixelSize, levels, palette, inkColor, paperColor, contrast, brightness, revealRadius, softness, linger, rimColor, rim, reverse, wander, clickBurst }; wakeRef.current(); }); useEffect(() => { const container = containerRef.current; if (!container) return undefined; const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio || 1, 2), alpha: false, antialias: false }); const gl = renderer.gl; const canvas = gl.canvas; canvas.style.display = 'block'; canvas.style.width = '100%'; canvas.style.height = '100%'; container.appendChild(canvas); const gl2 = gl as WebGL2RenderingContext; const floatMask = renderer.isWebgl2 && !!renderer.getExtension('EXT_color_buffer_float'); const geometry = new Triangle(gl); const dataTexture = () => new Texture(gl, { image: new Uint8Array(4), width: 1, height: 1, generateMipmaps: false, flipY: false, minFilter: gl.NEAREST, magFilter: gl.NEAREST }); const imageTexture = new Texture(gl, { minFilter: gl.LINEAR_MIPMAP_LINEAR, magFilter: gl.LINEAR }); const noiseTexture = dataTexture(); const diffusedTexture = dataTexture(); const createMask = (w: number, h: number) => new RenderTarget(gl, { width: w, height: h, depth: false, type: floatMask ? gl2.HALF_FLOAT : gl.UNSIGNED_BYTE, internalFormat: floatMask ? gl2.RGBA16F : gl.RGBA, minFilter: gl.LINEAR, magFilter: gl.LINEAR }); const destroyMask = (target: RenderTarget) => { gl.deleteFramebuffer(target.buffer); gl.deleteTexture(target.texture.texture); }; let masks = [createMask(2, 2), createMask(2, 2)]; const maskUniforms = { tPrev: { value: masks[0].texture }, uSize: { value: [1, 1] }, uFrom: { value: [0, 0] }, uTo: { value: [0, 0] }, uRadius: { value: 1 }, uSoftness: { value: 0.5 }, uStrength: { value: 0 }, uFade: { value: 1 }, uHold: { value: HOLD } }; const viewUniforms = { tImage: { value: imageTexture }, tMask: { value: masks[0].texture }, tNoise: { value: noiseTexture }, tDiffused: { value: diffusedTexture }, uResolution: { value: [1, 1] }, uCover: { value: [1, 1] }, uLod: { value: 0 }, uCell: { value: 3 }, uPattern: { value: 0 }, uPalette: { value: 0 }, uLevels: { value: 2 }, uInk: { value: [0, 0, 0] }, uPaper: { value: [1, 1, 1] }, uRimColor: { value: [1, 1, 1] }, uRim: { value: 0 }, uContrast: { value: 1 }, uBrightness: { value: 0 }, uReverse: { value: 0 }, uIntro: { value: 0 }, uHold: { value: HOLD }, uMatte: { value: [0, 0, 0] }, uKey: { value: 0 }, uSize: { value: [1, 1] }, uBursts: { value: Array.from({ length: MAX_BURSTS * 4 }, () => 0) }, uBurstWidth: { value: 60 } }; const program = (fragment: string, uniforms: Record) => new Program(gl, { vertex, fragment, uniforms, depthTest: false, depthWrite: false }); const maskMesh = new Mesh(gl, { geometry, program: program(maskFragment, maskUniforms) }); const viewMesh = new Mesh(gl, { geometry, program: program(viewFragment, viewUniforms) }); const sampler = document.createElement('canvas'); const samplerContext = sampler.getContext('2d', { willReadFrequently: true }); let image: HTMLImageElement | null = null; let introStart = 0; let diffusedKey = ''; let diffusionBlocked = false; let width = 1; let height = 1; let visible = true; let raf = 0; let last = performance.now(); let trailUntil = 0; let presence = 0; let drift = 0; const pointer = { x: 0, y: 0, inside: false, fresh: true, placed: false }; const brush = { x: 0, y: 0, px: 0, py: 0 }; const bursts: { x: number; y: number; start: number }[] = []; const layout = () => { width = Math.max(1, container.clientWidth); height = Math.max(1, container.clientHeight); renderer.setSize(width, height); viewUniforms.uResolution.value = [canvas.width, canvas.height]; maskUniforms.uSize.value = [width, height]; viewUniforms.uSize.value = [width, height]; const mw = Math.max(2, Math.round(width * MASK_SCALE)); const mh = Math.max(2, Math.round(height * MASK_SCALE)); if (mw !== masks[0].width || mh !== masks[0].height) { masks.forEach(destroyMask); masks = [createMask(mw, mh), createMask(mw, mh)]; } if (!pointer.placed) { pointer.x = width / 2; pointer.y = height / 2; } }; const updateDiffusion = (cell: number, s: Settings) => { if (!image || !samplerContext) return; const cols = Math.ceil(canvas.width / cell); const rows = Math.ceil(canvas.height / cell); const key = [ s.pattern, s.levels, s.palette, s.contrast, s.brightness, s.fit, cols, rows, canvas.width, canvas.height ].join('|'); if (key === diffusedKey) return; diffusedKey = key; const [cx, cy] = viewUniforms.uCover.value; const iw = image.naturalWidth; const ih = image.naturalHeight; sampler.width = cols; sampler.height = rows; samplerContext.imageSmoothingEnabled = true; samplerContext.imageSmoothingQuality = 'high'; const [mr, mg, mb] = viewUniforms.uMatte.value; samplerContext.fillStyle = `rgb(${mr * 255}, ${mg * 255}, ${mb * 255})`; samplerContext.fillRect(0, 0, cols, rows); const sx = (0.5 - 0.5 * cx) * iw; const sy = (0.5 - 0.5 * cy) * ih; const sw = ((cols * cell) / canvas.width) * cx * iw; const sh = ((rows * cell) / canvas.height) * cy * ih; const x0 = Math.max(sx, 0); const y0 = Math.max(sy, 0); const x1 = Math.min(sx + sw, iw); const y1 = Math.min(sy + sh, ih); if (x1 > x0 && y1 > y0) { samplerContext.drawImage( image, x0, y0, x1 - x0, y1 - y0, ((x0 - sx) / sw) * cols, ((y0 - sy) / sh) * rows, ((x1 - x0) / sw) * cols, ((y1 - y0) / sh) * rows ); } const grade = (v: number) => Math.pow(Math.min(1, Math.max(0, (v - 0.5) * s.contrast + 0.5 + s.brightness)), 1.6); const pixels = samplerContext.getImageData(0, 0, cols, rows).data; diffusedTexture.image = diffuse(pixels, cols, rows, KERNELS[s.pattern], s.levels, s.palette === 'rgb', grade); diffusedTexture.width = cols; diffusedTexture.height = rows; diffusedTexture.needsUpdate = true; }; const frame = (now: number) => { raf = 0; const s = settingsRef.current; if (!s) return; const dt = Math.min(0.05, Math.max(0, (now - last) / 1000)); last = now; const wanderOn = s.wander && !reducedMotion; let targetX = pointer.x; let targetY = pointer.y; if (!pointer.inside && wanderOn) { drift = Math.min(1, drift + dt / 1.2); const [wx, wy] = wanderAt(now / 1000, width, height); const k = drift * drift * (3 - 2 * drift); targetX += (wx - targetX) * k; targetY += (wy - targetY) * k; } else { drift = 0; } presence += ((pointer.inside || wanderOn ? 1 : 0) - presence) * (1 - Math.exp(-dt / 0.16)); if (pointer.fresh) { brush.x = brush.px = targetX; brush.y = brush.py = targetY; pointer.fresh = false; } else { const follow = 1 - Math.exp(-dt / 0.035); brush.x += (targetX - brush.x) * follow; brush.y += (targetY - brush.y) * follow; } const burstData = viewUniforms.uBursts.value; burstData.fill(0); for (let i = bursts.length - 1; i >= 0; i--) { if ((now - bursts[i].start) / 1000 >= BURST_SECONDS) bursts.splice(i, 1); } bursts.forEach((b, i) => { const k = Math.max(0, (now - b.start) / 1000 / BURST_SECONDS); const reach = Math.hypot(Math.max(b.x, width - b.x), Math.max(b.y, height - b.y)) + viewUniforms.uBurstWidth.value; burstData[i * 4] = b.x; burstData[i * 4 + 1] = b.y; burstData[i * 4 + 2] = reach * Math.sin((k * Math.PI) / 2); burstData[i * 4 + 3] = 1 - k * k * k; }); if (presence > 0.002) trailUntil = now + s.linger * 1000 + 150; const minFade = floatMask ? 0 : 1.5 / 255; const fade = s.linger > 0 ? dt / s.linger : 1; maskUniforms.tPrev.value = masks[0].texture; maskUniforms.uFrom.value = [brush.px, brush.py]; maskUniforms.uTo.value = [brush.x, brush.y]; maskUniforms.uRadius.value = s.revealRadius * (0.45 + 0.55 * presence); maskUniforms.uSoftness.value = s.softness; maskUniforms.uStrength.value = presence; maskUniforms.uFade.value = Math.max(fade, minFade); viewUniforms.uBurstWidth.value = Math.max(60, s.revealRadius * 0.9); renderer.render({ scene: maskMesh, target: masks[1] }); masks.reverse(); brush.px = brush.x; brush.py = brush.y; const cell = Math.max(1, Math.round(s.pixelSize * renderer.dpr)); if (image) { viewUniforms.uCover.value = fitScale( canvas.width, canvas.height, image.naturalWidth, image.naturalHeight, s.fit === 'contain' ); } let patternIndex = ORDERED[s.pattern] ?? 0; if (KERNELS[s.pattern]) { patternIndex = 0; if (image && !diffusionBlocked) { try { updateDiffusion(cell, s); patternIndex = 3; } catch { diffusionBlocked = true; } } } if (patternIndex === 1 && noiseTexture.width !== 64) { noiseTexture.image = getBlueNoise(); noiseTexture.width = 64; noiseTexture.height = 64; noiseTexture.needsUpdate = true; } const texelsPerPixel = image ? (viewUniforms.uCover.value[0] * image.naturalWidth) / canvas.width : 1; viewUniforms.tMask.value = masks[0].texture; viewUniforms.uCell.value = cell; viewUniforms.uLod.value = Math.log2(Math.max(cell * texelsPerPixel, 1)); viewUniforms.uPattern.value = patternIndex; viewUniforms.uPalette.value = s.palette === 'rgb' ? 1 : 0; viewUniforms.uLevels.value = Math.max(2, Math.round(s.levels)); viewUniforms.uInk.value = hexToRgb(s.inkColor); viewUniforms.uPaper.value = hexToRgb(s.paperColor); viewUniforms.uRimColor.value = hexToRgb(s.rimColor); viewUniforms.uRim.value = Math.min(Math.max(s.rim, 0), 0.95); viewUniforms.uContrast.value = s.contrast; viewUniforms.uBrightness.value = s.brightness; viewUniforms.uReverse.value = s.reverse ? 1 : 0; const intro = image ? Math.min(1, (now - introStart) / INTRO_MS) : 0; viewUniforms.uIntro.value = 1 - Math.pow(1 - intro, 2); renderer.render({ scene: viewMesh }); const busy = pointer.inside || wanderOn || presence > 0.002 || bursts.length > 0 || now < trailUntil || (image && intro < 1); if (busy && visible) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; wakeRef.current = wake; const img = new Image(); img.crossOrigin = 'anonymous'; img.decoding = 'async'; img.onload = () => { image = img; imageTexture.image = img; try { if (samplerContext) { const edge = measureEdge(samplerContext, img); viewUniforms.uMatte.value = edge.matte; viewUniforms.uKey.value = edge.plain ? 1 : 0; } } catch {} introStart = performance.now(); wake(); }; img.src = src; const locate = (e: PointerEvent) => { const rect = container.getBoundingClientRect(); pointer.x = e.clientX - rect.left; pointer.y = e.clientY - rect.top; pointer.placed = true; }; const onMove = (e: PointerEvent) => { locate(e); if (!pointer.inside) { pointer.inside = true; pointer.fresh = true; } wake(); }; const onLeave = () => { pointer.inside = false; wake(); }; const onDown = (e: PointerEvent) => { onMove(e); if (!settingsRef.current?.clickBurst || (e.pointerType === 'mouse' && e.button !== 0)) return; bursts.push({ x: pointer.x, y: pointer.y, start: performance.now() }); if (bursts.length > MAX_BURSTS) bursts.shift(); }; container.addEventListener('pointermove', onMove, { passive: true }); container.addEventListener('pointerenter', onMove, { passive: true }); container.addEventListener('pointerdown', onDown, { passive: true }); container.addEventListener('pointerleave', onLeave, { passive: true }); container.addEventListener('pointercancel', onLeave, { passive: true }); const resizeObserver = new ResizeObserver(() => { layout(); wake(); }); resizeObserver.observe(container); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); intersectionObserver.observe(container); layout(); wake(); return () => { cancelAnimationFrame(raf); wakeRef.current = () => {}; resizeObserver.disconnect(); intersectionObserver.disconnect(); img.onload = null; container.removeEventListener('pointermove', onMove); container.removeEventListener('pointerenter', onMove); container.removeEventListener('pointerdown', onDown); container.removeEventListener('pointerleave', onLeave); container.removeEventListener('pointercancel', onLeave); gl.getExtension('WEBGL_lose_context')?.loseContext(); if (canvas.parentNode) canvas.parentNode.removeChild(canvas); }; }, [src]); return

; }; export default DitherVeil;3c:o78e0,105:["$","$L107",null,{"params":{"chatId":"lS7rpJmAQ3o"},"promises":{"attributes":"$@111","externalMeta":"$@112","latest":"$@113","messagesRange":"$@114","messages":"$@115","template":"$@116","gitStatus":"$@117"},"children":["$","$L119",null,{"chatId":"lS7rpJmAQ3o","children":["$","$L11a",null,{"seedOnlyKeys":["@\"chat:state\",\"lS7rpJmAQ3o\","],"data":{"block:output:initial":{"id":"b_rNMuwZtwjPe","result":"$@11b"},"/chat/api/snapshots/proxy?chatId=lS7rpJmAQ3o&messageId=dvfOE7WsgcF2OrEgbvePbPPsb0vsuiMw&v=v2":"$@11c","@\"block:mappings\",\"lS7rpJmAQ3o\",":{"sqlBlockExecutionStates":"$Q11d","blocksForkedFrom":"$Q11e","blocksTemplateIds":"$Q11f","blocksCreatedAt":"$Q120","blocksShared":"$Q121","blocksDeployed":"$Q122","blocksSubdomains":"$Q123","brandedBlocks":"$Q124","unlistedBlocks":"$Q125","blockOutputs":"$Q126"},"@\"chat:state\",\"lS7rpJmAQ3o\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"KRVsJJ8yRa0YZqUL0ue29IDOW6com261","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-09-24T13:14:36.760Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_rn7Vg8Uua6U","type":"code-project","isVersioned":false},{"blockId":"b_o5rp7ftn0bg","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"uJ1SeYIokusKITi0Gpw7fX5i0BMvVuGV","v0ModelId":"v0-max","gitRevision":{"headSha":"5c3fa49d613d819469c3f1a9a93eb460ad4743be","readyAt":"2026-09-24T13:17:38.176Z","version":1,"commitMessage":"Initial commit from v0\n\nV0-Initial-Commit: v1"},"streaming":false,"finishReason":"stop","parentId":"KRVsJJ8yRa0YZqUL0ue29IDOW6com261","type":"message","createdAt":"$D2026-09-24T13:14:36.761Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"3wNuXdz4kd9AFj5DOqN6ovUOCYrMDk9R","parentId":"uJ1SeYIokusKITi0Gpw7fX5i0BMvVuGV","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-09-24T19:34:01.801Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_B9HwhepVlDV","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"xsQ46nYL55VUzxIxSYeFJ0zOBEvyGsJP","v0ModelId":"v0-gpt-5.6-sol","gitRevision":{"baseSha":"5c3fa49d613d819469c3f1a9a93eb460ad4743be","headSha":"2032fc5b77a96d7faff1a2e046d3f87fece3bd00","readyAt":"2026-09-24T19:34:43.262Z","version":1,"commitMessage":"feat: update DitherVeil component with new image and reverse effect"},"streaming":false,"finishReason":"stop","parentId":"3wNuXdz4kd9AFj5DOqN6ovUOCYrMDk9R","type":"message","createdAt":"$D2026-09-24T19:34:01.802Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"7kTS2hNQgaPjtI19SJbQ8F5A1um5nID0","parentId":"xsQ46nYL55VUzxIxSYeFJ0zOBEvyGsJP","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-09-24T19:47:35.024Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_MdXa9tAPEh5","type":"code-project","isVersioned":false},{"blockId":"b_OCuvaIUWk55","type":"code-project","isVersioned":false},{"blockId":"b_PCQj8V5l3PA","type":"code-project","isVersioned":false},{"blockId":"b_pSGfqSlLNPo","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"bIrH4UiOFgAiUYAnBq6OLrvuSB11uUeq","v0ModelId":"v0-gpt-5.6-sol","gitRevision":{"baseSha":"2032fc5b77a96d7faff1a2e046d3f87fece3bd00","headSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","readyAt":"2026-09-24T19:49:22.804Z","version":1,"commitMessage":"feat: update metadata and add interactive 3D portrait hero component"},"streaming":false,"finishReason":"stop","parentId":"7kTS2hNQgaPjtI19SJbQ8F5A1um5nID0","type":"message","createdAt":"$D2026-09-24T19:47:35.025Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"oDcL5wauP3UTsHNoO3VO8CN5k1mqXruF","parentId":"bIrH4UiOFgAiUYAnBq6OLrvuSB11uUeq","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-09-24T21:26:05.142Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"gJNBsnWN0rRJ9sGle1VsQieqSAJsU700","v0ModelId":"v0-max","gitRevision":{"baseSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","headSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","readyAt":"2026-09-24T21:26:31.082Z","version":1,"commitMessage":"Update from v0"},"streaming":false,"finishReason":"stop","parentId":"oDcL5wauP3UTsHNoO3VO8CN5k1mqXruF","type":"message","createdAt":"$D2026-09-24T21:26:05.143Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"l4XtoEt3XtftVH9VloiuRhHJq1Q6tFoB","parentId":"gJNBsnWN0rRJ9sGle1VsQieqSAJsU700","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-09-24T21:28:11.606Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"49mJfub107fDDWpi0zc9C8U3PXW9eN7u","v0ModelId":"v0-max","gitRevision":{"baseSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","headSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","readyAt":"2026-09-24T21:28:45.273Z","version":1,"commitMessage":"Update from v0"},"streaming":false,"finishReason":"stop","parentId":"l4XtoEt3XtftVH9VloiuRhHJq1Q6tFoB","type":"message","createdAt":"$D2026-09-24T21:28:11.607Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"import DitherVeil from './DitherVeil';\n\n

\n \n

"}],"version":1},"role":"user","id":"D0KO3Ri8xnE1whqa2nPLBCbZm5bzwsfQ","attachments":[],"parentId":"49mJfub107fDDWpi0zc9C8U3PXW9eN7u","type":"message","authorId":"wkEMV8zgQrglLBxBibp6UQGC","createdAt":"$D2026-09-24T21:29:29.375Z"},{"v0ModelId":"v0-max","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1790285376365,"finishedAt":1790285376424,"lastPartSentAt":1790285376424,"taskNameActive":null,"id":"KkZwyAKp5FNrCErB","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":0,"thought":"The user wants me to swap in this exact standalone example to replace the current 3D hero page. I should check the existing page.tsx first before making the change."}]}}],["p",{},["text",{},"You want the page to be the exact standalone example from the repo (replacing the 3D hero). Let me check the current page."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285376455,"finishedAt":1790285376654,"lastPartSentAt":1790285376653,"taskNameActive":"Reading page","taskNameComplete":"Read page","toolCallId":"toolu_01HZhPrPcypksALduSpZkMTd","agentTurnId":"turn_8Sm4dRqeYu7PRXG0","filePath":null,"id":"GVaLC5OhnIOGKsdx","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"/vercel/share/v0-project/app/page.tsx"}]}}],["AssistantMessageContentPart",{"part":{"createdAt":1790285381816,"finishedAt":1790285381858,"lastPartSentAt":1790285381859,"taskNameActive":null,"id":"tsc8KaJrrOLixWH1","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":0,"thought":"I should use the exact standalone example the user provided, swapping in the local component path but keeping the same props and Unsplash image source."}]}}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_kh3piQZg5Dg","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/app/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/app/page.tsx\" \nGENERATING","latestDeploymentInfo":"$122:0:1","lastDeployedAt":"2026-09-24T21:30:07.463Z","sourceVersionKey":"v_1_434qq_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_kh3piQZg5Dg","meta":{"taskNameActive":"Writing exact example page","taskNameComplete":"Wrote exact example page","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Writing exact example page","taskNameComplete":"Wrote exact example page"},"id":"block-b_kh3piQZg5Dg"}],["p",{},["text",{},"Let me verify the exact example renders correctly."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285387627,"finishedAt":1790285397271,"lastPartSentAt":1790285397218,"taskNameActive":"Verifying exact example","taskNameComplete":"Verified exact example","toolCallId":"toolu_01FbE5Jn6emojEjaUxKXXAWn","agentTurnId":"turn_TaBP2kFCSuhNzlD9","filePath":null,"id":"jZXF4At1KKyIP82S","type":"task-subtask-v1","parts":[{"type":"subtask-started","data":{"subtaskType":"bash","command":"agent-browser close && agent-browser open --webgpu \"http://localhost:${DEV_PORT:-3000}\" && agent-browser set media dark && agent-browser set viewport 1366 1024 && agent-browser wait 2000 && agent-browser screenshot /tmp/agent-browser/dither-veil-exact.png && agent-browser errors","timeout":120000}},{"type":"subtask-log","data":{"logType":"created-terminal","terminalId":"browser-sandbox-e859537a-e42e-4305-afcb-7e8f92763aa7","taskId":"bash_browser-sandbox-e859537a-e42e-4305-afcb-7e8f92763aa7"},"id":"IGUIkYwRy0Rfe3L2"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":"ℹ The browser runtime was recreated, so this ran on a fresh browser — prior page state, settings, and console history are gone.\n✓ Digital Matter — Interactive Portrait\n http://localhost:3000/\n✓ Browser closed\n✓ Digital Matter — Interactive Portrait\n"},"id":"MHK5eBUAMP3Jkv2X"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":" http://localhost:3000/\n✓ Done\n✓ Done\n✓ Done\n✓ Screenshot saved to /tmp/agent-browser/dither-veil-exact.png\n\n[agent-browser] launched browser\n"},"id":"Gy8IsgSOacd3I9iP"},{"type":"agent-browser-screenshot","id":"bUMnfpwMbAtOpSwN","screenshotUrl":"https://uploads.vusercontent.net/a/eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..LnuHJNDtLi9rHwLj.uHO1eypSHBvaichHvmzCDn9I7W1AQY3IuJIE7ACwP6epeSmMIbdV5AHJDvHet5bAOpCafXLDiHOdyTBIRW9nWAbq0kf_Di5hxkC4J-Ou9vS8R5JStd4bceMXKse_n1_IQ38yfEopkeArCFApwPGaoTwIUdYZodbrLagO-a0eWfHkfAcm2cIARPcFr3s34WhuesTQM3Q6wYpwGQ.oQDoZ3fnlUTfsFcyLYsOwg","path":"/tmp/agent-browser/dither-veil-exact.png","browserUrl":null,"pageTitle":null,"width":1366,"height":1024}]}}],["p",{},["text",{},"The page now renders the exact standalone example from the repo. The Floyd-Steinberg dither veil displays the iridescent glass head portrait with "],["code",{},"reverse"],["text",{}," active (full color, dithering wherever the cursor moves), in a 600px-tall relative container, with no console errors."]],["p",{},["text",{},"Since the preview is mobile portrait, note the example uses a fixed "],["code",{},"height: '600px'"],["text",{}," and "],["code",{},"fit=\"contain\""],["text",{}," exactly as specified in the repo — so the image sits centered with paper/ink space around it. This is the verbatim example; let me know if you'd like it adapted to fill the mobile viewport instead."]]]],[1,{"retiredFileTasks":[{"id":"4w4O5eNv4RQ1NKT1","taskType":"task-write-file-v1"}]}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"1cQxPe2UPVwMx6nARkKnCHhO73S0efUt","gitRevision":{"baseSha":"8ef7af841edb1779b26cbcb9954ae9d4e82b9d43","headSha":"759dcef0942b5e59d5a9918b003e6d3fcb094998","readyAt":"2026-09-24T21:30:07.457Z","version":1,"commitMessage":"feat: replace PortraitHero with DitherVeil component in page layout\n\nAdded advanced DitherVeil visual effects for enhanced user experience"},"streaming":false,"finishReason":"stop","parentId":"D0KO3Ri8xnE1whqa2nPLBCbZm5bzwsfQ","type":"message","creditCost":0.23325975,"workMetrics":{"diffMap":{},"linesRead":6,"agentActions":3},"createdAt":"$D2026-09-24T21:29:29.376Z","updatedAt":"$D2026-09-24T21:30:07.458Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"$127"}],"version":1},"role":"user","id":"dz1kuMxbp8cWMdzv9rkWhKtSJ0qqahrX","attachments":[],"parentId":"1cQxPe2UPVwMx6nARkKnCHhO73S0efUt","type":"message","authorId":"wkEMV8zgQrglLBxBibp6UQGC","createdAt":"$D2026-09-24T21:30:22.760Z"},{"v0ModelId":"v0-max","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1790285430110,"finishedAt":1790285431842,"lastPartSentAt":1790285431842,"taskNameActive":null,"id":"bfBNOfOLZYHsA8pJ","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":2,"thought":"I need to convert the DitherVeil component to TypeScript using Tailwind classes instead of the separate CSS file, so I'll create a new .tsx version, update the page import accordingly, and remove the old .jsx and .css files."}]}}],["p",{},["text",{},"The user has provided a TypeScript version that uses Tailwind classes instead of the CSS file. I'll replace the "],["code",{},".jsx"],["text",{}," component with this "],["code",{},".tsx"],["text",{}," version, drop the CSS file, and update the page import."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285431920,"finishedAt":1790285432094,"lastPartSentAt":1790285432093,"taskNameActive":"Reading page","taskNameComplete":"Read page","toolCallId":"toolu_01TzsYuUqKDYHBWeqxWFzHRv","agentTurnId":"turn_sDAe9XqXCW9QSW2m","filePath":null,"id":"hVdSOqYELSTzh87I","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"/vercel/share/v0-project/app/page.tsx"}]}}],["p",{},["text",{},"I'll replace the component with the TypeScript version, remove the now-unused CSS file, and keep the page import as-is (it already points to "],["code",{},"@/components/dither-veil"],["text",{},")."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_M24PDVxdJaG","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/components/dither-veil.tsx","baseName":"dither-veil.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"/components/dither-veil.jsx","baseName":"dither-veil.jsx","isActive":false,"isTerminated":false,"isDeleted":true,"isMoved":false},{"fileName":"/components/dither-veil.css","baseName":"dither-veil.css","isActive":false,"isTerminated":false,"isDeleted":true,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/dither-veil.tsx\" \nGENERATING\n[V0_FILE]jsx:file=\"/components/dither-veil.jsx\" isDeleted=\"true\"\nGENERATING\n[V0_FILE]css:file=\"/components/dither-veil.css\" isDeleted=\"true\"\nGENERATING","latestDeploymentInfo":"$122:1:1","lastDeployedAt":"2026-09-24T21:32:59.869Z","sourceVersionKey":"v_1_70ae6_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_M24PDVxdJaG","meta":{"taskNameActive":"Applying changes to 3 files","taskNameComplete":"Applied changes to 3 files","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Applying changes to 3 files","taskNameComplete":"Applied changes to 3 files"},"id":"block-b_M24PDVxdJaG"}],["p",{},["text",{},"Now let me verify the TypeScript version compiles and renders correctly."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285549170,"finishedAt":1790285555385,"lastPartSentAt":1790285555262,"taskNameActive":"Type-checking","taskNameComplete":"Type-checked","toolCallId":"toolu_01XTKKtWs34ft3M2J3CBumcc","agentTurnId":"turn_KZAY2DZyosXJQHm5","filePath":null,"id":"ds6RtNBKNhqqwuBM","type":"task-subtask-v1","parts":[{"type":"subtask-started","data":{"subtaskType":"bash","command":"cd /vercel/share/v0-project && pnpm exec tsc --noEmit 2>&1 | head -30","timeout":120000}},{"type":"subtask-log","data":{"logType":"created-terminal","terminalId":"cmd_e96ebd5d841f49adb3c7e9727c1d","taskId":"bash_cmd_e96ebd5d841f49adb3c7e9727c1d"},"id":"tpuWbwfloCUiCwjn"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":""},"id":"v6yuYE2WC0ggw4KP"}]}}],["p",{},["text",{},"TypeScript passes. Let me verify it renders in the browser."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285559473,"finishedAt":1790285567375,"lastPartSentAt":1790285567331,"taskNameActive":"Verifying render","taskNameComplete":"Verified render","toolCallId":"toolu_01Ur61735jt5Sootn9Y1py7N","agentTurnId":"turn_LNkqaCoobXW7t9yy","filePath":null,"id":"HGLG69WtNXxNey0Y","type":"task-subtask-v1","parts":[{"type":"subtask-started","data":{"subtaskType":"bash","command":"agent-browser close && agent-browser open --webgpu \"http://localhost:${DEV_PORT:-3000}\" && agent-browser set media dark && agent-browser set viewport 1366 1024 && agent-browser wait 2000 && agent-browser screenshot /tmp/agent-browser/dither-veil-ts.png && agent-browser errors","timeout":120000}},{"type":"subtask-log","data":{"logType":"created-terminal","terminalId":"browser-sandbox-954648ef-4a60-4f41-b786-077c59702269","taskId":"bash_browser-sandbox-954648ef-4a60-4f41-b786-077c59702269"},"id":"zGRuULQ5LnqVFf2Q"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":"✓ Browser closed\n✓ Digital Matter — Interactive Portrait\n http://localhost:3000/\n✓ Done\n✓ Done\n✓ Done\n✓ Screenshot saved to /tmp/agent-browser/dither-veil-ts.png\n\n[agent-browser] launched browser\n"},"id":"my8PIkFCCNvHcBJP"},{"type":"agent-browser-screenshot","id":"YlpMDRI34MnR4biy","screenshotUrl":"https://uploads.vusercontent.net/a/eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..oBCt8wum0fu_yWdd.k4lGl3HvPy8Sh9_K3I8J0EXsIJLOZztjISmcY3hHH06fn28a95WWzsFJwtbwv6JyrvfKpLdz3aFHhl8ZWKsEcEFB3zBYFZVSKMSn06yeeA1E2OiQvkA9N-SB1Tv1vkLuGrFaAZ3YsFguboYgAEpauBWsk2NPnxXqUFMsM1SCJf6Ncwtq0x5cPvTxeysIVtUQ1VrQqd2NARNLzw.oa0gUeqJi-21pa2Saqyjcg","path":"/tmp/agent-browser/dither-veil-ts.png","browserUrl":null,"pageTitle":null,"width":1366,"height":1024}]}}],["p",{},["text",{},"The TypeScript conversion is done and verified. The iridescent glass-head portrait renders correctly with the Floyd-Steinberg dither veil, "],["code",{},"reverse"],["text",{}," active, and no console errors."]],["h2",{},["text",{},"Summary"]],["p",{},["text",{},"I swapped the component to the TypeScript version you provided:"]],["ul",{"start":1},["li",{"index":1},["strong",{},["code",{},"components/dither-veil.tsx"]],["text",{}," — new fully-typed component ("],["code",{},"DitherVeilProps"],["text",{}," interface, typed helpers, OGL/WebGL2 casts). I added "],["code",{},"'use client'"],["text",{}," at the top since it uses "],["code",{},"useEffect"],["text",{},", refs, and WebGL."]],["li",{"index":2},["strong",{},["text",{},"Removed"]],["text",{}," the old "],["code",{},"components/dither-veil.jsx"],["text",{}," and "],["code",{},"components/dither-veil.css"],["text",{},". The CSS is no longer needed — styling now lives in the Tailwind classes on the container ("],["code",{},"relative w-full h-full overflow-hidden touch-pan-y"],["text",{},")."]],["li",{"index":3},["text",{},"The page import ("],["code",{},"@/components/dither-veil"],["text",{},") resolves to the new "],["code",{},".tsx"],["text",{}," unchanged."]]],["p",{},["text",{},"TypeScript compiles cleanly ("],["code",{},"tsc --noEmit"],["text",{}," passes) and the veil renders as expected. One note for mobile: the example still uses a fixed "],["code",{},"height: '600px'"],["text",{}," with "],["code",{},"fit=\"contain\""],["text",{},", so on narrow screens the portrait sits centered with ink/paper space around it — let me know if you'd like it to fill the mobile viewport instead."]]]],[1,{"retiredFileTasks":[{"id":"HkoCaIr8qOBJeLWq","taskType":"task-write-file-v1"},{"id":"85tfyuJVxLr2U208","taskType":"task-delete-file-v1"},{"id":"SsDbJ6w6xzhdwMwo","taskType":"task-delete-file-v1"}]}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"WI5vpE1HfQMvG8EQlW82SXAUSlp8nnae","gitRevision":{"baseSha":"759dcef0942b5e59d5a9918b003e6d3fcb094998","headSha":"78537c78264ea1e9aee7f5ce6db0bde63017c76e","readyAt":"2026-09-24T21:32:59.865Z","version":1,"commitMessage":"refactor: migrate DitherVeil component to TypeScript and remove CSS file"},"streaming":false,"finishReason":"stop","parentId":"dz1kuMxbp8cWMdzv9rkWhKtSJ0qqahrX","type":"message","creditCost":0.81607225,"workMetrics":{"diffMap":{},"linesRead":29,"agentActions":6},"createdAt":"$D2026-09-24T21:30:22.761Z","updatedAt":"$D2026-09-24T21:32:59.865Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"$128"}],"version":1},"role":"user","id":"NlviPtrQQBLvNpQK3xxmZpA9ZVy24p8q","attachments":[],"parentId":"WI5vpE1HfQMvG8EQlW82SXAUSlp8nnae","type":"message","authorId":"wkEMV8zgQrglLBxBibp6UQGC","createdAt":"$D2026-09-24T21:32:58.895Z"},{"v0ModelId":"v0-max","content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"This is the CSS-based version of the same TypeScript component. I'll switch back: recreate the CSS file and update the component to use "],["code",{},".dither-veil"],["text",{}," class with the CSS import."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_nYnfCpdpxix","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/dither-veil.css","baseName":"dither-veil.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]css:file=\"/components/dither-veil.css\" \nGENERATING","latestDeploymentInfo":"$122:2:1","lastDeployedAt":"2026-09-24T21:33:45.087Z","sourceVersionKey":"v_1_sh6l6_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_nYnfCpdpxix","meta":{"taskNameActive":"Restoring CSS file","taskNameComplete":"Restored CSS file","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Restoring CSS file","taskNameComplete":"Restored CSS file"},"id":"block-b_nYnfCpdpxix"}],["p",{},["text",{},"Now let me update the component to use the CSS import and class name."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_uDT03DnvvAk","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/components/dither-veil.tsx","baseName":"dither-veil.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"/components/dither-veil.tsx\" \nGENERATING","latestDeploymentInfo":"$122:3:1","lastDeployedAt":"2026-09-24T21:33:45.087Z","sourceVersionKey":"v_1_68t1b_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_uDT03DnvvAk","meta":{"taskNameActive":"Updating component import","taskNameComplete":"Updated component import","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating component import","taskNameComplete":"Updated component import"},"id":"block-b_uDT03DnvvAk"}],["p",{},["text",{},"Now let me update the last CSS class reference and the block that returns it. Let me check the last useEffect line in the return — the component I wrote earlier used Tailwind classes on the container. Let me fix that."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_rNMuwZtwjPe","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/components/dither-veil.css","baseName":"dither-veil.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"/components/dither-veil.tsx","baseName":"dither-veil.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$129","latestDeploymentInfo":"$122:4:1","lastDeployedAt":"2026-09-24T22:25:40.375Z","sourceVersionKey":"v_1_7sd2r_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_rNMuwZtwjPe","meta":{"taskNameActive":"Updating container class","taskNameComplete":"Updated container class","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating container class","taskNameComplete":"Updated container class"},"id":"block-b_rNMuwZtwjPe"}],["p",{},["text",{},"Now let me verify the CSS version compiles and renders."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285599043,"finishedAt":1790285604324,"lastPartSentAt":1790285604174,"taskNameActive":"Type-checking","taskNameComplete":"Type-checked","toolCallId":"toolu_011Y2qU5n45BWR7S87p5iwLk","agentTurnId":"turn_4IAXW56CG5B7AvqM","filePath":null,"id":"a04fiO6sjWd2GRCN","type":"task-subtask-v1","parts":[{"type":"subtask-started","data":{"subtaskType":"bash","command":"cd /vercel/share/v0-project && pnpm exec tsc --noEmit","timeout":120000}},{"type":"subtask-log","data":{"logType":"created-terminal","terminalId":"cmd_d4fd0dced89f49b49cd53f1cb588","taskId":"bash_cmd_d4fd0dced89f49b49cd53f1cb588"},"id":"Y4UslMnm2iW3Y4pl"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":""},"id":"EPda7XadlSqOzy83"}]}}],["p",{},["text",{},"TypeScript passes. Let me verify it renders in the browser."]],["AssistantMessageContentPart",{"part":{"createdAt":1790285608100,"finishedAt":1790285615871,"lastPartSentAt":1790285615824,"taskNameActive":"Verifying CSS version","taskNameComplete":"Verified CSS version","toolCallId":"toolu_01WCPezYFHBF9JJWBxqatnEa","agentTurnId":"turn_z25RcDrFspoaLNpf","filePath":null,"id":"Ktbl93J2Jc1JPbdU","type":"task-subtask-v1","parts":[{"type":"subtask-started","data":{"subtaskType":"bash","command":"agent-browser close && agent-browser open --webgpu \"http://localhost:${DEV_PORT:-3000}\" && agent-browser set media dark && agent-browser set viewport 1366 1024 && agent-browser wait 2000 && agent-browser screenshot /tmp/agent-browser/dither-veil-css.png && agent-browser errors","timeout":120000}},{"type":"subtask-log","data":{"logType":"created-terminal","terminalId":"browser-sandbox-049e4b5e-1053-4fa0-874a-2fc4fb27ad29","taskId":"bash_browser-sandbox-049e4b5e-1053-4fa0-874a-2fc4fb27ad29"},"id":"Iwy7N4V5PEgFtrVk"},{"type":"subtask-log","data":{"logType":"poll-terminal-output","delta":"✓ Browser closed\n✓ Digital Matter — Interactive Portrait\n http://localhost:3000/\n✓ Done\n✓ Done\n✓ Done\n✓ Screenshot saved to /tmp/agent-browser/dither-veil-css.png\n\n[agent-browser] launched browser\n"},"id":"GMCgK84yyVrwR2hq"},{"type":"agent-browser-screenshot","id":"ChOIXmAaQkDt1PWJ","screenshotUrl":"https://uploads.vusercontent.net/a/eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..JPWs9_y3mkfGiumS.MzG4Z1eptA2WalTXv0freYeCKJMo_t-JKSc9EOrrN5PRk-IuRus0vxp6c8HSy0zHtNe40oK_Dh-E2ZdWUaDpCaWDfREaS5fKBnXpZ-XgXhwmMBTWkJKAjhLFlnWu8P5UpVAKLceBRJchnFti7MUhr-sDDKvFaWccsDFyZvnhZshKx_ZkFRAG38eFJ3AVIwCcU33WJt4p2XVdYg.aNou5mF9tzIWC6iPpTMVkg","path":"/tmp/agent-browser/dither-veil-css.png","browserUrl":null,"pageTitle":null,"width":1366,"height":1024}]}}],["p",{},["text",{},"Switched back to the CSS version. The component now imports "],["code",{},"./dither-veil.css"],["text",{}," and uses the "],["code",{},".dither-veil"],["text",{}," class, and I recreated the CSS file with the original styles. TypeScript passes and it renders correctly with no console errors."]],["p",{},["text",{},"One thing worth flagging on mobile: the example's fixed "],["code",{},"height: '600px'"],["text",{}," with "],["code",{},"fit=\"contain\""],["text",{}," leaves empty black space below the portrait on tall screens (visible in the screenshot). That's the verbatim repo example behavior — let me know if you'd like the container to fill the mobile viewport instead so there's no dead space."]]]],[1,{"retiredFileTasks":[{"id":"2gUJOz2mgEEqbfsN","taskType":"task-write-file-v1"},{"id":"MXFjyt8vkAc3LBx3","taskType":"task-edit-file-v1"},{"id":"Hea9lGDvuUW4UrwZ","taskType":"task-edit-file-v1"}]}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"dvfOE7WsgcF2OrEgbvePbPPsb0vsuiMw","gitRevision":{"baseSha":"78537c78264ea1e9aee7f5ce6db0bde63017c76e","headSha":"21a67715094f5f6d0312d4990f32f0f47663f9c0","readyAt":"2026-09-24T21:33:45.082Z","version":1,"commitMessage":"feat: add CSS file and update DitherVeil component styling"},"streaming":false,"finishReason":"stop","parentId":"NlviPtrQQBLvNpQK3xxmZpA9ZVy24p8q","type":"message","creditCost":0.489389,"workMetrics":{"diffMap":{},"agentActions":5},"createdAt":"$D2026-09-24T21:32:58.896Z","updatedAt":"$D2026-09-24T21:33:45.083Z"}],"lastSyncedAt":1792902291197,"undo":null,"activeForkKey":["KRVsJJ8yRa0YZqUL0ue29IDOW6com261","uJ1SeYIokusKITi0Gpw7fX5i0BMvVuGV","3wNuXdz4kd9AFj5DOqN6ovUOCYrMDk9R","xsQ46nYL55VUzxIxSYeFJ0zOBEvyGsJP","7kTS2hNQgaPjtI19SJbQ8F5A1um5nID0","bIrH4UiOFgAiUYAnBq6OLrvuSB11uUeq","oDcL5wauP3UTsHNoO3VO8CN5k1mqXruF","gJNBsnWN0rRJ9sGle1VsQieqSAJsU700","l4XtoEt3XtftVH9VloiuRhHJq1Q6tFoB","49mJfub107fDDWpi0zc9C8U3PXW9eN7u","D0KO3Ri8xnE1whqa2nPLBCbZm5bzwsfQ","1cQxPe2UPVwMx6nARkKnCHhO73S0efUt","dz1kuMxbp8cWMdzv9rkWhKtSJ0qqahrX","WI5vpE1HfQMvG8EQlW82SXAUSlp8nnae","NlviPtrQQBLvNpQK3xxmZpA9ZVy24p8q","dvfOE7WsgcF2OrEgbvePbPPsb0vsuiMw"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"lS7rpJmAQ3o\",":{"id":"b_rNMuwZtwjPe","meta":{"taskNameActive":"Updating container class","taskNameComplete":"Updated container class","type":"code-project","id":"Code"},"initial":true,"type":"code-project","messageId":"dvfOE7WsgcF2OrEgbvePbPPsb0vsuiMw","language":"typescriptreact","source":"$12a","closed":true,"hasSourceBeenEdited":false,"lastDeployedAt":"2026-09-24T22:25:40.375Z","latestDeploymentInfo":"$122:4:1","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"lS7rpJmAQ3o\",":{"title":"Integrate DitherVeil component","authorId":"wkEMV8zgQrglLBxBibp6UQGC","ownerId":"team_AKsfbcMELfg0jBxb54UgyjCD","storageEntityType":"v0-git-s3-storage","storageEntityId":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","tailwindV4Default":true,"vercelProjectId":"prj_EqVlsqGa2eABmZ6z2gmVIgYzmhzb","canWriteToChat":false,"nextVersionDefault":16},"@\"chat:vm-mode\",\"lS7rpJmAQ3o\",":true,"@\"chat:vercel-project\",\"lS7rpJmAQ3o\",":"$@12b","@\"team:sensitive-environment-variable-policy\",\"lS7rpJmAQ3o\",":"$@12c","@\"block-view\",\"lS7rpJmAQ3o\",":true,"integrations:figma":"$@12d"},"children":["$L12e","$L12f","$L130","$L131","$L132"]}]}]}] 3c:o9,104:null 3c:oebc,134:I[900547,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"FullChat"] 135:"NavigationMarker" 136:I[493928,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$135"] 137:"OpenInV0JourneyCompletion" 138:I[228493,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$137"] 139:"SuspendingKeepTitleUpdated" 13a:I[487989,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$139"] 13b:"KeepClientOnUpToDateSlugPath" 13c:I[983440,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f","$80","$92","$93","$82","$8b","$85","$84","$94","$86","$95","$96","$97","$83","$98","$8d","$90","$8a","$89","$8e","$8f","$99","$9a","$8c","$9b","$88"],"$13b"] 111:{"ok":true,"value":{"designSystemId":null,"title":"Integrate DitherVeil component","privacy":"public","access":1,"isAdmin":false,"isAuthor":false,"ownerId":"team_AKsfbcMELfg0jBxb54UgyjCD","authorId":"anon:NHHS05B4FjQkTnZkvG0SW","tailwindV4Default":true,"nextVersionDefault":16,"nextVersion15Default":false,"forceVMRendering":false,"isNextLiteReadOnly":false,"canWriteToChat":false,"ownerRestriction":null,"canManageChat":false,"chatCreatedAt":1790255677485,"hasBlock":true,"vercelProject":null,"hasGitConnection":false,"gitBase":null,"gitHead":null,"hasSnowflakeIntegration":false,"chatHasAnySnowflakeIntegration":false,"storageEntityType":"v0-git-s3-storage","storageEntityId":"v0-1-wkEMV8zgQrglLBxBibp6UQGC-lS7rpJmAQ3o","vercelProjectId":"prj_EqVlsqGa2eABmZ6z2gmVIgYzmhzb","defaultPreviewPath":null,"agentWorkspace":false,"workspaceRuntime":false}} 112:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 113:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 114:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 115:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 116:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 117:{"ok":true,"value":null,"__seedOnly":true} 11b:null 133:T292fa,3c:o292fa,Digital Matter — Interactive Portrait

3c:o1ca,11c:"$133" 12b:"$undefined" 12c:"$undefined" 12d:{"isSignedIn":false} 12e:["$","$L134","full-chat",{"isMobile":false,"templatesServer":null}] 12f:["$","$L136",null,{"phase":"content","label":"Chat.Detail","routeOverride":"/chat/[slug]"}] 130:["$","$L138",null,{}] 131:["$","$3e",null,{"children":["$","$L13a",null,{"chatId":"lS7rpJmAQ3o"}]}] 132:["$","$L13c",null,{"id":"lS7rpJmAQ3o","requireMatchingChatPath":true,"title":"Integrate DitherVeil component"}] 3c:o37,41:C 40:C 1:C 38:C 22:C 36:C 2c:C 1b:C 18:C 42:[70283] 3c:C