[{"_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",{"_96":95,"_32":46,"_105":86,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/garden.js","latestPath","fileId","0144553a-6032-11f1-9229-1607ee4eb77e","name","garden.js","fileType","script","content","// 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)); }\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 { // 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 }\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","// 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 { // 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 }\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","createdAt",["D",1780590903029],"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",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":56,"_101":102,"_103":25},"branch",{"_13":85,"_32":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"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=1789545599&sig=a8da35ef71655bebef6a4600a21351bd7f28e3bed5ff684593eef639c5d17466","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":192,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":193,"_80":194,"_82":195,"_84":25},"tree",[166,169,170],"files",[166,167,168,169,170],"counts",{"_156":62,"_157":135,"_158":62,"_159":160,"_161":162},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":123,"_39":153,"_13":62,"_34":154,"_36":-5,"_24":25,"_140":-5,"_27":155},{"_44":142,"_32":143,"_30":144,"_134":-5,"_42":43,"_41":145,"_136":25,"_39":146,"_13":62,"_34":20,"_36":147,"_24":25,"_140":-5,"_27":148},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":25,"_39":137,"_13":62,"_34":138,"_36":139,"_24":25,"_140":-5,"_27":141},"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",[132],"882c78e7-f1c9-4a09-92ac-654bb27b6f51","index.html","b4f4ccc8-6031-11f1-b54d-1607ee4eb77e",2,["D",1780590203067],"\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

Spritzclick to spray

Sparkclick to burst

\n\n \n

\n \n\n\n",[143],"470e758c-1f05-4d0a-a5ce-19fb23cff14c","frontend","f6d8a45c-5f79-4e35-ad20-9c7afb76db1c",3,["D",1780590225407],"directory",[150],"pulls","branches","forks","envVars",{"_163":62,"_165":62},"connections",{"_163":62,"_164":62},"count","unfilledCount","emptyCount",{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":123,"_39":189,"_13":62,"_34":154,"_36":-5,"_24":25,"_140":-5,"_172":190,"_27":191},{"_44":185,"_32":33,"_30":31,"_134":151,"_42":43,"_41":14,"_136":25,"_39":186,"_13":135,"_34":35,"_36":38,"_24":25,"_140":-5,"_172":187,"_27":188},{"_44":178,"_32":179,"_30":180,"_134":151,"_42":43,"_41":152,"_136":25,"_39":181,"_13":62,"_34":20,"_36":182,"_24":25,"_140":-5,"_172":183,"_27":184},{"_44":142,"_32":143,"_30":144,"_134":-5,"_42":43,"_41":145,"_136":25,"_39":175,"_13":62,"_34":20,"_36":147,"_24":25,"_140":-5,"_172":176,"_27":177},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":25,"_39":171,"_13":62,"_34":138,"_36":139,"_24":25,"_140":-5,"_172":173,"_27":174},["D",1780590190736],"children",[],[132],["D",1780590203067],[],[143],"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",[],[150,179],"04021444-ad21-4023-96b5-56be8b7d3809",["D",1780590903029],[],[150,33],["D",1780590225407],[167,168],[150],["D",1780590190719],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":56,"_101":102,"_103":25},{"_13":85,"_32":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"ctx",{"_78":-5,"_125":229,"_230":231,"_232":233,"_234":25,"_235":25,"_236":25,"_237":123,"_238":-5,"_239":-7,"_240":-7,"_241":62,"_242":25,"_243":25,"_244":-5,"_245":25,"_246":25,"_247":25,"_248":-5},"ENV",{"_200":201,"_202":203,"_204":86,"_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 · v5