[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_208":209,"_210":211},"routes/_app.x.$handle.$name",{"_92":91,"_31":42,"_101":82,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":75,"_76":77,"_78":79,"_80":24},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","lab.html","latestPath","fileId","ca30eae8-6033-11f1-aa96-1607ee4eb77e","name","fileType","content","\n\n\n\n\nHyperdesigns Lab — slick CSS & web tricks\n\n\n\n\n\n\n\n

\n \n\n

Hyperdesigns · Lab

Slick by default

Modern CSS & web tricks that uplevel any interface — mostly pure CSS, a little JS. Each tile names the feature it uses. Poke them.

\n\n

Magnetic buttonpointer → transform

\n \n\n

Spotlight

Cursor spotlight--mx/--my + mask

\n \n\n

3D tilt + glareperspective + rotate

\n \n\n

Beam

Animated border@property + conic

\n \n\n

Aurora

Aurora meshblurred radial keyframes

\n \n\n

DECRYPTED

Text scrambleJS glyph cycling

\n \n\n

Liquid gold

Shimmer textbackground-clip: text

\n \n\n

HOVER

REVEAL

Clip-path wipeclip-path transition

\n \n\n

SHIP IT·SLICK·FAST·SHIP IT·SLICK·FAST·

Edge-fade marqueemask-image + keyframes

\n \n\n

Shimmer skeletongradient sweep

\n \n\n

0click to count

Count-upJS eased ticker

\n \n\n

scroll ↓···↑ top

Scroll-linked baranimation-timeline: scroll()

\n \n

\n\n \n

\n \n\n\n","createdAt",["D",1780591097693],"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",{"_92":91,"_100":96},"org",{"_92":91,"_93":94,"_95":96,"_18":52,"_97":98,"_99":24},"branch",{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"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",{"_40":41,"_31":42,"_35":204,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":205,"_76":206,"_78":207,"_80":24},"tree",[168,171,172,173],"files",[168,169,170,171,172,173],"counts",{"_158":58,"_159":135,"_160":58,"_161":162,"_163":164},"contents",[124,125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_40":151,"_31":152,"_29":153,"_131":-5,"_38":39,"_37":154,"_133":119,"_35":155,"_13":58,"_32":156,"_33":-5,"_23":24,"_138":-5,"_26":157},{"_40":143,"_31":144,"_29":145,"_131":-5,"_38":39,"_37":146,"_133":119,"_35":147,"_13":148,"_32":20,"_33":149,"_23":24,"_138":-5,"_26":150},{"_40":140,"_31":27,"_29":30,"_131":-5,"_38":39,"_37":14,"_133":119,"_35":141,"_13":58,"_32":20,"_33":34,"_23":24,"_138":-5,"_26":142},{"_40":128,"_31":129,"_29":130,"_131":-5,"_38":39,"_37":132,"_133":119,"_35":134,"_13":135,"_32":136,"_33":137,"_23":24,"_138":-5,"_26":139},"1d91a69c-c5ba-458e-b227-d45d6efd0f11","main.ts","ad9b11f8-6031-11f1-ba03-1607ee4eb77e","parentId",10,"latest",["D",1780590961418],1,"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(\"/lab\", async (c) => c.html(await readFile(\"/lab.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",[129],"98a63d36-8f0d-47d7-886f-52ca540fd162",["D",1780591097693],[27],"fb9af8a8-7bce-46d8-9b8f-4e05a5efa728","index.html","b4f4ccc8-6031-11f1-b54d-1607ee4eb77e",8,["D",1780590942509],2,"\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",[144],"470e758c-1f05-4d0a-a5ce-19fb23cff14c","frontend","f6d8a45c-5f79-4e35-ad20-9c7afb76db1c",3,["D",1780590225407],"directory",[152],"pulls","branches","forks","envVars",{"_165":58,"_167":58},"connections",{"_165":58,"_166":58},"count","unfilledCount","emptyCount",{"_40":151,"_31":152,"_29":153,"_131":-5,"_38":39,"_37":154,"_133":119,"_35":201,"_13":58,"_32":156,"_33":-5,"_23":24,"_138":-5,"_175":202,"_26":203},{"_40":192,"_31":193,"_29":194,"_131":153,"_38":39,"_37":195,"_133":119,"_35":196,"_13":148,"_32":197,"_33":198,"_23":24,"_138":-5,"_175":199,"_26":200},{"_40":184,"_31":185,"_29":186,"_131":153,"_38":39,"_37":187,"_133":119,"_35":188,"_13":135,"_32":20,"_33":189,"_23":24,"_138":-5,"_175":190,"_26":191},{"_40":143,"_31":144,"_29":145,"_131":-5,"_38":39,"_37":146,"_133":119,"_35":181,"_13":148,"_32":20,"_33":149,"_23":24,"_138":-5,"_175":182,"_26":183},{"_40":140,"_31":27,"_29":30,"_131":-5,"_38":39,"_37":14,"_133":119,"_35":178,"_13":58,"_32":20,"_33":34,"_23":24,"_138":-5,"_175":179,"_26":180},{"_40":128,"_31":129,"_29":130,"_131":-5,"_38":39,"_37":132,"_133":119,"_35":174,"_13":135,"_32":136,"_33":137,"_23":24,"_138":-5,"_175":176,"_26":177},["D",1780590961418],"children",[],[129],["D",1780591097693],[],[27],["D",1780590942509],[],[144],"d2fd0033-373f-47ec-b47a-cdb7fe40c7da","style.css","c2457508-6031-11f1-998a-1607ee4eb77e",9,["D",1780590955585],":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.topnav{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 26px; }\n.np-brand{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }\n.np-links{ display:flex; gap:8px; }\n.np-links a{ font-size:12.5px; color:var(--muted); text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid transparent; transition:.2s; }\n.np-links a:hover{ color:var(--ink); }\n.np-links a.on{ color:var(--accent); border-color:rgba(127,233,221,.3); background:rgba(127,233,221,.06); }\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",[],[152,185],"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",[],[152,193],["D",1780590225407],[169,170],[152],["D",1780590190719],{"_92":91,"_100":96},{"_92":91,"_93":94,"_95":96,"_18":52,"_97":98,"_99":24},{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"ctx",{"_74":-5,"_121":241,"_242":243,"_244":245,"_246":24,"_247":24,"_248":24,"_249":119,"_250":-5,"_251":-7,"_252":-7,"_253":58,"_254":24,"_255":24,"_256":-5,"_257":24,"_258":24,"_259":24,"_260":-5},"ENV",{"_212":213,"_214":215,"_216":82,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240},"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