[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_210":211,"_212":213},"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",11,"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/water-button.js","latestPath","fileId","1934999a-602b-11f1-9710-1607ee4eb77e","name","water-button.js","fileType","script","content","// Side-view water in a glass. A CPU height-field handles click-driven slosh;\n// the fragment shader adds ambient waves, FBM caustics, surface-normal specular\n// glints, foam at the waterline, and a depth-graded body. One vessel fills over\n// clicks; the other holds at half. Studied from dcm31/darkWaves (zozuar).\n\nconst VERT = `\nattribute vec2 aPos;\nvoid main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\n`;\n\nconst FRAG = `\nprecision highp float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uBaseline; // fill level 0..1, y from bottom\nuniform sampler2D uHeights; // N x 1, slosh offset encoded in R\nuniform float uHeightScale;\n\nconst vec3 GLASS = vec3(0.045, 0.075, 0.085);\nconst vec3 DEEP = vec3(0.010, 0.105, 0.165);\nconst vec3 SHALLOW = vec3(0.105, 0.520, 0.600);\nconst vec3 GLOW = vec3(0.200, 0.860, 0.910);\nconst vec3 FOAMC = vec3(0.860, 0.985, 1.000);\nconst vec3 SPECC = vec3(0.920, 1.000, 1.000);\n\nfloat hash21(vec2 p){\n p = fract(p * vec2(123.34, 345.45));\n p += dot(p, p + 34.345);\n return fract(p.x * p.y);\n}\nfloat vnoise(vec2 p){\n vec2 i = floor(p), f = fract(p);\n vec2 u = f * f * (3.0 - 2.0 * f);\n float a = hash21(i), b = hash21(i + vec2(1.0, 0.0));\n float 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){\n float s = 0.0, a = 0.5;\n for (int i = 0; i < 4; i++) { s += a * vnoise(p); p *= 2.0; a *= 0.5; }\n return s;\n}\n\nfloat texH(float x){\n float e = texture2D(uHeights, vec2(clamp(x, 0.0, 1.0), 0.5)).r;\n return (e - 0.5) * 2.0 * uHeightScale;\n}\nfloat ambient(float x, float t){\n return 0.0060 * sin(x * 9.0 + t * 1.1)\n + 0.0040 * sin(x * 17.0 - t * 1.7 + 1.3)\n + 0.0025 * sin(x * 31.0 + t * 2.3);\n}\nfloat surfaceAt(float x, float t){\n float amp = smoothstep(0.0, 0.05, uBaseline); // no ripples when empty\n return uBaseline + texH(x) + amp * ambient(x, t);\n}\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / uRes;\n float t = uTime;\n\n float surf = surfaceAt(uv.x, t);\n float e = 1.6 / 128.0;\n float slope = (surfaceAt(uv.x + e, t) - surfaceAt(uv.x - e, t)) / (2.0 * e);\n float d = surf - uv.y; // > 0 underwater\n\n // ---- empty glass interior ----\n vec3 col = GLASS;\n col += 0.05 * smoothstep(0.55, 1.0, uv.y); // top sheen\n col -= 0.05 * smoothstep(0.16, 0.0, uv.y); // floor shadow\n float wall = smoothstep(0.86, 1.0, abs(uv.x - 0.5) * 2.0);\n col -= 0.035 * wall; // side walls\n col += 0.06 * exp(-pow((uv.x - 0.32) / 0.05, 2.0)) * (1.0 - 0.4 * wall); // glass streak\n\n // ---- water body ----\n float depth = clamp(d / 0.70, 0.0, 1.0);\n vec3 water = mix(SHALLOW, DEEP, depth);\n\n // domain-warped caustics in surface-relative space\n vec2 cp = vec2(uv.x * 3.2, (uv.y - surf) * 3.6);\n cp += 0.35 * vec2(fbm(cp * 1.4 + t * 0.12), fbm(cp * 1.4 - t * 0.10));\n float ca = pow(clamp(fbm(cp * 2.0 + vec2(0.0, t * 0.25)), 0.0, 1.0), 2.2);\n water += GLOW * ca * 0.55 * smoothstep(0.0, 0.45, d) * (1.0 - 0.65 * depth);\n\n // near-surface emissive glow\n water += GLOW * exp(-d * 7.0) * 0.30;\n\n float waterMask = smoothstep(0.0, 0.005, d) * step(0.0001, surf);\n float inView = smoothstep(0.0, 0.02, surf) * (1.0 - smoothstep(1.0, 1.07, surf));\n col = mix(col, water, waterMask);\n\n // ---- surface shading ----\n vec2 n = normalize(vec2(-slope * 3.0, 1.0)); // surface normal in screen plane\n vec2 L = normalize(vec2(0.40, 1.0)); // light from upper area\n float spec = pow(max(dot(n, L), 0.0), 18.0);\n col += SPECC * spec * exp(-pow(d * 45.0, 2.0)) * 0.85 * inView;\n\n // foam at the waterline, heavier on crests, broken by noise\n float foamNoise = 0.55 + 0.45 * fbm(vec2(uv.x * 42.0, t * 1.6));\n float crest = clamp(abs(slope) * 7.0, 0.0, 1.0);\n float foam = exp(-pow((d - 0.004) * 70.0, 2.0)) * foamNoise * (0.45 + 0.9 * crest);\n col += FOAMC * foam * inView;\n\n // dark meniscus just under foam for separation\n col -= vec3(0.0, 0.03, 0.04) * exp(-pow((d - 0.03) * 45.0, 2.0)) * inView;\n\n // ---- finish ----\n vec2 q = uv - 0.5;\n col *= 1.0 - 0.17 * dot(q, q); // vignette\n col += (hash21(uv * uRes + t) - 0.5) * 0.012; // subtle grain\n col = pow(clamp(col, 0.0, 1.0), vec3(0.9)); // gentle lift\n\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);\n gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {\n throw new Error(gl.getShaderInfoLog(s) || \"shader compile failed\");\n }\n return s;\n}\n\nclass WaterButton {\n constructor(canvas, opts = {}) {\n this.canvas = canvas;\n this.fixed = !!opts.fixed;\n this.perClick = opts.perClick ?? 0.085;\n this.maxFill = opts.maxFill ?? 0.95;\n this.onFill = opts.onFill;\n\n this.fillTarget = opts.initialFill ?? 0;\n this.baseline = this.fillTarget;\n\n this.N = 128;\n this.h = new Float32Array(this.N);\n this.v = new Float32Array(this.N);\n this.heightScale = 0.16;\n this.encoded = new Uint8Array(this.N * 4);\n\n this.gl = canvas.getContext(\"webgl\", { antialias: true, alpha: false, premultipliedAlpha: false });\n if (!this.gl) { console.warn(\"WebGL unavailable\"); return; }\n\n this._initGL();\n this._resize();\n window.addEventListener(\"resize\", () => this._resize());\n\n this.t0 = performance.now();\n this.last = this.t0;\n this.acc = 0;\n requestAnimationFrame((t) => this._frame(t));\n }\n\n _initGL() {\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)) {\n throw new Error(gl.getProgramInfoLog(prog) || \"link failed\");\n }\n gl.useProgram(prog);\n this.prog = prog;\n\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 aPos = gl.getAttribLocation(prog, \"aPos\");\n gl.enableVertexAttribArray(aPos);\n gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);\n\n this.tex = gl.createTexture();\n gl.activeTexture(gl.TEXTURE0);\n gl.bindTexture(gl.TEXTURE_2D, this.tex);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.N, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.encoded);\n\n const u = (n) => gl.getUniformLocation(prog, n);\n this.u = {\n res: u(\"uRes\"), time: u(\"uTime\"), baseline: u(\"uBaseline\"),\n heights: u(\"uHeights\"), scale: u(\"uHeightScale\"),\n };\n gl.uniform1i(this.u.heights, 0);\n gl.uniform1f(this.u.scale, this.heightScale);\n }\n\n _resize() {\n const gl = this.gl, c = this.canvas;\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = Math.round(c.clientWidth * dpr);\n const h = Math.round(c.clientHeight * dpr);\n if (w < 2 || h < 2) return false; // layout/CSS not applied yet\n if (c.width === w && c.height === h) return true;\n c.width = w; c.height = h;\n gl.viewport(0, 0, c.width, c.height);\n return true;\n }\n\n click(px) {\n const N = this.N, v = this.v;\n const cx = (px == null) ? (0.3 + Math.random() * 0.4) : Math.min(0.92, Math.max(0.08, px));\n const dir = (px == null) ? (Math.random() < 0.5 ? -1 : 1) : (px < 0.5 ? 1 : -1);\n const tilt = 0.022 * dir; // side slosh\n const sig = 0.10;\n for (let i = 0; i < N; i++) {\n const x = i / (N - 1);\n v[i] += tilt * (x - 0.5) * 2.0;\n const dx = x - cx;\n v[i] -= 0.026 * Math.exp(-(dx * dx) / (2 * sig * sig)); // splash where clicked\n }\n if (!this.fixed) {\n this.fillTarget = Math.min(this.maxFill, this.fillTarget + this.perClick);\n for (let i = 0; i < N; i++) v[i] += 0.006; // swell while pouring\n }\n if (this.onFill) this.onFill(this.progress());\n }\n\n progress() {\n return this.fixed ? 0.5 : Math.min(1, this.fillTarget / this.maxFill);\n }\n\n _step() {\n const N = this.N, h = this.h, v = this.v;\n const c = 0.22, damp = 0.9965, s = this.heightScale;\n for (let i = 0; i < N; i++) {\n const hl = h[i > 0 ? i - 1 : 0];\n const hr = h[i < N - 1 ? i + 1 : N - 1];\n v[i] = (v[i] + c * (hl + hr - 2 * h[i])) * damp;\n }\n for (let i = 0; i < N; i++) {\n h[i] += v[i];\n if (h[i] > s) h[i] = s;\n else if (h[i] < -s) h[i] = -s;\n }\n const target = this.fixed ? 0.5 : this.fillTarget;\n this.baseline += (target - this.baseline) * 0.07;\n }\n\n _frame(t) {\n if (!this._resize()) { requestAnimationFrame((tt) => this._frame(tt)); return; }\n const dt = Math.min(t - this.last, 50);\n this.last = t;\n this.acc += dt;\n const stepMs = 1000 / 120;\n let n = 0;\n while (this.acc >= stepMs && n < 8) { this._step(); this.acc -= stepMs; n++; }\n\n const s = this.heightScale;\n for (let i = 0; i < this.N; i++) {\n let en = (this.h[i] / s) * 0.5 + 0.5;\n en = en < 0 ? 0 : en > 1 ? 1 : en;\n const b = (en * 255) | 0;\n const o = i * 4;\n this.encoded[o] = b; this.encoded[o + 1] = b; this.encoded[o + 2] = b; this.encoded[o + 3] = 255;\n }\n\n const gl = this.gl;\n gl.useProgram(this.prog);\n gl.activeTexture(gl.TEXTURE0);\n gl.bindTexture(gl.TEXTURE_2D, this.tex);\n gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.N, 1, gl.RGBA, gl.UNSIGNED_BYTE, this.encoded);\n gl.uniform2f(this.u.res, this.canvas.width, this.canvas.height);\n gl.uniform1f(this.u.time, (t - this.t0) / 1000);\n gl.uniform1f(this.u.baseline, this.baseline);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n\n requestAnimationFrame((tt) => this._frame(tt));\n }\n}\n\nfunction hookup(id, btn) {\n const el = document.getElementById(id);\n if (!el) return;\n el.addEventListener(\"pointerdown\", () => el.classList.add(\"pressed\"));\n [\"pointerup\", \"pointerleave\", \"pointercancel\"].forEach((ev) =>\n el.addEventListener(ev, () => el.classList.remove(\"pressed\"))\n );\n el.addEventListener(\"click\", (e) => {\n const r = el.getBoundingClientRect();\n btn.click((e.clientX - r.left) / r.width);\n });\n el.addEventListener(\"keydown\", (e) => {\n if (e.key === \" \" || e.key === \"Enter\") { e.preventDefault(); el.classList.add(\"pressed\"); btn.click(); }\n });\n el.addEventListener(\"keyup\", () => el.classList.remove(\"pressed\"));\n}\n\nfunction setChip(id, p) {\n const el = document.getElementById(id);\n if (el) el.textContent = Math.round(p * 100) + \"%\";\n}\n\nconst filling = new WaterButton(document.getElementById(\"c1\"), {\n initialFill: 0, perClick: 0.085, maxFill: 0.95,\n onFill: (p) => setChip(\"v1\", p),\n});\nconst half = new WaterButton(document.getElementById(\"c2\"), { initialFill: 0.5, fixed: true });\n\nhookup(\"vessel1\", filling);\nhookup(\"vessel2\", half);\nsetChip(\"v1\", 0);\n","// zozuar's raymarched waves (https://x.com/zozuar/status/1456374041359622159)\n// rendered on the face of a chunky 3D button. Clicking \"stirs\" the surface — a\n// brief speed surge — and the key mechanically depresses (handled in CSS).\n\nconst VERT = `\nattribute vec2 aPos;\nvoid main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\n`;\n\nconst FRAG = `\nprecision highp float;\nuniform vec3 iResolution;\nuniform float iTime;\n\nmat2 rot(float a){ float c = cos(a), s = sin(a); return mat2(c, s, -s, c); }\n\nvoid main(){\n float e = 0.0, f = 0.0, a = 0.0, w = 0.0;\n vec3 p = vec3(0.0), q = vec3(0.0);\n\n for (float i = 0.0; i < 50.0; i++) {\n p = q + vec3((gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y, -0.5) * e;\n q = p;\n p.yz *= rot(0.7);\n f = 0.4;\n if ((i + 1.0) >= 45.0) p -= 0.001;\n e = p.y + 7.0;\n a = 0.9;\n for (float j = 0.0; j < 30.0; j++) {\n vec2 m = vec2(1.0, 0.0) * rot(j * 0.1 + iTime * 0.05);\n float x = dot(p.xz, m) * f + iTime + iTime;\n w = exp(sin(x) - 1.0);\n p.xz -= m * w * cos(x) * a;\n e -= w * a;\n f *= 1.2;\n a *= 0.8;\n }\n }\n\n float v = clamp(1.0 - e * 0.002, 0.0, 1.0);\n vec3 col = vec3(v);\n col *= vec3(0.90, 0.98, 1.06); // faint cool tint\n col = pow(col, vec3(1.04)); // a touch more contrast\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);\n gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {\n throw new Error(gl.getShaderInfoLog(s) || \"shader compile failed\");\n }\n return s;\n}\n\nclass WaveButton {\n constructor(canvas) {\n this.canvas = canvas;\n this.gl = canvas.getContext(\"webgl\", { antialias: true, alpha: false });\n if (!this.gl) { console.warn(\"WebGL unavailable\"); return; }\n\n this._initGL();\n this._resize();\n window.addEventListener(\"resize\", () => this._resize());\n\n this.phase = 6.0; // start mid-motion, not on a flat frame\n this.speed = 1.0;\n this.last = performance.now();\n requestAnimationFrame((t) => this._frame(t));\n }\n\n _initGL() {\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)) {\n throw new Error(gl.getProgramInfoLog(prog) || \"link failed\");\n }\n gl.useProgram(prog);\n this.prog = prog;\n\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 aPos = gl.getAttribLocation(prog, \"aPos\");\n gl.enableVertexAttribArray(aPos);\n gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);\n\n this.uRes = gl.getUniformLocation(prog, \"iResolution\");\n this.uTime = gl.getUniformLocation(prog, \"iTime\");\n }\n\n _resize() {\n const gl = this.gl, c = this.canvas;\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = Math.round(c.clientWidth * dpr);\n const h = Math.round(c.clientHeight * dpr);\n if (w < 2 || h < 2) return false; // layout not ready yet\n if (c.width === w && c.height === h) return true;\n c.width = w; c.height = h;\n gl.viewport(0, 0, w, h);\n return true;\n }\n\n stir() { this.speed = Math.min(this.speed + 4.0, 7.0); }\n\n _frame(t) {\n if (!this._resize()) { requestAnimationFrame((tt) => this._frame(tt)); return; }\n const dt = Math.min((t - this.last) / 1000, 0.05);\n this.last = t;\n this.speed += (1.0 - this.speed) * Math.min(dt * 2.5, 1.0); // ease back to 1x\n this.phase += dt * this.speed;\n\n const gl = this.gl;\n gl.useProgram(this.prog);\n gl.uniform3f(this.uRes, this.canvas.width, this.canvas.height, 1.0);\n gl.uniform1f(this.uTime, this.phase);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n requestAnimationFrame((tt) => this._frame(tt));\n }\n}\n\nconst keyEl = document.getElementById(\"key\");\nconst btn = new WaveButton(document.getElementById(\"c\"));\n\nif (keyEl) {\n keyEl.addEventListener(\"pointerdown\", () => keyEl.classList.add(\"pressed\"));\n [\"pointerup\", \"pointerleave\", \"pointercancel\"].forEach((ev) =>\n keyEl.addEventListener(ev, () => keyEl.classList.remove(\"pressed\"))\n );\n keyEl.addEventListener(\"click\", () => { if (btn) btn.stir(); });\n keyEl.addEventListener(\"keydown\", (e) => {\n if (e.key === \" \" || e.key === \"Enter\") keyEl.classList.add(\"pressed\");\n });\n keyEl.addEventListener(\"keyup\", () => keyEl.classList.remove(\"pressed\"));\n}\n","createdAt",["D",1780588363927],"branchVersion","branchId","8ab8138f-10f0-4e1c-b9d2-b5a0aadca321","id","a9782f58-8968-4788-978c-11dd19085ed6","water-button",["D",1780587284590],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Glass buttons that fill with shader water on click","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",18,"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=1789570799&sig=bfafc9de3f25d020766c1a418088d2aa7a118e3408c10bafe80b0604dafaeba0","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":206,"_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":207,"_80":208,"_82":209,"_84":25},"tree",[174,177,178,179],"files",[174,175,176,177,178,179],"counts",{"_164":62,"_165":136,"_166":62,"_167":168,"_169":170},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":157,"_32":158,"_30":159,"_135":-5,"_42":43,"_41":160,"_137":123,"_39":161,"_13":62,"_34":162,"_36":-5,"_24":25,"_141":-5,"_27":163},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":123,"_39":154,"_13":62,"_34":20,"_36":155,"_24":25,"_141":-5,"_27":156},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":25,"_39":147,"_13":136,"_34":20,"_36":148,"_24":25,"_141":-5,"_27":149},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":138,"_13":62,"_34":139,"_36":140,"_24":25,"_141":-5,"_27":142},"3c0f504b-39f5-4afb-9106-a7691c1e17c4","main.ts","e96b4e84-602a-11f1-ae41-1607ee4eb77e","parentId",1,"latest",["D",1780587284607],"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",[133],"e8cdecf3-8207-42c8-96eb-c443b9d7a0a1","index.html","eff8409a-602a-11f1-b844-1607ee4eb77e",9,["D",1780588308612],"\n\n\n\n\nStir — a liquid 3D button\n\n\n\n\n\n\n\n

WebGL · raymarched waves

Stir

A chunky key with a living liquid face. Press it to stir the surface.

\n\n

\n \n

\n\n \n

\n \n\n\n",[144],"2caa0778-5144-4470-ab18-ebd11b4ce1df","README.md","2cf3a75a-602b-11f1-a59c-1607ee4eb77e",5,["D",1780587397911],"# 💧 water-button\n\nTwo chunky glass buttons filled with shader-simulated water. Raw WebGL, no libraries.\n\n- **Left vessel** starts empty and fills ~8.5% per click (caps at 95%).\n- **Right vessel** always settles back to half full.\n- Both **slosh** when clicked — a side-to-side tilt plus a localized splash.\n\nThe water surface is a 1D height-field (128 columns) integrated on the CPU each\nframe, encoded into a `1×N` texture, and handed to a fragment shader that draws\nthe body, caustics, and a bright waterline. CSS handles the chunky rounded glass.\n\n```mermaid\nflowchart LR\n Click -->|tilt + splash impulse| Sim[Height-field sim
128 cols · fixed step]\n Sim -->|encode offsets| Tex[1xN texture]\n Tex --> Shader[Fragment shader]\n Shader --> Canvas[Canvas]\n```\n\n## Files\n- `main.ts` — Hono server (serves page + assets, `/source` redirect)\n- `index.html` — markup\n- `frontend/style.css` — dark aquarium theme, glass vessels\n- `frontend/water-button.js` — WebGL sim + interaction\n",[151],"414947f2-722a-493d-9ae8-8b19aa49a5c8","frontend","21d01b35-eec3-4be1-b4d4-ad92450858ed",3,["D",1780587321777],"directory",[158],"pulls","branches","forks","envVars",{"_171":62,"_173":62},"connections",{"_171":62,"_172":62},"count","unfilledCount","emptyCount",{"_44":157,"_32":158,"_30":159,"_135":-5,"_42":43,"_41":160,"_137":123,"_39":203,"_13":62,"_34":162,"_36":-5,"_24":25,"_141":-5,"_181":204,"_27":205},{"_44":195,"_32":196,"_30":197,"_135":159,"_42":43,"_41":198,"_137":25,"_39":199,"_13":136,"_34":20,"_36":200,"_24":25,"_141":-5,"_181":201,"_27":202},{"_44":190,"_32":33,"_30":31,"_135":159,"_42":43,"_41":14,"_137":25,"_39":191,"_13":192,"_34":35,"_36":38,"_24":25,"_141":-5,"_181":193,"_27":194},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":123,"_39":187,"_13":62,"_34":20,"_36":155,"_24":25,"_141":-5,"_181":188,"_27":189},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":25,"_39":184,"_13":136,"_34":20,"_36":148,"_24":25,"_141":-5,"_181":185,"_27":186},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":180,"_13":62,"_34":139,"_36":140,"_24":25,"_141":-5,"_181":182,"_27":183},["D",1780587284607],"children",[],[133],["D",1780588308612],[],[144],["D",1780587397911],[],[151],"aabd1ae2-207c-4139-95fc-1c859892ddb0",["D",1780588363927],4,[],[158,33],"2622c9c9-2a48-47f9-92db-bc5bbd71f151","style.css","ff92c340-602a-11f1-812b-1607ee4eb77e",10,["D",1780588335204],":root{\n --bg:#070d0f;\n --bg2:#0b1518;\n --ink:#eef5f4;\n --muted:#6f8b88;\n --glow:rgba(64,224,208,.28);\n --serif:\"Fraunces\", Georgia, serif;\n --mono:\"DM Mono\", ui-monospace, monospace;\n\n --face:#0c1417;\n --edge:#0a1315;\n --edge2:#070f10;\n}\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(120% 80% at 50% 16%, var(--bg2) 0%, var(--bg) 62%);\n display:grid;\n place-items:center;\n min-height:100svh;\n overflow:hidden;\n position:relative;\n -webkit-font-smoothing:antialiased;\n}\nbody::before{\n content:\"\"; position:fixed; inset:0; z-index:0; pointer-events:none;\n background:radial-gradient(36% 38% at 50% 46%, var(--glow), transparent 70%);\n filter:blur(8px);\n}\nbody::after{\n content:\"\"; position:fixed; inset:0; z-index:0; pointer-events:none;\n opacity:.045; 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{\n position:relative; z-index:1;\n width:min(92vw, 720px);\n text-align:center;\n padding:28px 0 8px;\n}\n.kicker{\n margin:0 0 16px;\n font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted);\n opacity:0; animation:rise .8s .05s ease forwards;\n}\n.title{\n margin:0;\n font-family:var(--serif); font-weight:600;\n font-size:clamp(46px, 8.5vw, 84px); line-height:.92; letter-spacing:-.02em;\n color:#f3faf8; text-shadow:0 1px 0 rgba(0,0,0,.4);\n opacity:0; animation:rise .9s .12s ease forwards;\n}\n.subtitle{\n max-width:34ch; margin:16px auto 0;\n font-size:13px; line-height:1.5; color:var(--muted);\n opacity:0; animation:rise .9s .2s ease forwards;\n}\n\n.stage{\n margin-top:58px;\n display:flex; justify-content:center;\n perspective:1200px;\n opacity:0; animation:rise 1s .34s ease forwards;\n}\n\n.key{\n appearance:none; -webkit-appearance:none;\n font:inherit; color:inherit; padding:0;\n position:relative;\n width:min(76vw, 296px);\n aspect-ratio:5 / 6;\n border-radius:46px;\n overflow:hidden;\n cursor:pointer; user-select:none;\n -webkit-tap-highlight-color:transparent;\n background:var(--face);\n border:1px solid rgba(255,255,255,.10);\n /* extruded 3D edge (a solid \"cliff\" beneath the face) + cast shadow + glow */\n box-shadow:\n 0 2px 0 #1d2c30,\n 0 3px 0 var(--edge),\n 0 6px 0 var(--edge),\n 0 9px 0 var(--edge),\n 0 12px 0 var(--edge),\n 0 15px 0 var(--edge),\n 0 18px 0 var(--edge2),\n 0 21px 0 var(--edge2),\n 0 24px 0 #050c0d,\n 0 42px 52px -14px rgba(0,0,0,.78),\n 0 0 72px -14px var(--glow);\n transition:transform .12s cubic-bezier(.2,.85,.25,1), box-shadow .12s ease;\n}\n.key canvas{\n position:absolute; inset:0; z-index:0;\n width:100%; height:100%; display:block; border-radius:inherit;\n}\n/* glossy screen highlight over the liquid */\n.key .gloss{\n position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;\n mix-blend-mode:screen;\n background:\n linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 26%),\n radial-gradient(150% 60% at 26% -12%, rgba(255,255,255,.16), transparent 52%);\n}\n/* crisp inner bevel rim */\n.key .rim{\n position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;\n box-shadow:\n 0 1px 0 rgba(255,255,255,.26) inset,\n 0 -3px 8px rgba(0,0,0,.55) inset,\n 0 0 0 1px rgba(255,255,255,.04) inset;\n}\n.key:hover{\n box-shadow:\n 0 2px 0 #1d2c30,\n 0 3px 0 var(--edge),\n 0 6px 0 var(--edge),\n 0 9px 0 var(--edge),\n 0 12px 0 var(--edge),\n 0 15px 0 var(--edge),\n 0 18px 0 var(--edge2),\n 0 21px 0 var(--edge2),\n 0 24px 0 #050c0d,\n 0 46px 56px -14px rgba(0,0,0,.8),\n 0 0 86px -12px var(--glow);\n}\n.key:focus-visible{ outline:2px solid #7fe9dd; outline-offset:6px; }\n/* mechanical depress: travel down, collapse the cliff */\n.key.pressed{\n transform:translateY(16px);\n box-shadow:\n 0 2px 0 #1d2c30,\n 0 3px 0 var(--edge),\n 0 5px 0 var(--edge),\n 0 7px 0 #050c0d,\n 0 16px 22px -10px rgba(0,0,0,.72),\n 0 0 52px -16px var(--glow);\n}\n\n.foot{\n margin-top:48px;\n display:flex; gap:18px; justify-content:center; align-items:center;\n font-size:11px; color:var(--muted);\n opacity:0; animation:rise 1s .5s ease forwards;\n}\n.foot a{\n color:var(--muted); text-decoration:none;\n border-bottom:1px solid rgba(111,139,136,.3); padding-bottom:1px;\n transition:color .2s, border-color .2s;\n}\n.foot a:hover{ color:#7fe9dd; border-color:#7fe9dd; }\n\n@keyframes rise{\n from{ opacity:0; transform:translateY(14px); }\n to{ opacity:1; transform:translateY(0); }\n}\n\n@media (max-width:520px){\n .key{ width:74vw; border-radius:40px; }\n .foot{ flex-direction:column; gap:8px; }\n}\n",[],[158,196],["D",1780587321777],[175,176],[158],["D",1780587284590],{"_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":243,"_244":245,"_246":247,"_248":25,"_249":25,"_250":25,"_251":123,"_252":-5,"_253":-7,"_254":-7,"_255":62,"_256":25,"_257":25,"_258":-5,"_259":25,"_260":25,"_261":25,"_262":-5},"ENV",{"_214":215,"_216":217,"_218":86,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242},"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 · v11