[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_196":197,"_198":199},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_103":84,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","index.html","latestPath","fileId","b4f4ccc8-6031-11f1-b54d-1607ee4eb77e","name","fileType","content","\n\n\n\n\nHyperdesigns — a garden of living surfaces\n\n\n\n\n\n\n\n

Hyperdesigns

A garden of living surfaces

Bounded WebGL shaders that can't blow out to white — plus two that spray when you click. Hover to quicken, click to stir or splash.

\n\n

Tideteal liquid

Lavamolten embers

Auroranight curtains

Inkmono swirl

Plasmaelectric flow

Mercuryliquid chrome

Cellsvoronoi

Causticsunderwater light

Oiliridescent slick

CRTretro phosphor

Spritzclick to spray

Sparkclick to burst

\n\n \n

\n \n\n\n","\n\n\n\n\nHyperdesigns — a garden of living surfaces\n\n\n\n\n\n\n\n

\n \n

Hyperdesigns

A garden of living surfaces

Bounded WebGL shaders that can't blow out to white — plus two that spray when you click. Hover to quicken, click to stir or splash.

\n\n

Tideteal liquid

Lavamolten embers

Auroranight curtains

Inkmono swirl

Plasmaelectric flow

Mercuryliquid chrome

Cellsvoronoi

Causticsunderwater light

Oiliridescent slick

CRTretro phosphor

Spritzclick to spray

Sparkclick to burst

\n\n \n

\n \n\n\n","createdAt",["D",1780590942509],"branchVersion","branchId","632586b4-33ee-4589-9ab1-42291fff8842","id","7c402379-8300-40ba-a87b-5995a8647a1f","hyperdesigns-garden",["D",1780590190719],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A garden of WebGL living-surface button takes + click-spray FX","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789549199&sig=ba6cb56be519e398fb1aaf2bfc5a08e515fd30b1ec6971317843b793c46a262f","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":192,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":193,"_78":194,"_80":195,"_82":25},"tree",[161,164,165],"files",[161,162,163,164,165],"counts",{"_151":60,"_152":133,"_153":60,"_154":155,"_156":157},"contents",[126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":144,"_32":145,"_30":146,"_132":-5,"_40":41,"_39":147,"_134":121,"_37":148,"_13":60,"_33":149,"_34":-5,"_24":25,"_138":-5,"_27":150},{"_42":140,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":121,"_37":141,"_13":142,"_33":20,"_34":36,"_24":25,"_138":-5,"_27":143},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":25,"_37":135,"_13":60,"_33":136,"_34":137,"_24":25,"_138":-5,"_27":139},"bc3540ce-ce34-46e5-af41-7b7a2bf92c8f","main.ts","ad9b11f8-6031-11f1-ba03-1607ee4eb77e","parentId",1,"latest",["D",1780590190736],"http","import { Hono } from \"npm:hono@4\";\nimport { readFile, serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", async (c) => c.html(await readFile(\"/index.html\", import.meta.url)));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default app.fetch;\n","label",[130],"fb9af8a8-7bce-46d8-9b8f-4e05a5efa728",["D",1780590942509],2,[28],"470e758c-1f05-4d0a-a5ce-19fb23cff14c","frontend","f6d8a45c-5f79-4e35-ad20-9c7afb76db1c",3,["D",1780590225407],"directory",[145],"pulls","branches","forks","envVars",{"_158":60,"_160":60},"connections",{"_158":60,"_159":60},"count","unfilledCount","emptyCount",{"_42":144,"_32":145,"_30":146,"_132":-5,"_40":41,"_39":147,"_134":121,"_37":189,"_13":60,"_33":149,"_34":-5,"_24":25,"_138":-5,"_167":190,"_27":191},{"_42":180,"_32":181,"_30":182,"_132":146,"_40":41,"_39":183,"_134":121,"_37":184,"_13":142,"_33":185,"_34":186,"_24":25,"_138":-5,"_167":187,"_27":188},{"_42":173,"_32":174,"_30":175,"_132":146,"_40":41,"_39":147,"_134":25,"_37":176,"_13":60,"_33":20,"_34":177,"_24":25,"_138":-5,"_167":178,"_27":179},{"_42":140,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":121,"_37":170,"_13":142,"_33":20,"_34":36,"_24":25,"_138":-5,"_167":171,"_27":172},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":25,"_37":166,"_13":60,"_33":136,"_34":137,"_24":25,"_138":-5,"_167":168,"_27":169},["D",1780590190736],"children",[],[130],["D",1780590942509],[],[28],"1c5baa72-0d64-4a8e-98a9-7f69967dc49c","style.css","c2457508-6031-11f1-998a-1607ee4eb77e",["D",1780590225407],":root{\n --bg:#06090c;\n --bg2:#0a1015;\n --ink:#e9f1f0;\n --muted:#71857f;\n --faint:#4f615e;\n --accent:#7fe9dd;\n --glow:rgba(64,224,208,.18);\n --serif:\"Fraunces\", Georgia, serif;\n --mono:\"DM Mono\", ui-monospace, monospace;\n}\n*{ box-sizing:border-box; }\nhtml,body{ height:100%; }\nbody{\n margin:0;\n font-family:var(--mono);\n color:var(--ink);\n background:radial-gradient(130% 80% at 50% -10%, var(--bg2), var(--bg) 60%);\n -webkit-font-smoothing:antialiased;\n position:relative;\n}\nbody::after{\n content:\"\"; position:fixed; inset:0; z-index:0; pointer-events:none;\n opacity:.04; mix-blend-mode:overlay;\n background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n.wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px) 40px; }\n\n.head{ text-align:center; margin-bottom:clamp(34px,5vw,56px); }\n.kicker{ margin:0 0 14px; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }\n.title{ margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,62px); line-height:1.0; letter-spacing:-.02em; color:#f3faf8; }\n.sub{ max-width:54ch; margin:18px auto 0; font-size:13.5px; line-height:1.55; color:var(--muted); }\n\n.grid{\n display:grid;\n grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));\n gap:clamp(14px,2vw,22px);\n}\n\n.card{\n position:relative;\n aspect-ratio:4 / 3;\n border-radius:20px;\n overflow:hidden;\n cursor:pointer;\n border:1px solid rgba(255,255,255,.09);\n background:#0a1216;\n box-shadow:0 16px 34px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;\n transition:transform .16s cubic-bezier(.2,.85,.25,1), box-shadow .2s ease, border-color .2s ease;\n -webkit-tap-highlight-color:transparent; user-select:none;\n}\n.card canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }\n/* gloss + readability scrim for the caption */\n.card::before{\n content:\"\"; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;\n background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 24%),\n linear-gradient(0deg, rgba(0,8,10,.62), transparent 42%);\n mix-blend-mode:normal;\n}\n.card figcaption{\n position:absolute; left:16px; bottom:13px; z-index:2;\n display:flex; flex-direction:column; gap:1px; pointer-events:none;\n text-shadow:0 1px 8px rgba(0,0,0,.6);\n}\n.card figcaption b{ font-family:var(--serif); font-weight:600; font-size:19px; color:#fff; letter-spacing:.01em; }\n.card figcaption span{ font-size:11px; color:rgba(233,241,240,.62); letter-spacing:.03em; }\n.card:hover{\n transform:translateY(-3px);\n border-color:rgba(127,233,221,.32);\n box-shadow:0 26px 46px -18px rgba(0,0,0,.85), 0 0 40px -14px var(--glow);\n}\n.card.pressed{ transform:translateY(0) scale(.988); }\n.card.spray{ background:radial-gradient(120% 100% at 50% 30%, #0c171b, #060b0e 70%); }\n\n.foot{\n margin-top:clamp(28px,4vw,46px);\n display:flex; gap:18px; align-items:center; justify-content:space-between;\n font-size:11px; color:var(--faint);\n}\n.foot a{ color:var(--faint); text-decoration:none; border-bottom:1px solid rgba(79,97,94,.4); padding-bottom:1px; transition:.2s; }\n.foot a:hover{ color:var(--accent); border-color:var(--accent); }\n\n@media (max-width:560px){\n .grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }\n .card figcaption b{ font-size:16px; }\n .foot{ flex-direction:column; gap:8px; }\n}\n",[],[145,174],"adc7fc50-4c5c-48fd-ad08-431bd4053274","garden.js","0144553a-6032-11f1-9229-1607ee4eb77e",6,["D",1780590926903],"script","// Hyperdesigns garden — a grid of \"living surface\" takes.\n// 6 shader cards share ONE bounded fragment (mode-switched): tide, lava, aurora,\n// ink, plasma, mercury. Math is fbm + tonemap => always in [0,1], so no GPU\n// precision quirk can wash a card white. 2 cards spray particles on click.\n\n/* ---------------- shared shader ---------------- */\nconst VERT = `attribute vec2 aPos; void main(){ gl_Position = vec4(aPos,0.0,1.0); }`;\n\nconst FRAG = `\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform int uMode;\n\nfloat hash21(vec2 p){ p=fract(p*vec2(123.34,345.45)); p+=dot(p,p+34.345); return fract(p.x*p.y); }\nfloat vnoise(vec2 p){\n vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.0-2.0*f);\n float a=hash21(i), b=hash21(i+vec2(1.0,0.0)), c=hash21(i+vec2(0.0,1.0)), d=hash21(i+vec2(1.0,1.0));\n return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);\n}\nfloat fbm(vec2 p){ float s=0.0,a=0.5; for(int i=0;i<4;i++){ s+=a*vnoise(p); p*=2.0; a*=0.5; } return s; }\nvec3 pal(float t, vec3 a, vec3 b, vec3 c, vec3 d){ return a + b*cos(6.28318*(c*t+d)); }\nvec2 h22(vec2 p){ p = vec2(dot(p, vec2(127.1,311.7)), dot(p, vec2(269.5,183.3))); return fract(sin(p)*43758.5453); }\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / iResolution.xy;\n vec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy) / iResolution.y * 3.5;\n float t = iTime * 0.15;\n vec3 col;\n\n vec2 q = vec2(fbm(p + vec2(0.0,t)), fbm(p + vec2(5.2,1.3) - t));\n vec2 r = vec2(fbm(p + 1.6*q + vec2(1.7,9.2) + t*0.7),\n fbm(p + 1.6*q + vec2(8.3,2.8) - t*0.6));\n float n = fbm(p + 2.0*r + vec2(t*0.5, 0.0));\n float ridge = pow(1.0 - abs(2.0*fbm(p*2.0 + 3.0*r + vec2(t,0.0)) - 1.0), 3.0);\n\n if (uMode == 0) { // Tide\n vec3 deep=vec3(.02,.09,.16), mid=vec3(.05,.45,.55), hi=vec3(.6,.93,.96);\n col = mix(deep, mid, smoothstep(.2,.7,n));\n col = mix(col, hi, smoothstep(.55,.95,n)*.7);\n col += hi * ridge * .5 * smoothstep(.3,.9,n);\n } else if (uMode == 1) { // Lava\n vec3 c1=vec3(.18,.02,.02), c2=vec3(.85,.18,.04), c3=vec3(1.0,.75,.2);\n col = mix(c1, c2, smoothstep(.25,.65,n));\n col = mix(col, c3, smoothstep(.6,.95,n)*.8);\n col += vec3(1.0,.6,.15) * ridge * .9 * smoothstep(.4,.95,n);\n } else if (uMode == 2) { // Aurora\n float aur = fbm(vec2(p.x*.8 + sin(p.y*1.5 + iTime*.6)*.5, p.y*.55 - iTime*.25));\n aur = pow(clamp(aur,0.0,1.0), 1.6);\n float hue = fbm(p*.6 + vec2(0.0, iTime*.1));\n col = mix(vec3(.1,.95,.55), vec3(.5,.2,.95), smoothstep(.3,.7,hue)) * aur * 1.6;\n col += vec3(.2,.5,.4) * pow(aur, 3.0);\n col += vec3(.01,.02,.05);\n } else if (uMode == 3) { // Ink\n float s = smoothstep(.42,.72,n);\n col = vec3(s) * vec3(.92,.96,1.04);\n col += vec3(.6,.75,.85) * ridge * .25;\n } else if (uMode == 4) { // Plasma\n float pv = ((.5+.5*sin(p.x*3.0+iTime))\n + (.5+.5*sin(p.y*3.2-iTime*1.2))\n + (.5+.5*sin((p.x+p.y)*2.4+iTime*.7))) / 3.0;\n pv = mix(pv, n, .4);\n col = pal(pv + iTime*.05, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67));\n col = mix(vec3(.02,0.0,.05), col, .5+.5*pv);\n col += ridge * .3 * vec3(.6,.9,1.0);\n } else if (uMode == 5) { // Mercury\n float m = smoothstep(.15,.9,n);\n col = mix(vec3(.08,.10,.13), vec3(.95,.98,1.0), pow(m,.7));\n float spec = pow(max(sin(n*12.0 + r.x*6.0 + iTime), 0.0), 16.0);\n col += vec3(1.0) * spec * .5;\n } else if (uMode == 6) { // Voronoi cells\n vec2 gp = floor(p*2.0), fp = fract(p*2.0);\n float f1 = 8.0, f2 = 8.0; vec2 cid = vec2(0.0);\n for (int j=-1;j<=1;j++) for (int i=-1;i<=1;i++){\n vec2 o = vec2(float(i), float(j));\n vec2 rr = h22(gp+o);\n vec2 cp = o + (0.5 + 0.5*sin(iTime*0.6 + 6.2831*rr)) - fp;\n float dd = dot(cp,cp);\n if (dd < f1){ f2=f1; f1=dd; cid=gp+o; } else if (dd < f2){ f2=dd; }\n }\n float edge = sqrt(f2) - sqrt(f1);\n float cv = fract(sin(dot(cid, vec2(12.9,78.2))) * 43758.0);\n col = pal(cv, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67)) * 0.55;\n col *= 0.45 + 0.55*smoothstep(0.0,0.25,edge);\n col += vec3(.6,.95,.9) * smoothstep(0.09,0.0,edge);\n } else if (uMode == 7) { // Caustics\n vec2 cc = p*1.5 + r;\n float ca = 0.0;\n for (int i=0;i<3;i++){\n cc = cc*1.7 + vec2(1.3,1.7);\n vec2 s = sin(cc + iTime*0.8);\n ca += pow(0.5 + 0.5*(s.x*s.y), 6.0);\n }\n ca = clamp(ca, 0.0, 1.0);\n col = mix(vec3(.0,.10,.18), vec3(.2,.7,.85), ca);\n col += vec3(.7,.95,1.0) * pow(ca,2.0) * 0.7;\n } else if (uMode == 8) { // Oil-slick iridescence\n float ph = n*3.0 + r.x*4.0 + length(p)*0.6;\n vec3 irid = pal(ph, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67));\n float sheen = smoothstep(.2,.9,n);\n col = mix(vec3(.02,.02,.04), irid, 0.35 + 0.5*sheen);\n col += irid * ridge * 0.4;\n } else { // CRT\n vec3 base = mix(vec3(.02,.08,.06), vec3(.1,.7,.45), smoothstep(.3,.8,n));\n float scan = 0.85 + 0.15*sin(gl_FragCoord.y*3.14159);\n float flick = 0.96 + 0.04*sin(iTime*60.0);\n col = base * scan * flick;\n float fringe = smoothstep(.6,1.0,abs(uv.x-0.5)*2.0);\n col.r += 0.06*fringe; col.b += 0.06*fringe;\n col *= 1.0 - 0.2*smoothstep(.4,1.0,length(uv-0.5));\n }\n\n vec2 c2 = uv - 0.5;\n col *= 1.0 - 0.28*dot(c2,c2);\n col = col / (col + vec3(0.42));\n col = pow(clamp(col, 0.0, 1.0), vec3(0.85));\n gl_FragColor = vec4(col, 1.0);\n}\n`;\n\nfunction compile(gl, type, src){\n const s = gl.createShader(type);\n gl.shaderSource(s, src); gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s) || \"compile failed\");\n return s;\n}\n\nclass ShaderCard {\n constructor(canvas, mode){\n this.canvas = canvas; this.mode = mode|0; this.broken = false;\n this.gl = canvas.getContext(\"webgl\", { antialias:true, alpha:false });\n if (!this.gl) { this.broken = true; return; }\n try { this._init(); } catch (e) { console.error(\"shader\", mode, e); this.broken = true; }\n this.phase = Math.random()*30; // desync the cards\n this.speed = 1; this.hover = false;\n this.last = performance.now();\n requestAnimationFrame((t)=>this._frame(t));\n }\n _init(){\n const gl = this.gl;\n const prog = gl.createProgram();\n gl.attachShader(prog, compile(gl, gl.VERTEX_SHADER, VERT));\n gl.attachShader(prog, compile(gl, gl.FRAGMENT_SHADER, FRAG));\n gl.linkProgram(prog);\n if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog) || \"link failed\");\n gl.useProgram(prog); this.prog = prog;\n const buf = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);\n const a = gl.getAttribLocation(prog, \"aPos\");\n gl.enableVertexAttribArray(a);\n gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);\n this.uRes = gl.getUniformLocation(prog, \"iResolution\");\n this.uTime = gl.getUniformLocation(prog, \"iTime\");\n gl.uniform1i(gl.getUniformLocation(prog, \"uMode\"), this.mode);\n }\n _resize(){\n const gl = this.gl, c = this.canvas;\n const dpr = Math.min(window.devicePixelRatio || 1, 1.5); // many canvases -> modest\n const w = Math.round(c.clientWidth*dpr), h = Math.round(c.clientHeight*dpr);\n if (w < 2 || h < 2) return false;\n if (c.width === w && c.height === h) return true;\n c.width = w; c.height = h; gl.viewport(0,0,w,h);\n return true;\n }\n stir(){ this.speed = Math.max(this.speed, 6.0); }\n _frame(t){\n if (!this._resize()) { requestAnimationFrame((tt)=>this._frame(tt)); return; }\n const gl = this.gl;\n gl.clearColor(0.04,0.07,0.08,1.0); gl.clear(gl.COLOR_BUFFER_BIT);\n if (!this.broken) {\n const dt = Math.min((t-this.last)/1000, 0.05); this.last = t;\n const base = this.hover ? 2.6 : 1.0;\n this.speed += (base - this.speed) * Math.min(dt*3.0, 1.0);\n this.phase += dt * this.speed;\n gl.useProgram(this.prog);\n gl.uniform2f(this.uRes, this.canvas.width, this.canvas.height);\n gl.uniform1f(this.uTime, this.phase);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n }\n requestAnimationFrame((tt)=>this._frame(tt));\n }\n}\n\n/* ---------------- click-spray (2D canvas) ---------------- */\nclass SprayCard {\n constructor(canvas, variant){\n this.canvas = canvas; this.variant = variant;\n this.ctx = canvas.getContext(\"2d\");\n this.parts = []; this.ripples = [];\n this.last = performance.now(); this.dripT = 0; this.ready = false;\n this._resize(); window.addEventListener(\"resize\", ()=>this._resize());\n requestAnimationFrame((t)=>this._frame(t));\n }\n _resize(){\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = this.canvas.clientWidth, h = this.canvas.clientHeight;\n if (w < 2 || h < 2) { this.ready = false; return; }\n this.W = w; this.H = h;\n this.canvas.width = Math.round(w*dpr); this.canvas.height = Math.round(h*dpr);\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n this.ready = true;\n }\n emit(x, y, count){\n const spark = this.variant === \"spark\";\n const n = count || (spark ? 44 : 38);\n for (let i = 0; i < n; i++){\n const ang = spark ? Math.random()*6.2832\n : (-Math.PI/2 + (Math.random()-0.5)*Math.PI*0.95);\n const sp = spark ? (130 + Math.random()*300) : (90 + Math.random()*210);\n this.parts.push({\n x, y, px:x, py:y,\n vx: Math.cos(ang)*sp,\n vy: Math.sin(ang)*sp - (spark ? 0 : 30),\n life: 0,\n ttl: spark ? (0.45 + Math.random()*0.55) : (0.7 + Math.random()*0.8),\n r: spark ? (0.8 + Math.random()*1.6) : (1.4 + Math.random()*3.2),\n hue: spark ? (18 + Math.random()*34) : (168 + Math.random()*26),\n });\n }\n if (!spark) this.ripples.push({ x, y, r: 2, life: 0 });\n }\n _frame(t){\n if (!this.ready) { this._resize(); requestAnimationFrame((tt)=>this._frame(tt)); return; }\n const dt = Math.min((t-this.last)/1000, 0.05); this.last = t;\n const spark = this.variant === \"spark\";\n this.dripT += dt;\n if (this.dripT > (spark ? 1.7 : 1.4)) {\n this.dripT = 0;\n this.emit(this.W*(0.35 + Math.random()*0.3), this.H*0.52, spark ? 9 : 7);\n }\n const ctx = this.ctx;\n ctx.clearRect(0, 0, this.W, this.H);\n const g = spark ? 240 : 1500;\n ctx.save();\n ctx.globalCompositeOperation = spark ? \"lighter\" : \"source-over\";\n for (let i = this.parts.length - 1; i >= 0; i--){\n const p = this.parts[i];\n p.life += dt;\n if (p.life >= p.ttl) { this.parts.splice(i, 1); continue; }\n p.px = p.x; p.py = p.y;\n p.vy += g*dt;\n p.vx *= (1 - (spark ? 1.3 : 0.6)*dt);\n p.x += p.vx*dt; p.y += p.vy*dt;\n const k = 1 - p.life/p.ttl;\n if (spark){\n ctx.strokeStyle = `hsla(${p.hue},100%,${55+30*k}%,${k})`;\n ctx.lineWidth = p.r*k + 0.4;\n ctx.beginPath(); ctx.moveTo(p.px, p.py); ctx.lineTo(p.x, p.y); ctx.stroke();\n } else {\n ctx.fillStyle = `hsla(${p.hue},85%,${58+16*k}%,${0.85*k})`;\n ctx.beginPath(); ctx.arc(p.x, p.y, p.r*k + 0.5, 0, 6.2832); ctx.fill();\n }\n }\n ctx.restore();\n for (let i = this.ripples.length - 1; i >= 0; i--){\n const rp = this.ripples[i]; rp.life += dt;\n const k = 1 - rp.life/0.6;\n if (k <= 0) { this.ripples.splice(i, 1); continue; }\n rp.r += 64*dt;\n ctx.strokeStyle = `rgba(140,230,220,${0.4*k})`;\n ctx.lineWidth = 1.5;\n ctx.beginPath(); ctx.arc(rp.x, rp.y, rp.r, 0, 6.2832); ctx.stroke();\n }\n requestAnimationFrame((tt)=>this._frame(tt));\n }\n}\n\n/* ---------------- wire up the grid ---------------- */\ndocument.querySelectorAll(\".card\").forEach((card) => {\n const canvas = card.querySelector(\"canvas\");\n if (card.dataset.spray) {\n const spray = new SprayCard(canvas, card.dataset.spray);\n card.addEventListener(\"pointerdown\", (e) => {\n const rct = canvas.getBoundingClientRect();\n spray.emit(e.clientX - rct.left, e.clientY - rct.top, card.dataset.spray === \"spark\" ? 48 : 42);\n });\n } else {\n const run = new ShaderCard(canvas, parseInt(card.dataset.fx, 10));\n card.addEventListener(\"pointerenter\", () => { run.hover = true; });\n card.addEventListener(\"pointerleave\", () => { run.hover = false; });\n card.addEventListener(\"pointerdown\", () => run.stir());\n }\n card.addEventListener(\"pointerdown\", () => card.classList.add(\"pressed\"));\n [\"pointerup\", \"pointerleave\", \"pointercancel\"].forEach((ev) =>\n card.addEventListener(ev, () => card.classList.remove(\"pressed\"))\n );\n});\n",[],[145,181],["D",1780590225407],[162,163],[145],["D",1780590190719],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_123":229,"_230":231,"_232":233,"_234":25,"_235":25,"_236":25,"_237":121,"_238":-5,"_239":-7,"_240":-7,"_241":60,"_242":25,"_243":25,"_244":-5,"_245":25,"_246":25,"_247":25,"_248":-5},"ENV",{"_200":201,"_202":203,"_204":84,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8