lostpage 0.0.0-stage → 0.2.0

package/dist/scenes/foggy-glass.js

@@ -0,0 +1 @@
+import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{rgba}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var foggy_glass_default={id:"foggy-glass",name:"Foggy Glass",description:"Someone wrote the error with a finger on a steamed-up window. Wipe the glass with your cursor and watch it fog back over.",category:"Nature",kind:"2d",motion:"interactive",tags:["canvas","fog","window","wipe","interactive","cozy","winter"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Wipe the glass",title:"Can't see the page from here.",message:"Drag across the window to clear it. It'll mist up again, and the page still won't be out there.",actions:[{label:"Step back inside",href:"/",variant:"primary"}]},params:{view:"city",fog:"#c9d3dc",regrow:6},theme:{bg:"#7d8b99",fg:"#13202b",accent:"#13202b","accent-fg":"#eef3f7"},presetName:"City Night",presets:{rain:{name:"Rainy Night",params:{view:"city",fog:"#9fb0c2",regrow:3}},forest:{name:"Snowy Forest",eyebrow:"Cold outside",title:"It's freezing, and the page is gone.",params:{view:"forest",fog:"#e6edf2"},theme:{bg:"#c8d4dc",fg:"#14212a",accent:"#14212a","accent-fg":"#fff"}},sunset:{name:"Sunset Drive",params:{view:"sunset",fog:"#f1d9c9"},theme:{bg:"#e8b8a0",fg:"#2c140a",accent:"#2c140a","accent-fg":"#fff"}}},css:"& .lp-body{text-shadow:0 1px 12px rgba(255,255,255,.45)}",setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,view,blurred,mask,mg,writing,fogLayer,drips=[],sc=1,mk=(w,h)=>{let cv=document.createElement("canvas");return cv.width=Math.max(1,Math.round(w)),cv.height=Math.max(1,Math.round(h)),cv};function drawView(){let w=c.w,h=c.h;sc=Math.min(2,ctx.dpr),view=mk(w*sc,h*sc);let g=view.getContext("2d");if(g.scale(sc,sc),p.view==="city"){let sky=g.createLinearGradient(0,0,0,h);sky.addColorStop(0,"#0b1430"),sky.addColorStop(1,"#2b2140"),g.fillStyle=sky,g.fillRect(0,0,w,h);for(let x=0;x<w;){let bw=40+rnd()*90,bh=h*(.25+rnd()*.45);g.fillStyle="#0a0c18",g.fillRect(x,h-bh,bw,bh);for(let wy=h-bh+10;wy<h-10;wy+=14)for(let wx=x+6;wx<x+bw-8;wx+=12)rnd()>.55&&(g.fillStyle=["#ffcf7a","#ffe9b8","#9fd1ff","#ff9f6b"][Math.floor(rnd()*4)],g.fillRect(wx,wy,6,8));x+=bw+4}for(let i=0;i<40;i++){let x=rnd()*w,y=h*(.7+rnd()*.3),r=6+rnd()*16,grd=g.createRadialGradient(x,y,0,x,y,r),col=["#ffb347","#ff4d4d","#ffffff","#7fc8ff"][Math.floor(rnd()*4)];grd.addColorStop(0,col),grd.addColorStop(1,rgba(col,0)),g.fillStyle=grd,g.fillRect(x-r,y-r,r*2,r*2)}}else if(p.view==="forest"){let sky=g.createLinearGradient(0,0,0,h);sky.addColorStop(0,"#9fb4c8"),sky.addColorStop(1,"#e8eef3"),g.fillStyle=sky,g.fillRect(0,0,w,h);for(let layer=0;layer<3;layer++){let shade=["#7e93a6","#4f6577","#25384a"][layer];for(let i=0;i<24+layer*8;i++){let x=rnd()*w,th=h*(.25+layer*.12+rnd()*.15),base=h*(.72+layer*.1);g.fillStyle=shade,g.beginPath(),g.moveTo(x,base-th),g.lineTo(x-th*.22,base),g.lineTo(x+th*.22,base),g.closePath(),g.fill(),g.fillStyle="rgba(255,255,255,.55)",g.beginPath(),g.moveTo(x,base-th),g.lineTo(x-th*.06,base-th*.7),g.lineTo(x+th*.06,base-th*.7),g.fill()}}g.fillStyle="#f4f7f9",g.fillRect(0,h*.9,w,h*.1)}else{let sky=g.createLinearGradient(0,0,0,h);sky.addColorStop(0,"#3a2a6b"),sky.addColorStop(.55,"#ff7a59"),sky.addColorStop(1,"#ffd6a0"),g.fillStyle=sky,g.fillRect(0,0,w,h),g.fillStyle="#fff1c9",g.beginPath(),g.arc(w*.62,h*.62,Math.min(w,h)*.12,0,Math.PI*2),g.fill(),g.fillStyle="#2a1838",g.beginPath(),g.moveTo(0,h);for(let x=0;x<=w;x+=20)g.lineTo(x,h*.72-Math.sin(x*.006)*h*.06-Math.sin(x*.017)*h*.03);g.lineTo(w,h),g.fill()}blurred=mk(view.width,view.height);let bg=blurred.getContext("2d");bg.filter=`blur(${18*sc}px) saturate(.8)`,bg.drawImage(view,0,0),bg.filter="none",bg.fillStyle=rgba(p.fog,.55),bg.fillRect(0,0,blurred.width,blurred.height);for(let i=0;i<blurred.width*blurred.height/260;i++){bg.fillStyle=`rgba(255,255,255,${rnd()*.18})`;let r=(.5+rnd()*1.6)*sc;bg.beginPath(),bg.arc(rnd()*blurred.width,rnd()*blurred.height,r,0,Math.PI*2),bg.fill()}mask=mk(view.width,view.height),mg=mask.getContext("2d"),fogLayer=mk(view.width,view.height),writing=mk(view.width,view.height);let wg=writing.getContext("2d");wg.scale(sc,sc);let code=ctx.copy.code||"404",size=Math.min(w*.24,h*.34);wg.font=`400 ${size}px "Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive`,wg.textAlign="center",wg.textBaseline="middle",wg.lineJoin="round",wg.lineCap="round",wg.strokeStyle="#000";for(let k=0;k<3;k++)wg.lineWidth=size*(.07+k*.01),wg.save(),wg.translate((rnd()-.5)*3,(rnd()-.5)*3),wg.strokeText(code,w/2,h*.37),wg.restore();drips=[];for(let i=0;i<14;i++)drips.push({x:w/2+(rnd()-.5)*size*code.length*.5,y:h*.37+size*.3,v:0,len:0})}drawView();let last=null,wipe=(x,y)=>{mg.save(),mg.scale(sc,sc),mg.globalCompositeOperation="source-over",mg.strokeStyle="#000",mg.fillStyle="#000",mg.lineCap="round",mg.lineWidth=Math.max(40,c.w*.05),mg.filter=`blur(${6*sc}px)`,mg.beginPath(),last?(mg.moveTo(last.x,last.y),mg.lineTo(x,y),mg.stroke()):(mg.arc(x,y,mg.lineWidth/2,0,Math.PI*2),mg.fill()),mg.filter="none",mg.restore(),last={x,y}};return ctx.on("pointermove",e=>{(e.pointerType==="mouse"||e.buttons)&&(wipe(ctx.pointer.x,ctx.pointer.y),Math.random()<.06&&drips.push({x:ctx.pointer.x,y:ctx.pointer.y+Math.max(20,c.w*.025),v:0,len:0}))}),ctx.on("pointerleave",()=>last=null),{resize(){c.reset(),drawView()},frame(t,dt){let g=c.g;c.reset(),dt>0&&(mg.globalCompositeOperation="destination-out",mg.fillStyle=`rgba(0,0,0,${Math.min(1,dt/p.regrow)*1.6})`,mg.fillRect(0,0,mask.width,mask.height),mg.globalCompositeOperation="source-over");let dg=writing.getContext("2d");for(let d of drips){if(d.len>c.h*.3||dt===0)continue;d.v=Math.min(60,d.v+(Math.random()<.02?40:2)*dt*10);let ny=d.y+d.v*dt;dg.save(),dg.scale(sc,sc),dg.strokeStyle="#000",dg.lineWidth=3,dg.lineCap="round",dg.beginPath(),dg.moveTo(d.x,d.y),d.x+=(Math.random()-.5)*.6,dg.lineTo(d.x,ny),dg.stroke(),dg.restore(),d.len+=ny-d.y,d.y=ny}g.drawImage(view,0,0,c.w,c.h);let fg=fogLayer.getContext("2d");fg.globalCompositeOperation="source-over",fg.clearRect(0,0,fogLayer.width,fogLayer.height),fg.drawImage(blurred,0,0),fg.globalCompositeOperation="destination-out",fg.drawImage(mask,0,0),fg.drawImage(writing,0,0),g.drawImage(fogLayer,0,0,c.w,c.h)}}}};export{foggy_glass_default as default};

package/dist/scenes/gears.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    metal: string;
+    metal2: string;
+    bg: string;
+    accent: string;
+    /** Seconds between jams. */
+    jam: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/gears.js

@@ -0,0 +1,5 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";function gearPath(n,r,depth,hole){let pts=[],step=Math.PI*2/n;for(let i=0;i<n;i++){let a=i*step,k=[[a-step*.3,r-depth],[a-step*.18,r],[a+step*.18,r],[a+step*.3,r-depth]];for(let[ang,rad]of k)pts.push(`${(Math.cos(ang)*rad).toFixed(2)},${(Math.sin(ang)*rad).toFixed(2)}`)}let holePath=`M${hole},0 A${hole},${hole} 0 1,0 ${-hole},0 A${hole},${hole} 0 1,0 ${hole},0Z`;return`M${pts.join("L")}Z ${holePath}`}var gears_default={id:"gears",name:"Broken Machine",description:"The machinery behind this page has jammed. The gears turn, grind, shudder and try again. The 0 is a gear too.",category:"Playful",kind:"2d",motion:"live",tags:["svg","gears","mechanical","industrial","maintenance","light"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Mechanical failure",title:"Something jammed in the works.",message:"Our engineers are oiling the gears. The page you asked for won't be produced today.",actions:[{label:"Back to working pages",href:"/",variant:"primary"}]},params:{metal:"#2b2f36",metal2:"#8b939e",bg:"#ecebe6",accent:"#ff5a1f",jam:6},theme:{bg:"#ecebe6",fg:"#1c1f24",accent:"#1c1f24","accent-fg":"#fff"},presetName:"Workshop",presets:{copper:{name:"Copper",params:{metal:"#7a3a1a",metal2:"#e8875a",bg:"#f6ece3",accent:"#1a6b5a"},theme:{bg:"#f6ece3",fg:"#2a1206",accent:"#2a1206","accent-fg":"#fff"}},neon:{name:"Neon Machine",params:{metal:"#3bd6ff",metal2:"#1a4a6b",bg:"#020a12",accent:"#ff3bd4"},theme:{bg:"#020a12",fg:"#e6f9ff",accent:"#3bd6ff","accent-fg":"#020a12"}},brass:{name:"Steampunk",params:{metal:"#8a5a22",metal2:"#d9a85b",bg:"#1c140c",accent:"#ffb347"},theme:{bg:"#1c140c",fg:"#f3e2c4",accent:"#d9a85b","accent-fg":"#1c140c"}},blueprint:{name:"Blueprint",params:{metal:"#e9f1ff",metal2:"#9cc0ff",bg:"#1b4f9c",accent:"#ffffff"},theme:{bg:"#1b4f9c",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1b4f9c"}}},css:`
+& .gr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:22cqh}
+& .gr svg{width:min(980px,94cqw);height:auto;overflow:visible}
+& .gr .grid{opacity:.07}
+`,setup(ctx){let p=ctx.params,code=ctx.copy.code||"404",wrap=document.createElement("div");wrap.className="gr",wrap.setAttribute("aria-hidden","true");let chars=[...code],W=1e3,cw=W/chars.length,big=(cx,r,id)=>`<g transform="translate(${cx} 260)"><g data-gear="${id}"><path d="${gearPath(14,r,r*.16,r*.42)}" fill="${p.metal}" fill-rule="evenodd"/><circle r="${r*.62}" fill="none" stroke="${p.metal2}" stroke-width="6" opacity=".6"/>${Array.from({length:6},(_,i)=>`<rect x="${r*.44}" y="-6" width="${r*.16}" height="12" transform="rotate(${i*60})" fill="${p.metal2}" opacity=".7"/>`).join("")}</g><circle r="${r*.12}" fill="${p.accent}"/></g>`,small=(x,y,r,n,id,col)=>`<g transform="translate(${x} ${y})"><g data-gear="${id}" data-n="${n}"><path d="${gearPath(n,r,r*.22,r*.3)}" fill="${col}" fill-rule="evenodd"/></g></g>`,svg=`<svg viewBox="0 0 ${W} 520"><defs><pattern id="gp" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0V40" fill="none" stroke="${p.metal}" stroke-width="1"/></pattern></defs><rect class="grid" x="-200" y="-100" width="${W+400}" height="720" fill="url(#gp)"/>`;svg+=small(cw*.95,110,70,12,"s1",p.metal2),svg+=small(cw*2.05,420,60,10,"s2",p.metal2),svg+=small(cw*1.5,470,34,8,"s3",p.metal),chars.forEach((ch,i)=>{let cx=cw*(i+.5);/[0oO]/.test(ch)?svg+=big(cx,190,`b${i}`):svg+=`<text x="${cx}" y="400" text-anchor="middle" font-family="Inter,Arial Black,sans-serif" font-weight="900" font-size="380" fill="${p.metal}" letter-spacing="-10">${ch.replace(/[<&]/g,"")}</text>`}),svg+="<g data-spark></g></svg>",wrap.innerHTML=svg,ctx.stage.append(wrap);let gears=[...wrap.querySelectorAll("[data-gear]")],spark=wrap.querySelector("[data-spark]"),angle=0,jamUntil=-1,nextJam=p.jam;return{frame(t,dt){let jammed=t<jamUntil;!jammed&&t>nextJam&&!ctx.reducedMotion&&(jamUntil=t+1.4,nextJam=t+p.jam+Math.random()*3),angle+=(jammed?0:28)*dt;let shudder=jammed?Math.sin(t*70)*2.2:0;gears.forEach((g,i)=>{let dir=i%2?-1:1,n=Number(g.dataset.n??14);g.setAttribute("transform",`rotate(${angle*dir*14/n+shudder})`)}),spark.innerHTML=jammed?Array.from({length:7},()=>{let x=470+(Math.random()-.5)*120,y=190+(Math.random()-.5)*80;return`<line x1="${x}" y1="${y}" x2="${x+(Math.random()-.5)*40}" y2="${y-Math.random()*40}" stroke="${p.accent}" stroke-width="3" stroke-linecap="round"/>`}).join(""):""},destroy(){wrap.remove()}}}};export{gears_default as default};

package/dist/scenes/glass-404.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    c1: string;
+    c2: string;
+    c3: string;
+    bgTop: string;
+    bgBottom: string;
+    dispersion: number;
+    depth: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/glass-404.js

@@ -0,0 +1 @@
+import{text3dScene}from"../chunks/chunk-6HZC24J2.js";import"../chunks/chunk-SH72TE6I.js";import"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var glass_404_default={id:"glass-404",name:"Prism Glass",description:"Thick refractive glass numerals with real dispersion, bending a field of slow colour behind them.",category:"Typography",kind:"3d",motion:"live",tags:["webgl","raymarching","glass","refraction","dispersion","gradient","light"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Error 404",title:"Crystal clear: it's not here.",message:"We looked straight through this page. There's nothing behind the glass.",actions:[{label:"Back to home",href:"/",variant:"primary"}]},params:{c1:"#7b5cff",c2:"#ff6ec7",c3:"#36d6ff",bgTop:"#f6f4ff",bgBottom:"#d9d4f5",dispersion:1.2,depth:.28},theme:{bg:"#ebe8fb",fg:"#14112a",accent:"#14112a","accent-fg":"#ffffff"},presetName:"Iris",presets:{forest:{name:"Forest Glass",params:{c1:"#1f9d55",c2:"#a3e635",c3:"#0ea5a3",bgTop:"#06140d",bgBottom:"#0b2a1a"},theme:{bg:"#07170f",fg:"#eafff2",accent:"#a3e635","accent-fg":"#07170f"}},ocean:{name:"Deep Ocean",params:{c1:"#2563eb",c2:"#06b6d4",c3:"#1e3a8a",bgTop:"#020617",bgBottom:"#0b1a3a"},theme:{bg:"#030b1f",fg:"#e6f4ff",accent:"#67e8f9","accent-fg":"#030b1f"}},lava:{name:"Molten",params:{c1:"#ff4d00",c2:"#ffb000",c3:"#ff1f5a",bgTop:"#0a0302",bgBottom:"#1f0703",dispersion:1.6},theme:{bg:"#120402",fg:"#fff0e6",accent:"#ffb000","accent-fg":"#120402"}},lavender:{name:"Lavender",params:{c1:"#a78bfa",c2:"#f0abfc",c3:"#93c5fd",bgTop:"#faf5ff",bgBottom:"#e9defa"},theme:{bg:"#f1eafc",fg:"#2a1a47",accent:"#2a1a47","accent-fg":"#fff"}},neon:{name:"Neon Night",params:{c1:"#ff00e6",c2:"#00f0ff",c3:"#7a00ff",bgTop:"#05000a",bgBottom:"#12001f",dispersion:1.8},theme:{bg:"#08000f",fg:"#fbe6ff",accent:"#00f0ff","accent-fg":"#08000f"}},aurora:{name:"Aurora",params:{c1:"#22e3a1",c2:"#3a7bff",c3:"#b25cff",bgTop:"#050a18",bgBottom:"#0b1030"},theme:{bg:"#070c1f",fg:"#eef2ff",accent:"#e9fff6","accent-fg":"#04140e"}},sunset:{name:"Sunset",params:{c1:"#ff7a3d",c2:"#ff3d77",c3:"#ffd23d",bgTop:"#fff4ea",bgBottom:"#ffd9c4"},theme:{bg:"#ffe8da",fg:"#2a1208",accent:"#2a1208","accent-fg":"#fff"}},ice:{name:"Ice",title:"Frozen solid. Page not found.",params:{c1:"#9ad8ff",c2:"#d7f1ff",c3:"#5aa9ff",bgTop:"#f4fbff",bgBottom:"#cfe6f7",dispersion:.6,depth:.34},theme:{bg:"#e3f2fc",fg:"#0b2233",accent:"#0b2233","accent-fg":"#fff"}},mono:{name:"Monochrome",params:{c1:"#111111",c2:"#555555",c3:"#999999",bgTop:"#fafafa",bgBottom:"#dcdcdc",dispersion:1.6},theme:{bg:"#ededed",fg:"#0a0a0a",accent:"#0a0a0a","accent-fg":"#fff"}},candy:{name:"Candy",params:{c1:"#ff4fa3",c2:"#ffb13b",c3:"#4fd1ff",bgTop:"#fff0f7",bgBottom:"#ffd6ea"},theme:{bg:"#ffe5f1",fg:"#2b0a1b",accent:"#ff3d95","accent-fg":"#fff"}}},setup(ctx){let p=ctx.params;return text3dScene(ctx,{material:"glass",colors:{a:p.c1,b:p.c2,c:p.c3,bg0:p.bgTop,bg1:p.bgBottom,light:"#ffffff"},depth:p.depth,round:.07,spin:.3,dispersion:p.dispersion,envSpeed:.05,y:.1})}};export{glass_404_default as default};

package/dist/scenes/glitch.d.ts

@@ -0,0 +1,15 @@
+interface Params {
+    bg: string;
+    ink: string;
+    a: string;
+    b: string;
+    /** Glitch intensity 0..2 */
+    intensity: number;
+    /** Pointer proximity amplifies the glitch. */
+    reactive: boolean;
+    scanlines: number;
+    grid: boolean;
+    weight: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/glitch.js

@@ -0,0 +1,60 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,NOISE,POST,texture}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import{SANS,drawFittedText}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uBg, uInk, uA, uB;
+uniform float uAmt, uScan, uGrid, uBurst, uLight;
+${HASH}
+${NOISE}
+${POST}
+
+float textAt(vec2 uv) { return texture(uText, uv).a; }
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  float t = uTime;
+  // bursts: mostly calm, then violent for a few frames
+  float slot = floor(t * 7.0);
+  float burst = step(0.82, hash11(slot)) + uBurst;
+  float amt = uAmt * (0.25 + burst * 1.4);
+
+  // horizontal slice displacement
+  float rows = 18.0 + 40.0 * hash11(slot + 3.0);
+  float row = floor(uv.y * rows);
+  float shift = (hash12(vec2(row, slot)) - 0.5) * 0.08 * amt * step(0.55, hash12(vec2(row * 1.3, slot + 1.0)));
+  // block displacement
+  vec2 bid = floor(uv * vec2(12.0, 24.0));
+  float bh = hash12(bid + slot * 7.1);
+  vec2 boff = (bh > 0.93 ? (hash22(bid + slot) - 0.5) * vec2(0.12, 0.02) : vec2(0.0)) * amt;
+  vec2 q = uv + vec2(shift, 0.0) + boff;
+
+  float split = 0.004 + 0.012 * amt;
+  float r = textAt(q + vec2(split, 0.0));
+  float g = textAt(q);
+  float b = textAt(q - vec2(split, 0.0));
+
+  vec3 col = uBg;
+  // background grid
+  if (uGrid > 0.5) {
+    vec2 gp = fc / 32.0;
+    float gl = smoothstep(0.47, 0.5, max(abs(fract(gp.x) - 0.5), abs(fract(gp.y) - 0.5)));
+    col = mix(col, uInk, gl * 0.06);
+  }
+  // channel-separated text: a and b fringes, ink core
+  if (uLight > 0.5) {
+    col = mix(col, uA, max(r - g, 0.0));
+    col = mix(col, uB, max(b - g, 0.0));
+    col = mix(col, uInk, g);
+  } else {
+    col += uA * max(r - g * 0.6, 0.0) + uB * max(b - g * 0.6, 0.0);
+    col = mix(col, uInk, g * 0.92);
+  }
+  // corrupted line artefacts
+  float lineN = hash12(vec2(floor(fc.y / 2.0), slot));
+  col = mix(col, uA, step(0.996 - 0.01 * amt, lineN) * 0.6);
+  // scanlines and noise
+  col *= 1.0 - uScan * 0.18 * step(0.5, fract(fc.y / 3.0));
+  col = toSRGB(clamp(col, 0.0, 1.0));
+  col += (hash12(fc + fract(t) * 100.0) - 0.5) * 0.05 * (0.5 + amt);
+  fragColor = vec4(col, 1.0);
+}
+`,glitch_default={id:"glitch",name:"Signal Corruption",description:"The numerals tear, shift and split into colour channels in short violent bursts. Hover close and it gets worse.",category:"Typography",kind:"2d",motion:"live",tags:["webgl","glitch","rgb-split","cyberpunk","typography","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"ERR_PAGE_CORRUPTED",title:"Something broke in transmission.",message:"The page you requested got scrambled on the way here. A fresh copy lives on the homepage.",actions:[{label:"Reload home",href:"/",variant:"primary"},{label:"Report the glitch",href:"/contact",variant:"secondary"}]},params:{bg:"#06060a",ink:"#f4f4f6",a:"#ff1f6d",b:"#1ff4ff",intensity:1,reactive:!0,scanlines:1,grid:!0,weight:900},theme:{bg:"#06060a",accent:"#f4f4f6","accent-fg":"#06060a","font-display":"var(--lp-font-mono)","title-weight":"600"},presetName:"Cyber",presets:{sunset:{name:"Sunset",params:{bg:"#1a0b1f",ink:"#ffe6cc",a:"#ff5a36",b:"#b026ff"},theme:{bg:"#1a0b1f",fg:"#ffe6cc",accent:"#ffe6cc","accent-fg":"#1a0b1f"}},ice:{name:"Ice",params:{bg:"#eaf6ff",ink:"#0b2a40",a:"#00b3ff",b:"#7a5cff",scanlines:.4},theme:{bg:"#eaf6ff",fg:"#0b2a40",accent:"#0b2a40","accent-fg":"#eaf6ff"}},blood:{name:"Corrupted",eyebrow:"FATAL_CORRUPTION",params:{bg:"#0a0000",ink:"#ff2a2a",a:"#ffffff",b:"#5a0000",intensity:1.6},theme:{bg:"#0a0000",fg:"#ffd6d6",accent:"#ff2a2a","accent-fg":"#0a0000"}},blueprint:{name:"Blueprint",params:{bg:"#123e7a",ink:"#ffffff",a:"#7fd3ff",b:"#ffe14d",grid:!0},theme:{bg:"#123e7a",fg:"#ffffff",accent:"#ffffff","accent-fg":"#123e7a"}},vapor:{name:"Vaporwave",params:{bg:"#ffd6f0",ink:"#2a1b5c",a:"#ff4fd8",b:"#3bd0ff",grid:!0},theme:{bg:"#ffd6f0",fg:"#2a1b5c",accent:"#2a1b5c","accent-fg":"#ffd6f0"}},print:{name:"Misprint",eyebrow:"Misregistration",title:"Printed off the edge of the page.",params:{bg:"#f5f2ea",ink:"#141414",a:"#ff3b30",b:"#0a84ff",scanlines:0,grid:!1},theme:{bg:"#f5f2ea",fg:"#141414",accent:"#141414","accent-fg":"#f5f2ea","font-display":"var(--lp-font)"}},toxic:{name:"Toxic",params:{bg:"#050a02",ink:"#d7ff3b",a:"#3bff7a",b:"#ff3bd7",intensity:1.4},theme:{bg:"#050a02",fg:"#efffc2",accent:"#d7ff3b","accent-fg":"#050a02"}},mono:{name:"Monochrome",params:{bg:"#000000",ink:"#ffffff",a:"#8a8a8a",b:"#4a4a4a",grid:!1},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},calm:{name:"Subtle",params:{intensity:.35,reactive:!0,scanlines:.4,bg:"#0b0d12",a:"#7c5cff",b:"#2bd4ff"}}},setup(ctx){let p=ctx.params,cv=document.createElement("canvas"),tex=null,glRef,light=parseInt(p.bg.replace("#","").slice(0,2),16)>140,draw=()=>{let w=Math.max(2,Math.round(ctx.width*Math.min(ctx.dpr,2))),h=Math.max(2,Math.round(ctx.height*Math.min(ctx.dpr,2)));cv.width=w,cv.height=h;let g=cv.getContext("2d");g.clearRect(0,0,w,h),g.save(),g.translate(0,h*.36-h*.25),drawFittedText(g,ctx.copy.code||"404",{width:w,height:h*.5,font:SANS,weight:p.weight,fit:.84,tracking:-.03}),g.restore(),tex&&(glRef.bindTexture(glRef.TEXTURE_2D,tex),glRef.pixelStorei(glRef.UNPACK_FLIP_Y_WEBGL,!0),glRef.texImage2D(glRef.TEXTURE_2D,0,glRef.RGBA,glRef.RGBA,glRef.UNSIGNED_BYTE,cv),glRef.pixelStorei(glRef.UNPACK_FLIP_Y_WEBGL,!1))},near=0;return{...shaderScene(ctx,{frag:FRAG,adaptive:!1,init(gl){glRef=gl,draw(),tex=texture(gl,cv,{filter:"linear"})},uniforms:(_t,dt)=>{let target=p.reactive&&ctx.pointer.inside?Math.max(0,1-Math.hypot(ctx.pointer.nx,(ctx.pointer.ny-.28)*1.6)):0;return near+=(target-near)*Math.min(1,dt*6),{uText:tex,uBg:linear(p.bg),uInk:linear(p.ink),uA:linear(p.a),uB:linear(p.b),uAmt:p.intensity,uScan:p.scanlines,uGrid:p.grid?1:0,uBurst:near*.9,uLight:light?1:0}}}),resize(){draw()}}}};export{glitch_default as default};

package/dist/scenes/gradient-404.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    from: string;
+    via: string;
+    to: string;
+    /** Soft colour glow behind the number. */
+    glow: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/gradient-404.js

@@ -0,0 +1,6 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var gradient_404_default={id:"gradient-404",name:"Gradient",description:"The modern SaaS 404: a heavy gradient-filled number with a soft glow, a short headline and a pill button.",category:"Simple",kind:"2d",motion:"static",tags:["simple","gradient","saas","startup","static","fast","modern"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"The link may be broken, or the page may have been removed.",actions:[{label:"Take me home",href:"/"},{label:"Help center",href:"/help",variant:"secondary"}]},params:{from:"#6366f1",via:"#a855f7",to:"#ec4899",glow:!0},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#0f172a","accent-fg":"#ffffff","code-size":"clamp(110px,24cqw,260px)","code-weight":"800"},presetName:"Violet",presets:{night:{name:"Night",params:{from:"#22d3ee",via:"#6366f1",to:"#d946ef"},theme:{bg:"#070a13",fg:"#e2e8f0",accent:"#e2e8f0","accent-fg":"#070a13"}},sunset:{name:"Sunset",params:{from:"#f59e0b",via:"#ef4444",to:"#db2777"},theme:{bg:"#fffaf5",fg:"#2a1406",accent:"#2a1406","accent-fg":"#fffaf5"}},mint:{name:"Mint",params:{from:"#10b981",via:"#06b6d4",to:"#3b82f6",glow:!1},theme:{bg:"#f8fafc",fg:"#0f172a",accent:"#0f172a","accent-fg":"#fff"}}},css:`
+& .lp-code{background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.06em;line-height:.95;padding:0 .04em}
+& .gr-glow{position:absolute;left:50%;top:38%;width:min(70cqw,760px);aspect-ratio:2/1;translate:-50% -50%;filter:blur(70px);opacity:.28;
+  background:radial-gradient(closest-side,var(--g1),transparent),radial-gradient(closest-side at 70% 50%,var(--g3),transparent)}
+& .lp-title{font-weight:700;font-size:clamp(24px,3.6cqw,44px)}
+`,setup(ctx){let p=ctx.params;if(ctx.root.style.setProperty("--g1",p.from),ctx.root.style.setProperty("--g2",p.via),ctx.root.style.setProperty("--g3",p.to),!p.glow)return;let glow=document.createElement("div");return glow.className="gr-glow",ctx.stage.append(glow),{destroy:()=>glow.remove()}}};export{gradient_404_default as default};

package/dist/scenes/halftone.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    paper: string;
+    ink1: string;
+    ink2: string;
+    /** Dot cell size in px. */
+    cell: number;
+    /** Misregistration between the two inks. */
+    offset: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/halftone.js

@@ -0,0 +1,43 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,NOISE,POST,texture}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import{SANS,drawFittedText}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uPaper, uInk1, uInk2;
+uniform float uCell, uOffset;
+${HASH}
+${NOISE}
+${POST}
+float tone(vec2 uv, vec2 p, float t) {
+  // soft blobs plus the code
+  float a = textureLod(uText, uv, 1.5).a;
+  float b = 0.5 + 0.5 * sin(p.x * 3.0 + t * 0.4) * cos(p.y * 2.5 - t * 0.3);
+  return clamp(a * 0.9 + b * 0.25 + fbm(p * 2.0 + t * 0.05) * 0.2, 0.0, 1.0);
+}
+float dots(vec2 fc, float angle, float tv, float cell) {
+  float c = cos(angle), s = sin(angle);
+  vec2 q = mat2(c, -s, s, c) * fc / cell;
+  vec2 f = fract(q) - 0.5;
+  float r = sqrt(tv) * 0.62;
+  float d = length(f);
+  float w = fwidth(d);
+  return 1.0 - smoothstep(r - w, r + w, d);
+}
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime;
+  // the pointer works like a loupe: bigger dots under it
+  vec2 m = (uMouse * 0.5 + 0.5) * uRes;
+  float loupe = smoothstep(220.0, 0.0, length(fc - m)) * step(0.001, length(uMouse));
+  float cell = uCell * (1.0 + loupe * 1.6);
+  float t1 = tone(uv, p, t);
+  float t2 = tone(uv + vec2(0.02, -0.01), p + 0.3, t * 0.8) * 0.85;
+  vec3 col = uPaper;
+  float d2 = dots(fc + vec2(uOffset, -uOffset), 0.26, t2 * 0.8, cell);
+  float d1 = dots(fc, 0.785, t1, cell);
+  // multiply the inks like a riso print
+  col *= mix(vec3(1.0), uInk2, d2);
+  col *= mix(vec3(1.0), uInk1, d1);
+  col *= 0.97 + 0.03 * hash12(floor(fc * 0.5));
+  fragColor = vec4(toSRGB(col), 1.0);
+}
+`,halftone_default={id:"halftone",name:"Risograph",description:"Two-colour halftone print, slightly misregistered like a risograph. The dots swell and shrink, and a loupe follows your cursor.",category:"Paper & Print",kind:"2d",motion:"live",tags:["webgl","halftone","riso","print","editorial","light","graphic"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Misprint",title:"This page didn't make it to press.",message:"The plates were inked, the paper loaded, and then nothing came out. The homepage is in stock.",actions:[{label:"Back to the shop",href:"/",variant:"primary"}]},params:{paper:"#f6f1e7",ink1:"#ff4f8b",ink2:"#2a6bff",cell:9,offset:3},theme:{bg:"#f6f1e7",fg:"#1a1a2e",accent:"#1a1a2e","accent-fg":"#fff"},presetName:"Pink & Blue",presets:{citrus:{name:"Yellow & Green",params:{ink1:"#00a95c",ink2:"#ffe800"},theme:{fg:"#0a2a1a",accent:"#0a2a1a"}},sunset:{name:"Orange & Purple",params:{ink1:"#7a3dff",ink2:"#ff6c2f"},theme:{fg:"#24103f",accent:"#24103f"}},mono:{name:"Black Only",params:{ink1:"#1a1a1a",ink2:"#ffffff",cell:7},theme:{fg:"#111",accent:"#111"}},news:{name:"Newsprint",params:{paper:"#e8e2d4",ink1:"#2a2a2a",ink2:"#c1121f",cell:6,offset:2},theme:{bg:"#e8e2d4",fg:"#1a1a1a",accent:"#c1121f"}}},setup(ctx){let p=ctx.params,cv=document.createElement("canvas"),tex=null,gl,draw=()=>{cv.width=512,cv.height=Math.max(64,Math.round(512*ctx.height/Math.max(1,ctx.width)));let g=cv.getContext("2d");g.clearRect(0,0,cv.width,cv.height),g.save(),g.translate(0,cv.height*.38-cv.height*.24),drawFittedText(g,ctx.copy.code||"404",{width:cv.width,height:cv.height*.48,font:SANS,weight:900,fit:.86}),g.restore(),tex&&(gl.bindTexture(gl.TEXTURE_2D,tex),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,!0),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,cv),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,!1),gl.generateMipmap(gl.TEXTURE_2D))};return{...shaderScene(ctx,{frag:FRAG,adaptive:!1,init(g){gl=g,draw(),tex=texture(gl,cv,{filter:"mipmap"})},uniforms:()=>({uText:tex,uPaper:linear(p.paper),uInk1:linear(p.ink1),uInk2:linear(p.ink2),uCell:p.cell*Math.min(2,ctx.dpr),uOffset:p.offset*Math.min(2,ctx.dpr)})}),resize:draw}}};export{halftone_default as default};

package/dist/scenes/hanging-letters.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    bg: string;
+    letters: string[];
+    string: string;
+    /** "solid" painted wood, "neon" outline, "paper" cut-outs */
+    look: "solid" | "outline" | "paper";
+    wind: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/hanging-letters.js

@@ -0,0 +1 @@
+import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{rgba}from"../chunks/chunk-FVGCB66F.js";import{SANS}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var hanging_letters_default={id:"hanging-letters",name:"Hanging Letters",description:"Each numeral dangles on its own string like a mobile. Brush past them with the cursor and they swing and twist.",category:"Physics",kind:"2d",motion:"live",tags:["canvas","physics","pendulum","mobile","interactive","light","playful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Hanging by a thread",title:"This page came undone.",message:"All that's left are the numbers, swinging in the breeze. Give them a nudge.",actions:[{label:"Back to the homepage",href:"/",variant:"primary"}]},params:{bg:"#f4efe6",letters:["#ff5a3c","#2b59ff","#ffb800","#16a34a","#9b5cff"],string:"#2b2620",look:"solid",wind:1},theme:{bg:"#f4efe6",fg:"#2b2620",accent:"#2b2620","accent-fg":"#fff"},presetName:"Primary",presets:{autumn:{name:"Autumn",params:{bg:"#f6e7cf",letters:["#d9541e","#a8461a","#e8a83b"],string:"#5a3a1a"},theme:{bg:"#f6e7cf",fg:"#3a1d0a",accent:"#3a1d0a"}},neon:{name:"Neon",params:{bg:"#08000f",letters:["#ff3bd4","#3bd6ff","#ffe14d"],string:"#3a2a4a",look:"outline"},theme:{bg:"#08000f",fg:"#ffe6fb",accent:"#ff3bd4","accent-fg":"#fff"}},paper:{name:"Paper Cut",params:{bg:"#eaf2f8",letters:["#ffffff"],string:"#7a8a99",look:"paper"},theme:{bg:"#eaf2f8",fg:"#1c2b38",accent:"#1c2b38"}},noir:{name:"Noir",params:{bg:"#111114",letters:["#f2f2f2"],string:"#555",look:"outline"},theme:{bg:"#111114",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#111"}},pastel:{name:"Nursery",params:{bg:"#fff6f0",letters:["#ffb3c7","#a8d8ff","#ffe08a","#b8f0c8"],string:"#c9a98a"},theme:{bg:"#fff6f0",fg:"#4a2a3a",accent:"#4a2a3a"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),chars=[...ctx.copy.code||"404"],items=[],build=()=>{let n=chars.length,size=Math.min(c.w*.7/n,c.h*.32);items=chars.map((ch,i)=>({ch,ax:c.w/2+(i-(n-1)/2)*size*.95,L:c.h*.12+i*37%3*c.h*.04,a:ctx.reducedMotion?0:(Math.random()-.5)*.4,va:0,tw:0,vtw:0,size,col:p.letters[i%p.letters.length]}))};build();let lpx=0,lpy=0;return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset();let px=ctx.pointer.x,py=ctx.pointer.y,vx=dt>0?(px-lpx)/dt:0;lpx=px,lpy=py;for(let it of items){if(dt<=0)break;let grav=9;it.va+=(-grav/Math.max(1,it.L/100)*Math.sin(it.a)+Math.sin(t*.7+it.ax)*.25*p.wind)*dt,it.va*=Math.exp(-.6*dt),it.vtw+=(-it.tw*6+Math.sin(t*.5+it.ax*.01)*.3*p.wind)*dt,it.vtw*=Math.exp(-.8*dt);let cx=it.ax+Math.sin(it.a)*(it.L+it.size*.5),cy=Math.cos(it.a)*(it.L+it.size*.5);ctx.pointer.inside&&Math.abs(px-cx)<it.size*.45&&Math.abs(py-cy)<it.size*.55&&(it.va+=vx*12e-5,it.vtw+=vx*6e-4),it.a+=it.va*dt,it.tw+=it.vtw*dt}g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h),g.fillStyle=rgba(p.string,.85),g.fillRect(c.w*.1,0,c.w*.8,6);for(let it of items){let ex=it.ax+Math.sin(it.a)*it.L,ey=Math.cos(it.a)*it.L;g.strokeStyle=p.string,g.lineWidth=1.5,g.beginPath(),g.moveTo(it.ax,3),g.lineTo(ex,ey),g.stroke(),g.save(),g.translate(ex,ey),g.rotate(-it.a);let sq=Math.cos(it.tw);if(g.scale(Math.max(.08,Math.abs(sq)),1),g.font=`900 ${it.size}px ${SANS}`,g.textAlign="center",g.textBaseline="top",g.fillStyle="rgba(0,0,0,.12)",g.fillText(it.ch,it.size*.08,it.size*.1),p.look==="outline")g.strokeStyle=it.col,g.lineWidth=it.size*.03,g.strokeText(it.ch,0,0);else{let shade=sq<0?.75:1;g.fillStyle=it.col,g.globalAlpha=shade,g.fillText(it.ch,0,0),g.globalAlpha=1,p.look==="paper"?(g.strokeStyle="rgba(0,0,0,.08)",g.lineWidth=2,g.strokeText(it.ch,0,0)):(g.fillStyle="rgba(255,255,255,.18)",g.fillText(it.ch,-it.size*.012,-it.size*.012),g.fillStyle=it.col,g.globalAlpha=shade,g.fillText(it.ch,0,it.size*.006),g.globalAlpha=1)}g.restore(),g.fillStyle=p.string,g.beginPath(),g.arc(ex,ey,2.5,0,Math.PI*2),g.fill()}}}}};export{hanging_letters_default as default};

package/dist/scenes/hanging-sign.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    board: "wood" | "closed" | "metal";
+    wall: string;
+    line1: string;
+    line2: string;
+    chain: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/hanging-sign.js

@@ -0,0 +1 @@
+import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{rgba}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var hanging_sign_default={id:"hanging-sign",name:"Hanging Sign",description:"A sign hangs on two chains and swings with real physics. Grab it, throw it and watch it settle.",category:"Physics",kind:"2d",motion:"live",tags:["canvas","physics","verlet","drag","interactive","shop","tactile"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Sorry",title:"We couldn't find that page.",message:"Give the sign a swing if you like. The way back is below.",actions:[{label:"Back to the shop front",href:"/",variant:"primary"}]},params:{board:"wood",wall:"#e9e3d7",line1:"",line2:"PAGE NOT FOUND",chain:"#6b6b6b"},theme:{bg:"#e9e3d7",fg:"#2b2118",accent:"#2b2118","accent-fg":"#f4efe5"},presetName:"Tavern",presets:{mint:{name:"Mint Caf\xE9",params:{board:"closed",wall:"#d9f2e6",line1:"Sorry",line2:"WE'RE CLOSED",chain:"#9ab8aa"},theme:{bg:"#d9f2e6",fg:"#0f3326",accent:"#0f3326","accent-fg":"#fff"}},brick:{name:"Brick Pub",params:{board:"wood",wall:"#7a3a2a",chain:"#2a2a2a",line2:"NO PAGE ON TAP"},theme:{bg:"#7a3a2a",fg:"#fff0e0",accent:"#ffd27a","accent-fg":"#2a1206"}},closed:{name:"Sorry, We're Closed",eyebrow:"Back soon",title:"This page has closed for good.",params:{board:"closed",wall:"#cfe3e8",line1:"SORRY",line2:"WE'RE CLOSED",chain:"#c9c9c9"},theme:{bg:"#cfe3e8",fg:"#0f2a33",accent:"#d7263d","accent-fg":"#fff"}},metal:{name:"Industrial",eyebrow:"Access denied",title:"Nothing beyond this point.",params:{board:"metal",wall:"#2a2d31",line2:"NO ENTRY",chain:"#9a9a9a"},theme:{bg:"#2a2d31",fg:"#eceff2",accent:"#ffcc00","accent-fg":"#1a1a1a"}},night:{name:"Night Tavern",params:{board:"wood",wall:"#1b1f2a",chain:"#8a8f99"},theme:{bg:"#1b1f2a",fg:"#f2ebdc",accent:"#f2c46b","accent-fg":"#1b1f2a"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,code=ctx.copy.code||"404",pts=[],cons=[],sign=[0,0,0,0],sw=0,sh=0,grab=-1,grabOff={x:0,y:0},wood,N=9,pt=(x,y,pinned=!1)=>(pts.push({x,y,px:x,py:y,pinned}),pts.length-1),link=(a,b)=>cons.push([a,b,Math.hypot(pts[a].x-pts[b].x,pts[a].y-pts[b].y)]);function build(){pts=[],cons=[],sw=Math.min(c.w*.62,640),sh=sw*.42;let cx=c.w/2,top=0,hang=Math.max(60,c.h*.36-sh/2),ax=sw*.36,sx=cx-sw/2,sy=top+hang;sign=[pt(sx,sy),pt(sx+sw,sy),pt(sx+sw,sy+sh),pt(sx,sy+sh)],link(sign[0],sign[1]),link(sign[1],sign[2]),link(sign[2],sign[3]),link(sign[3],sign[0]),link(sign[0],sign[2]),link(sign[1],sign[3]);for(let[side,corner]of[[-1,sign[0]],[1,sign[1]]]){let prev=pt(cx+side*ax,top,!0);for(let i=1;i<N;i++){let t=i/N,id=pt(cx+side*ax+(pts[corner].x+side*0-(cx+side*ax))*t,top+hang*t);link(prev,id),prev=id}link(prev,corner)}if(!ctx.reducedMotion)for(let s of sign)pts[s].px-=sw*.06;buildBoard()}function buildBoard(){let sc=Math.min(2,ctx.dpr);wood=document.createElement("canvas"),wood.width=Math.ceil(sw*sc),wood.height=Math.ceil(sh*sc);let g=wood.getContext("2d");g.scale(sc,sc);let r=sh*.08,rr=(x,y,w,h,rad)=>{g.beginPath(),g.roundRect(x,y,w,h,rad)};if(p.board==="wood"){let grd=g.createLinearGradient(0,0,0,sh);grd.addColorStop(0,"#9a6a3c"),grd.addColorStop(1,"#6e4522"),rr(0,0,sw,sh,r),g.fillStyle=grd,g.fill(),g.save(),g.clip();for(let i=0;i<70;i++){g.strokeStyle=`rgba(50,25,8,${.08+rnd()*.15})`,g.lineWidth=1+rnd()*2;let y=rnd()*sh;g.beginPath(),g.moveTo(0,y);for(let x=0;x<=sw;x+=20)g.lineTo(x,y+Math.sin(x*.02+i)*3+(rnd()-.5)*2);g.stroke()}for(let i=0;i<3;i++){let kx=rnd()*sw,ky=rnd()*sh;g.strokeStyle="rgba(50,25,8,.35)";for(let k=1;k<5;k++)g.beginPath(),g.ellipse(kx,ky,k*5,k*2.4,0,0,Math.PI*2),g.stroke()}g.restore(),g.strokeStyle="#4a2c12",g.lineWidth=6,rr(3,3,sw-6,sh-6,r),g.stroke(),g.fillStyle="#2a1606",g.textAlign="center",g.textBaseline="middle",g.font=`900 ${sh*.48}px "Rockwell","Georgia",serif`,g.shadowColor="rgba(255,220,170,.35)",g.shadowOffsetY=2,g.fillText(p.line1||code,sw/2,sh*.42),g.font=`700 ${sh*.14}px "Rockwell","Georgia",serif`,g.fillText(p.line2,sw/2,sh*.8),g.shadowColor="transparent"}else if(p.board==="closed")rr(0,0,sw,sh,r*1.4),g.fillStyle="#ffffff",g.fill(),g.lineWidth=sh*.05,g.strokeStyle="#d7263d",rr(sh*.06,sh*.06,sw-sh*.12,sh-sh*.12,r),g.stroke(),g.fillStyle="#d7263d",g.textAlign="center",g.textBaseline="middle",g.font=`italic 800 ${sh*.32}px "Brush Script MT","Snell Roundhand",cursive,serif`,g.fillText(p.line1||"Sorry",sw/2,sh*.36),g.font=`900 ${sh*.2}px Inter,Arial,sans-serif`,g.fillText(p.line2,sw/2,sh*.7),g.fillStyle="#0f2a33",g.font=`600 ${sh*.07}px Inter,Arial,sans-serif`,g.fillText(`ERROR ${code}`,sw/2,sh*.88);else{let grd=g.createLinearGradient(0,0,sw,sh);grd.addColorStop(0,"#c7ccd2"),grd.addColorStop(.5,"#8b9199"),grd.addColorStop(1,"#b9bec5"),rr(0,0,sw,sh,r*.6),g.fillStyle=grd,g.fill(),g.save(),g.clip();for(let y=0;y<sh;y+=2)g.fillStyle=`rgba(255,255,255,${rnd()*.06})`,g.fillRect(0,y,sw,1);g.fillStyle="#ffcc00",g.fillRect(0,0,sw,sh*.16),g.fillRect(0,sh*.84,sw,sh*.16),g.fillStyle="#1a1a1a";for(let x=-sh;x<sw+sh;x+=sh*.22)for(let y0 of[0,sh*.84])g.beginPath(),g.moveTo(x,y0+sh*.16),g.lineTo(x+sh*.11,y0+sh*.16),g.lineTo(x+sh*.27,y0),g.lineTo(x+sh*.16,y0),g.closePath(),g.fill();g.restore(),g.fillStyle="#1a1a1a",g.textAlign="center",g.textBaseline="middle",g.font=`900 ${sh*.38}px "Stencil","Impact","Arial Black",sans-serif`,g.fillText(code,sw/2,sh*.44),g.font=`900 ${sh*.12}px "Impact","Arial Black",sans-serif`,g.fillText(p.line2,sw/2,sh*.7);for(let[x,y]of[[sh*.1,sh*.3],[sw-sh*.1,sh*.3],[sh*.1,sh*.7],[sw-sh*.1,sh*.7]])g.fillStyle="#6b7078",g.beginPath(),g.arc(x,y,sh*.035,0,Math.PI*2),g.fill(),g.strokeStyle="#3a3d42",g.lineWidth=1.5,g.beginPath(),g.moveTo(x-sh*.025,y),g.lineTo(x+sh*.025,y),g.stroke()}g.fillStyle="#3a3a3a";for(let x of[sw*.14,sw*.86])g.beginPath(),g.arc(x,sh*.06+6,4,0,Math.PI*2),g.fill()}ctx.on("pointerdown",e=>{if(e.target.closest("a,button"))return;let r=ctx.root.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,best=-1,bd=1/0;for(let s of sign){let d=Math.hypot(pts[s].x-x,pts[s].y-y);d<bd&&(bd=d,best=s)}bd<sw*.8&&(grab=best,grabOff={x:pts[best].x-x,y:pts[best].y-y})}),ctx.onWindow("pointerup",()=>grab=-1),build();let gust=3;return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;if(c.reset(),dt>0){let h=Math.min(dt,.03333333333333333),grav=c.h*2.2;if(t>gust&&(gust=t+4+rnd()*6,!ctx.pointer.engaged))for(let s of sign)pts[s].px+=(rnd()-.5)*sw*.03;for(let q of pts){if(q.pinned)continue;let vx=(q.x-q.px)*.992,vy=(q.y-q.py)*.992;q.px=q.x,q.py=q.y,q.x+=vx,q.y+=vy+grav*h*h}if(grab>=0){let q=pts[grab];q.x+=(ctx.pointer.x+grabOff.x-q.x)*.5,q.y+=(ctx.pointer.y+grabOff.y-q.y)*.5}for(let it=0;it<14;it++)for(let[a2,b2,len]of cons){let A=pts[a2],B=pts[b2],dx=B.x-A.x,dy=B.y-A.y,d2=Math.hypot(dx,dy)||1,diff=(d2-len)/d2,wa=A.pinned?0:B.pinned?1:.5,wb=B.pinned?0:A.pinned?1:.5;A.x+=dx*diff*wa,A.y+=dy*diff*wa,B.x-=dx*diff*wb,B.y-=dy*diff*wb}}g.fillStyle=p.wall,g.fillRect(0,0,c.w,c.h);let v=g.createRadialGradient(c.w/2,c.h*.3,0,c.w/2,c.h*.3,Math.max(c.w,c.h)*.8);v.addColorStop(0,"rgba(255,255,255,.18)"),v.addColorStop(1,"rgba(0,0,0,.22)"),g.fillStyle=v,g.fillRect(0,0,c.w,c.h),g.fillStyle="#3a3a3a",g.fillRect(c.w/2-sw*.45,0,sw*.9,10);let[a,b,cc,d]=sign.map(i=>pts[i]),ang=Math.atan2(b.y-a.y,b.x-a.x);g.save(),g.translate(a.x+18,a.y+22),g.rotate(ang),g.fillStyle="rgba(0,0,0,.18)",g.filter="blur(10px)",g.fillRect(0,0,sw,sh),g.filter="none",g.restore(),g.strokeStyle=p.chain,g.lineWidth=2.6;for(let k=0;k<pts.length;k++)sign.includes(k);for(let[i0,i1]of cons){if(sign.includes(i0)&&sign.includes(i1))continue;let A=pts[i0],B=pts[i1],mx=(A.x+B.x)/2,my=(A.y+B.y)/2,la=Math.atan2(B.y-A.y,B.x-A.x),L=Math.hypot(B.x-A.x,B.y-A.y);g.save(),g.translate(mx,my),g.rotate(la),g.beginPath(),g.ellipse(0,0,L*.62,i0%2?2.2:4.6,0,0,Math.PI*2),g.stroke(),g.restore()}g.save(),g.translate(a.x,a.y),g.rotate(ang),g.drawImage(wood,0,0,sw,sh);let sheen=g.createLinearGradient(0,0,sw,0),s0=.5+ang*2;sheen.addColorStop(Math.max(0,Math.min(1,s0-.2)),"rgba(255,255,255,0)"),sheen.addColorStop(Math.max(0,Math.min(1,s0)),"rgba(255,255,255,.12)"),sheen.addColorStop(Math.max(0,Math.min(1,s0+.2)),"rgba(255,255,255,0)"),g.fillStyle=sheen,g.beginPath(),g.roundRect(0,0,sw,sh,sh*.08),g.fill(),g.restore()}}}};export{hanging_sign_default as default};

package/dist/scenes/helpful-links.d.ts

@@ -0,0 +1,6 @@
+interface Params {
+    /** Rows of "Title|Description|/href". */
+    links: string[];
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/helpful-links.js

@@ -0,0 +1,18 @@
+import{actions,esc,layer,sr}from"../chunks/chunk-ES56TX4X.js";import"../chunks/chunk-B2NBRLO2.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var helpful_links_default={id:"helpful-links",name:"Helpful Links",description:"Headline on top, then a tidy list of where people probably wanted to go, each with a one-line description and an arrow.",category:"Simple",kind:"2d",motion:"static",tags:["simple","links","list","useful","saas","docs","static","fast"],layout:"none",copy:{eyebrow:"404 error",title:"This page does not exist",message:"Sorry, we couldn\u2019t find the page you\u2019re looking for. These might help:",actions:[{label:"Back to home",href:"/"}]},params:{links:["Documentation|Learn how to integrate our tools with your app.|/docs","API reference|A complete reference of every endpoint.|/docs/api","Guides|Step-by-step tutorials for common tasks.|/guides","Blog|Read our latest news and articles.|/blog"]},theme:{bg:"#ffffff",fg:"#111827",accent:"#4f46e5","accent-fg":"#ffffff"},presetName:"Light",presets:{dark:{name:"Dark",theme:{bg:"#0f1117",fg:"#e5e7eb",accent:"#a5b4fc","accent-fg":"#0f1117"}},sand:{name:"Sand",theme:{bg:"#f6f1e9",fg:"#292018",accent:"#b45309","accent-fg":"#fff"}}},css:`
+& .hl{position:absolute;inset:0;overflow:auto;display:flex;justify-content:center;padding:clamp(28px,8cqh,96px) 16px}
+& .hl .in{width:min(560px,100%);margin:auto 0}
+& .hl .ey{font-size:13px;font-weight:600;color:var(--lp-accent)}
+& .hl h1{margin:8px 0 0;font-size:clamp(28px,4.4cqw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
+& .hl p{margin:14px 0 0;color:var(--lp-muted);font-size:15px;line-height:1.6}
+& .hl ul{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid color-mix(in srgb,var(--lp-fg) 12%,transparent)}
+& .hl li a{display:flex;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid color-mix(in srgb,var(--lp-fg) 12%,transparent);color:inherit;text-decoration:none}
+& .hl li i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px;
+  background:color-mix(in srgb,var(--lp-accent) 12%,transparent);color:var(--lp-accent)}
+& .hl li b{display:block;font-size:15px;font-weight:600}
+& .hl li small{display:block;color:var(--lp-muted);font-size:13.5px;margin-top:2px}
+& .hl li span{flex:1;min-width:0}
+& .hl li em{font-style:normal;color:var(--lp-muted);transition:transform .2s}
+& .hl li a:hover em{transform:translateX(4px);color:var(--lp-accent)}
+& .hl .lp-actions{justify-content:flex-start;margin-top:26px}
+& .hl .lp-btn--primary{background:none;color:var(--lp-accent);padding:6px 0;font-weight:600}
+`,setup(ctx){let c=ctx.copy,rows=ctx.params.links.map(l=>l.split("|")).map(([t,d,h])=>`<li><a href="${esc(h??"/")}"><i aria-hidden="true">${esc((t??"?").charAt(0))}</i><span><b>${esc(t??"")}</b><small>${esc(d??"")}</small></span><em aria-hidden="true">\u2192</em></a></li>`).join(""),el=layer(ctx,"hl",`<div class="in"><span class="ey">${esc(c.eyebrow||c.code)}</span><h1>${sr(c.code)}${esc(c.title)}</h1><p>${esc(c.message)}</p><ul>${rows}</ul></div>`);return el.querySelectorAll("ul a").forEach(a=>a.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),ctx.navigate(a.getAttribute("href"),e))})),el.querySelector(".in").append(actions(ctx)),{destroy:()=>el.remove()}}};export{helpful_links_default as default};

package/dist/scenes/hyperspace.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    star: string;
+    tint: string;
+    core: string;
+    bg: string;
+    /** Seconds per jump cycle. */
+    cycle: number;
+    density: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/hyperspace.js

@@ -0,0 +1,57 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,POST}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform vec3 uStar, uTint, uCore, uBg;
+uniform float uCycle, uDensity;
+${HASH}
+${POST}
+
+// warp factor over a jump cycle: cruise \u2192 spool \u2192 jump \u2192 drop out
+float warp(float t) {
+  float c = mod(t, uCycle) / uCycle;
+  float spool = smoothstep(0.35, 0.6, c);
+  float jump = smoothstep(0.6, 0.66, c) * (1.0 - smoothstep(0.86, 0.96, c));
+  return 0.06 + spool * 0.25 + jump * 1.6;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = (fc - 0.5 * uRes) / uRes.y;
+  uv -= uMouse * 0.08;
+  float t = uTime;
+  float w = warp(t);
+  float r = length(uv);
+  float a = atan(uv.y, uv.x);
+  vec3 col = uBg;
+
+  for (int l = 0; l < 7; l++) {
+    float fl = float(l);
+    float bins = 90.0 + fl * 55.0;
+    float ab = a / 6.28318 * bins;
+    float id = floor(ab);
+    float h = hash12(vec2(id, fl * 7.3));
+    if (h > uDensity) continue;
+    float fa = fract(ab) - 0.5 - (hash12(vec2(id, fl + 1.7)) - 0.5) * 0.6;
+    // each star travels outward; z cycles
+    float speed = 0.35 + h * 0.6;
+    float z = fract(hash12(vec2(id, fl * 3.1)) + t * speed * (0.12 + w * 0.9));
+    float r0 = 0.04 / max(1.0 - z, 0.02) * 0.6;
+    float len = r0 * (0.02 + w * 1.2);
+    float along = smoothstep(r0 - len, r0, r) * smoothstep(r0 + 0.004 + w * 0.02, r0, r);
+    float width = abs(fa) * (r * 6.2832 / bins) * uRes.y;
+    float across = smoothstep(1.4 + w * 0.6, 0.0, width);
+    float bright = (0.4 + 0.6 * z) * along * across;
+    vec3 sc = mix(uStar, uTint, h * 1.3);
+    col += sc * bright * (1.0 + w);
+  }
+  // core glow and tunnel haze during jump
+  col += uCore * (exp(-r * 9.0) * (0.3 + w * 1.2) + exp(-r * 2.0) * 0.08 * w);
+  col += uTint * 0.05 * w * smoothstep(0.9, 0.2, r);
+  // flash at the jump
+  float c = mod(t, uCycle) / uCycle;
+  col += uCore * 0.6 * exp(-abs(c - 0.62) * 70.0);
+
+  col = aces(col);
+  col = toSRGB(col);
+  col *= mix(0.65, 1.0, vignette(vUv, 0.3));
+  fragColor = vec4(col, 1.0);
+}
+`,hyperspace_default={id:"hyperspace",name:"Hyperspace Jump",description:"Stars stretch into light as the ship spools up, jumps, and drops out somewhere unexpected.",category:"Space",kind:"2d",motion:"live",tags:["webgl","space","warp","stars","speed","sci-fi"],layout:"center",copy:{eyebrow:"Navigation error",title:"Jumped to the wrong coordinates.",message:"The navicomputer says this page should be here. Space says otherwise.",actions:[{label:"Plot a course home",href:"/",variant:"primary"}]},params:{star:"#e8f0ff",tint:"#7fb3ff",core:"#cfe0ff",bg:"#01020a",cycle:9,density:.55},theme:{bg:"#01020a","code-color":"rgba(230,240,255,.9)",accent:"#e8f0ff","accent-fg":"#01020a"},presetName:"Classic",presets:{ice:{name:"Ice Lanes",params:{star:"#ffffff",tint:"#9fe8ff",core:"#e6f9ff",bg:"#000a12",density:.65},theme:{bg:"#000a12",accent:"#9fe8ff","accent-fg":"#000a12"}},magenta:{name:"Magenta Drive",params:{star:"#ffe6f7",tint:"#ff3bb8",core:"#ff9edb",bg:"#0d0008",cycle:7},theme:{bg:"#0d0008",accent:"#ff9edb","accent-fg":"#1a0010"}},sunburst:{name:"Sunburst",params:{star:"#fffbe6",tint:"#ff7a1f",core:"#ffd36b",bg:"#120500",density:.75},theme:{bg:"#120500",accent:"#ffd36b","accent-fg":"#120500"}},mono:{name:"Monochrome",params:{star:"#ffffff",tint:"#bbbbbb",core:"#ffffff",bg:"#000000"},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},plasma:{name:"Plasma Drive",params:{star:"#ffd9ff",tint:"#b45cff",core:"#ff9cf5",bg:"#07010d"},theme:{bg:"#07010d",accent:"#f5d9ff","accent-fg":"#12001f"}},"red-alert":{name:"Red Alert",eyebrow:"Red alert",title:"All hands: page not found.",params:{star:"#ffe1d9",tint:"#ff4a3d",core:"#ff7a5c",bg:"#0a0101",cycle:6},theme:{bg:"#0a0101",accent:"#ffb3a8","accent-fg":"#200402"}},emerald:{name:"Emerald",params:{star:"#e0fff2",tint:"#2bffb1",core:"#a6ffe0",bg:"#00080a"},theme:{bg:"#00080a",accent:"#c9ffe9","accent-fg":"#00140d"}},gold:{name:"Solar Sail",params:{star:"#fff4dd",tint:"#ffbf47",core:"#ffd88a",bg:"#080500",density:.7},theme:{bg:"#080500",accent:"#ffe0a3","accent-fg":"#1a1000"}}},css:"& .lp-code{font-weight:200;letter-spacing:.06em;text-shadow:0 0 30px rgba(170,200,255,.45)}",setup(ctx){let p=ctx.params;return shaderScene(ctx,{frag:FRAG,uniforms:()=>({uStar:linear(p.star),uTint:linear(p.tint),uCore:linear(p.core),uBg:linear(p.bg),uCycle:p.cycle,uDensity:p.density})})}};export{hyperspace_default as default};

package/dist/scenes/hypnosis.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    a: string;
+    b: string;
+    arms: number;
+    speed: number;
+    /** 0 spiral, 1 rings, 2 checker tunnel */
+    pattern: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/hypnosis.js

@@ -0,0 +1,26 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{POST}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform vec3 uA, uB;
+uniform float uArms, uSpeed, uPattern;
+${POST}
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y - uMouse * 0.05;
+  float t = uTime * uSpeed;
+  float r = length(p);
+  float a = atan(p.y, p.x);
+  float v;
+  if (uPattern < 0.5) v = sin(a * uArms + log(max(r, 1e-3)) * 9.0 - t * 3.0);
+  else if (uPattern < 1.5) v = sin(r * 60.0 - t * 4.0);
+  else {
+    float z = 0.3 / max(r, 1e-3) + t * 0.6;
+    v = sin(a * uArms * 0.5 * 3.14159 / 3.14159 * 2.0) * sin(z * 6.0);
+  }
+  float w = fwidth(v) * 1.5;
+  float m = smoothstep(-w, w, v);
+  vec3 col = mix(uA, uB, m);
+  col *= smoothstep(0.0, 0.08, r) * 0.6 + 0.4;
+  col *= mix(0.55, 1.0, vignette(fc / uRes, 0.3));
+  fragColor = vec4(toSRGB(col), 1.0);
+}
+`,hypnosis_default={id:"hypnosis",name:"Hypnosis",description:"An endlessly turning hypnotic spiral. Keep looking. You are getting very, very lost.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","spiral","op-art","trippy","funny","black-and-white"],layout:"center",copy:{eyebrow:"Look into the spiral",title:"You are getting very lost.",message:"When I snap my fingers, you'll forget this URL and click the button below.",actions:[{label:"*snap*",href:"/",variant:"primary",icon:"none"}]},params:{a:"#0a0a0a",b:"#f5f5f5",arms:4,speed:1,pattern:0},theme:{bg:"#0a0a0a",fg:"#ffffff",accent:"#ff2d55","accent-fg":"#fff","code-color":"#ffffff"},presetName:"Classic",presets:{ocean:{name:"Deep Blue",params:{a:"#020a2a",b:"#3bd6ff",arms:3},theme:{accent:"#3bd6ff","accent-fg":"#020a2a"}},toxic:{name:"Toxic",params:{a:"#0a1a02",b:"#c6ff3b",arms:5,speed:1.4},theme:{accent:"#c6ff3b","accent-fg":"#0a1a02"}},candy:{name:"Candy Swirl",params:{a:"#ff2d6f",b:"#ffe6ee",arms:6},theme:{accent:"#111","accent-fg":"#fff"}},rings:{name:"Ripples",params:{pattern:1,a:"#0b1a3a",b:"#4dd8ff"},theme:{accent:"#4dd8ff","accent-fg":"#0b1a3a"}},tunnel:{name:"Op-Art Tunnel",params:{pattern:2,arms:12,a:"#000000",b:"#ffffff"}}},css:`& .lp-content,& .lp-head,& .lp-body{background:color-mix(in srgb,var(--lp-bg) 82%,transparent);border-radius:24px;padding:18px 28px}
+& .lp-code{font-weight:800}`,setup(ctx){let p=ctx.params;return shaderScene(ctx,{frag:FRAG,uniforms:()=>({uA:linear(p.a),uB:linear(p.b),uArms:p.arms,uSpeed:p.speed,uPattern:p.pattern})})}};export{hypnosis_default as default};

package/dist/scenes/ink.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    paper: string;
+    ink: string;
+    ink2: string;
+    /** Seconds for one dissolve-and-return cycle. */
+    cycle: number;
+    font: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/ink.js

@@ -0,0 +1,43 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,NOISE,POST,texture}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import{SERIF,drawFittedText}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uPaper, uInk, uInk2;
+uniform float uCycle;
+${HASH}
+${NOISE}
+${POST}
+
+vec2 warp(vec2 p, float t, float amt) {
+  vec2 q = vec2(fbm(p * 2.0 + t * 0.05), fbm(p * 2.0 + vec2(5.2, 1.3) - t * 0.04));
+  vec2 r = vec2(fbm(p * 3.0 + q * 3.0 + vec2(1.7, 9.2) + t * 0.07), fbm(p * 3.0 + q * 3.0 + vec2(8.3, 2.8) - t * 0.06));
+  return (r - 0.5) * amt;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime;
+  // dissolve phase: 0 = crisp letters, 1 = fully bloomed ink
+  float c = fract(t / uCycle);
+  float phase = smoothstep(0.08, 0.6, c) * (1.0 - smoothstep(0.78, 0.98, c));
+  float amt = phase * 0.35;
+  vec2 w = warp(p, t, amt);
+  // the ink spreads outward from the letters, sinking slightly
+  vec2 suv = uv + vec2(w.x * uRes.y / uRes.x, w.y) + vec2(0.0, phase * 0.03);
+  float lod = phase * 4.5;
+  float d = textureLod(uText, suv, lod).a;
+  float d2 = textureLod(uText, uv + vec2(w.x * uRes.y / uRes.x, w.y) * 1.6, lod + 1.0).a;
+  float density = clamp(d * (1.0 + phase * 0.8) + d2 * phase * 0.6, 0.0, 1.0);
+  // feathered tendrils
+  float tend = fbm(p * 7.0 + w * 6.0 + t * 0.03);
+  density *= mix(1.0, 0.55 + 0.9 * tend, phase);
+  vec3 inkCol = mix(uInk, uInk2, smoothstep(0.2, 0.9, tend) * phase);
+  // paper with fibres
+  vec3 paper = uPaper * (0.97 + 0.03 * vnoise(p * 240.0)) * (0.98 + 0.02 * fbm(p * 9.0));
+  vec3 col = mix(paper, inkCol, smoothstep(0.02, 0.9, density) * 0.96);
+  // darker edges where ink pools
+  col = mix(col, uInk * 0.6, smoothstep(0.45, 0.5, density) * smoothstep(0.62, 0.5, density) * 0.25 * phase);
+  col *= mix(0.92, 1.0, vignette(uv, 0.2));
+  fragColor = vec4(toSRGB(col), 1.0);
+}
+`,ink_default={id:"ink",name:"Ink in Water",description:"The numerals bleed into the paper like ink dropped in water, bloom into clouds, then slowly gather back into shape.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","ink","watercolor","calm","light","editorial","elegant"],layout:"bottom",codeInScene:!0,stillTime:.2,copy:{eyebrow:"Error 404",title:"This page dissolved.",message:"It was here a moment ago, then it bled into the paper. Let's start on a clean page.",actions:[{label:"Start fresh",href:"/",variant:"primary"}]},params:{paper:"#f6f2ea",ink:"#14213d",ink2:"#4a1d6b",cycle:12,font:SERIF},theme:{bg:"#f6f2ea",fg:"#14213d",accent:"#14213d","accent-fg":"#f6f2ea","font-display":"var(--lp-font-serif)","title-weight":"500"},presetName:"Indigo",presets:{ocean:{name:"Blue Ink",params:{paper:"#f4f7fb",ink:"#0b3a8a",ink2:"#2a7bd6"},theme:{bg:"#f4f7fb",fg:"#0b1e3a",accent:"#0b3a8a","accent-fg":"#fff"}},green:{name:"Moss",params:{paper:"#f2f2ea",ink:"#2a4a1a",ink2:"#7a9a3a"},theme:{bg:"#f2f2ea",fg:"#1a2a10",accent:"#2a4a1a","accent-fg":"#fff"}},violet:{name:"Violet",params:{paper:"#faf6ff",ink:"#4a1a8a",ink2:"#c25cd6"},theme:{bg:"#faf6ff",fg:"#24103f",accent:"#4a1a8a","accent-fg":"#fff"}},sumi:{name:"Sumi",params:{paper:"#efe9dc",ink:"#111111",ink2:"#3a3a3a"},theme:{bg:"#efe9dc",fg:"#111",accent:"#111","accent-fg":"#efe9dc"}},crimson:{name:"Crimson",params:{paper:"#fbf6ef",ink:"#8c1c13",ink2:"#d1495b"},theme:{bg:"#fbf6ef",fg:"#3d0b07",accent:"#8c1c13","accent-fg":"#fff"}},teal:{name:"Teal",params:{paper:"#f1f5f2",ink:"#0b4f4a",ink2:"#2a9d8f"},theme:{bg:"#f1f5f2",fg:"#0b2b28",accent:"#0b4f4a","accent-fg":"#fff"}},night:{name:"Gold on Black",params:{paper:"#0e0d0c",ink:"#d9b25f",ink2:"#f3dfa2"},theme:{bg:"#0e0d0c",fg:"#f3e6c8",accent:"#d9b25f","accent-fg":"#0e0d0c"}}},setup(ctx){let p=ctx.params,cv=document.createElement("canvas"),tex=null,gl,draw=()=>{let w=Math.min(2048,Math.round(ctx.width*Math.min(2,ctx.dpr))),h=Math.round(w*ctx.height/Math.max(1,ctx.width));cv.width=w,cv.height=h;let g=cv.getContext("2d");g.clearRect(0,0,w,h),g.save(),g.translate(0,h*.37-h*.22),drawFittedText(g,ctx.copy.code||"404",{width:w,height:h*.44,font:p.font,weight:700,fit:.86}),g.restore(),tex&&(gl.bindTexture(gl.TEXTURE_2D,tex),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,!0),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,cv),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,!1),gl.generateMipmap(gl.TEXTURE_2D))};return{...shaderScene(ctx,{frag:FRAG,init(g){gl=g,draw(),tex=texture(gl,cv,{filter:"mipmap"})},uniforms:()=>({uText:tex,uPaper:linear(p.paper),uInk:linear(p.ink),uInk2:linear(p.ink2),uCycle:p.cycle})}),resize:draw}}};export{ink_default as default};

package/dist/scenes/invaders.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    bg: string;
+    aliens: string[];
+    ship: string;
+    shot: string;
+    text: string;
+    stars: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/invaders.js

@@ -0,0 +1 @@
+import{GAME_CSS,codeBitmap,hud,input,loadHigh,saveHigh}from"../chunks/chunk-MNUNTC4L.js";import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{rgba}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var ALIEN=[["..x..x..","...xx...","..xxxx..",".xx.xx.x","xxxxxxxx","x.xxxx.x","x.x..x.x","...xx..."],["..x..x..","x..xx..x","x.xxxx.x","xxx.xx.x","xxxxxxxx",".xxxxxx.","..x..x..",".x....x."]],SHIP=["....x....","...xxx...","...xxx...",".xxxxxxx.","xxxxxxxxx","xxxxxxxxx","xx.....xx"],invaders_default={id:"invaders",name:"Page Invaders",description:"The 404 marches down the screen as a fleet of pixel aliens. The ship defends itself until you take the controls.",category:"Games",kind:"2d",motion:"game",tags:["canvas","game","playable","space","shooter","pixel-art","retro"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"\u2190 \u2192 move \xB7 space fires",title:"Your page was abducted.",message:"The invaders took it and they're not giving it back. Blast a few, then fly home.",actions:[{label:"Retreat to home",href:"/",variant:"primary"}]},params:{bg:"#03030a",aliens:["#7dff6b","#3bd6ff","#ff5ad1"],ship:"#e9ecff",shot:"#ffef5a",text:"#e9ecff",stars:!0},theme:{bg:"#03030a",fg:"#e9ecff",accent:"#7dff6b","accent-fg":"#03030a","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Arcade",presets:{neon:{name:"Neon",params:{bg:"#08000f",aliens:["#ff3bd4","#3bffe6","#ffe14d"],ship:"#ffffff",shot:"#ffffff",text:"#ffe6fb"},theme:{bg:"#08000f",fg:"#ffe6fb",accent:"#ff3bd4","accent-fg":"#fff"}},green:{name:"Phosphor",params:{bg:"#010a03",aliens:["#3dff6b"],ship:"#3dff6b",shot:"#c9ffd6",text:"#3dff6b"},theme:{bg:"#010a03",fg:"#c9ffd6",accent:"#3dff6b","accent-fg":"#010a03"}},mono:{name:"Cabinet White",params:{aliens:["#ffffff"],ship:"#3dff6b",shot:"#ffffff",text:"#ffffff"},theme:{accent:"#ffffff","accent-fg":"#000"}},blush:{name:"Bubblegum",params:{bg:"#fff1f6",aliens:["#ff4f8b","#8a5cff","#ffb13b"],ship:"#2a1640",shot:"#ff4f8b",text:"#2a1640",stars:!1},theme:{bg:"#fff1f6",fg:"#2a1640",accent:"#2a1640","accent-fg":"#fff1f6"}},amber:{name:"Amber",params:{bg:"#0a0600",aliens:["#ffb000","#ff7a00"],ship:"#ffe0a0",shot:"#fff2cc",text:"#ffb000"},theme:{bg:"#0a0600",fg:"#ffe0a0",accent:"#ffb000","accent-fg":"#0a0600"}}},css:GAME_CSS,setup(ctx){let p=ctx.params,c=canvas2d(ctx),inp=input(ctx,{pointerPlays:!1}),rnd=ctx.random,px=3,aliens=[],form={x:0,y:0,dir:1,cell:0},ship={x:0,y:0},shots=[],booms=[],stars=[],cool=0,score=0,lives=3,high=loadHigh("invaders"),dead=0,wasPlaying=!1,aiTarget=0;function wave(){let cols=Math.max(18,Math.min(30,Math.round(c.w/52))),rows=Math.round(cols*.38),bm=codeBitmap(ctx.copy.code||"404",cols,rows);aliens=[];for(let r=0;r<rows;r++)for(let q=0;q<cols;q++)bm[r*cols+q]&&aliens.push({gx:q,gy:r,alive:!0,col:p.aliens[r%p.aliens.length]});form.cell=Math.min(c.w*.62/cols,c.h*.36/rows),px=Math.max(1.5,form.cell/10),form.x=(c.w-cols*form.cell)/2,form.y=c.h*.08,form.dir=1}function layout(){wave(),ship={x:c.w/2,y:c.h*.6},stars=Array.from({length:120},()=>({x:rnd()*c.w,y:rnd()*c.h,z:.3+rnd()}))}function sprite(rows,x,y,s,col){c.g.fillStyle=col;for(let r=0;r<rows.length;r++)for(let q=0;q<rows[r].length;q++)rows[r][q]==="x"&&c.g.fillRect(x+q*s,y+r*s,s+.3,s+.3)}return layout(),{resize(){c.reset(),layout()},frame(t,dt){let g=c.g;c.reset(),inp.playing&&!wasPlaying&&(wasPlaying=!0,score=0,lives=3,wave(),shots=[]);let live=(!ctx.reducedMotion||inp.playing)&&dt>0,cols=aliens.reduce((m,a)=>Math.max(m,a.gx),0)+1;if(live&&dead<=0){let speed=c.w*.03*(1+(1-aliens.filter(a=>a.alive).length/Math.max(1,aliens.length))*2.5);form.x+=form.dir*speed*dt;let alive=aliens.filter(a=>a.alive),minX=form.x+Math.min(...alive.map(a=>a.gx))*form.cell,maxX=form.x+(Math.max(...alive.map(a=>a.gx))+1)*form.cell;(form.dir>0&&maxX>c.w-20||form.dir<0&&minX<20)&&(form.dir*=-1,form.y+=form.cell*.5);let maxRow=Math.max(...alive.map(a=>a.gy));form.y+(maxRow+1)*form.cell>ship.y-20&&(form.y=c.h*.08);let sw=9*px*1.4;if(inp.playing)inp.left&&(ship.x-=c.w*.55*dt),inp.right&&(ship.x+=c.w*.55*dt),(inp.action||inp.pressed())&&cool<=0&&(shots.push({x:ship.x,y:ship.y-4,vy:-c.h*1.2,enemy:!1}),cool=.32);else{alive.some(a=>a.gx===aiTarget)||(aiTarget=alive[Math.floor(rnd()*alive.length)]?.gx??0);let tx=form.x+(aiTarget+.5)*form.cell;ship.x+=Math.sign(tx-ship.x)*Math.min(Math.abs(tx-ship.x),c.w*.35*dt),Math.abs(tx-ship.x)<form.cell&&cool<=0&&(shots.push({x:ship.x,y:ship.y-4,vy:-c.h*1.2,enemy:!1}),cool=.45,rnd()<.35&&(aiTarget=alive[Math.floor(rnd()*alive.length)]?.gx??0))}if(ship.x=Math.max(sw,Math.min(c.w-sw,ship.x)),cool-=dt,rnd()<dt*1.2&&alive.length){let a=alive[Math.floor(rnd()*alive.length)];shots.push({x:form.x+(a.gx+.5)*form.cell,y:form.y+(a.gy+1)*form.cell,vy:c.h*.45,enemy:!0})}for(let s of shots)s.y+=s.vy*dt;for(let s of shots){if(s.enemy){Math.abs(s.x-ship.x)<sw*.5&&Math.abs(s.y-ship.y-6*px)<8*px&&(s.y=1e6,booms.push({x:ship.x,y:ship.y,life:.6,col:p.ship}),inp.playing&&(lives--,lives<=0&&(dead=2,score>high&&saveHigh("invaders",high=score))));continue}for(let a of aliens){if(!a.alive)continue;let ax=form.x+a.gx*form.cell,ay=form.y+a.gy*form.cell;if(s.x>ax&&s.x<ax+form.cell&&s.y>ay&&s.y<ay+form.cell){a.alive=!1,s.y=-1e6,score+=20,booms.push({x:ax+form.cell/2,y:ay+form.cell/2,life:.4,col:a.col});break}}}shots=shots.filter(s=>s.y>-50&&s.y<c.h+50),aliens.some(a=>a.alive)||wave()}else dead>0&&(dead-=dt,dead<=0&&(score=0,lives=3,wave(),shots=[]));if(g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h),p.stars)for(let s of stars)s.y+=s.z*18*dt,s.y>c.h&&(s.y=0),g.fillStyle=rgba(p.text,.25*s.z),g.fillRect(s.x,s.y,s.z*1.6,s.z*1.6);let frame=Math.floor(t*2)%2;for(let a of aliens)a.alive&&sprite(ALIEN[frame],form.x+a.gx*form.cell+form.cell*.1,form.y+a.gy*form.cell+form.cell*.1,form.cell*.8/8,a.col);for(let s of shots)g.fillStyle=s.enemy?p.aliens[0]:p.shot,g.fillRect(s.x-px*.6,s.y,px*1.2,px*5);for(let b of booms){b.life-=dt,g.fillStyle=rgba(b.col,Math.max(0,b.life*2));for(let i=0;i<8;i++){let a=i/8*Math.PI*2,r=(.6-b.life)*form.cell*2;g.fillRect(b.x+Math.cos(a)*r,b.y+Math.sin(a)*r,px*1.5,px*1.5)}}booms=booms.filter(b=>b.life>0),(dead<=0||Math.floor(t*8)%2)&&sprite(SHIP,ship.x-4.5*px*1.4,ship.y,px*1.4,p.ship);let fs=Math.max(10,Math.min(14,c.w/90));hud(g,`SCORE ${String(score).padStart(5,"0")}`,20,16,fs,p.text),hud(g,`HI ${String(high).padStart(5,"0")}`,c.w/2,16,fs,p.text,"center"),inp.playing?hud(g,`LIVES ${lives}`,c.w-20,16,fs,p.text,"right"):Math.floor(t*1.6)%2===0&&hud(g,"DEMO \xB7 PRESS SPACE",c.w/2,ship.y+14*px,fs,rgba(p.text,.75),"center")}}}};export{invaders_default as default};

package/dist/scenes/kaleidoscope.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    a: string;
+    b: string;
+    c: string;
+    bg: string;
+    segments: number;
+    speed: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/kaleidoscope.js

@@ -0,0 +1,34 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,NOISE,POST,texture}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import{SANS,drawFittedText}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uA, uB, uC, uBg;
+uniform float uSeg, uSpeed;
+${HASH}
+${NOISE}
+${POST}
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime * uSpeed;
+  float r = length(p);
+  float a = atan(p.y, p.x) + t * 0.08 + uMouse.x * 0.6;
+  float seg = 6.28318 / uSeg;
+  a = mod(a, seg);
+  a = abs(a - seg * 0.5);
+  vec2 q = vec2(cos(a), sin(a)) * r;
+  q = q * (1.2 + 0.2 * sin(t * 0.3)) + vec2(t * 0.05, 0.0);
+  // coloured glass shards
+  float n1 = fbm(q * 3.0 + t * 0.1);
+  float n2 = fbm(q * 6.0 - t * 0.07 + 4.0);
+  vec3 col = mix(uA, uB, smoothstep(0.35, 0.65, n1));
+  col = mix(col, uC, smoothstep(0.55, 0.8, n2));
+  float edges = smoothstep(0.02, 0.0, abs(fract(n1 * 6.0) - 0.5) - 0.46);
+  col = mix(col, uBg, edges * 0.8);
+  // the code tumbles through the mirrors
+  vec2 tuv = fract(q * 0.6 + vec2(0.5, 0.5 + t * 0.02));
+  float txt = texture(uText, tuv).a;
+  col = mix(col, vec3(1.0), txt * 0.85);
+  col *= smoothstep(1.2, 0.2, r) * 0.9 + 0.15;
+  col = toSRGB(col);
+  fragColor = vec4(col, 1.0);
+}
+`,kaleidoscope_default={id:"kaleidoscope",name:"Kaleidoscope",description:"Mirrored shards of colour turn endlessly, with the error tumbling through the mirrors. Move the pointer to rotate the tube.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","kaleidoscope","psychedelic","colorful","generative","trippy"],layout:"bottom",copy:{eyebrow:"Every angle",title:"We looked from every angle.",message:"Twelve mirrors, endless reflections, and not one of them shows the page you wanted.",actions:[{label:"Stop the spin",href:"/",variant:"primary"}]},params:{a:"#ff3d7f",b:"#3dd6ff",c:"#ffd23d",bg:"#0b0614",segments:12,speed:1},theme:{bg:"#0b0614",fg:"#ffffff",accent:"#ffffff","accent-fg":"#0b0614","code-color":"rgba(255,255,255,.95)"},presetName:"Candy Glass",presets:{ocean:{name:"Ocean Glass",params:{a:"#0077b6",b:"#90e0ef",c:"#ffffff",bg:"#03045e",segments:10}},autumn:{name:"Autumn Glass",params:{a:"#d9541e",b:"#f2b33d",c:"#5a2a12",bg:"#1a0a05",segments:8}},jewel:{name:"Jewel Box",params:{a:"#0a7a5a",b:"#5a0a7a",c:"#d4af37",segments:8}},pastel:{name:"Pastel",params:{a:"#ffc2d9",b:"#c2e7ff",c:"#fff2b3",bg:"#ffffff",segments:10},theme:{bg:"#ffe9f2",fg:"#2a1030",accent:"#2a1030","accent-fg":"#fff","code-color":"#2a1030"}},mono:{name:"Monochrome",params:{a:"#111111",b:"#777777",c:"#eeeeee",bg:"#000000",segments:16}}},css:"& .lp-code{font-weight:900;text-shadow:0 4px 30px rgba(0,0,0,.4)}& .lp-body{text-shadow:0 2px 14px rgba(0,0,0,.5)}",setup(ctx){let p=ctx.params,cv=document.createElement("canvas");cv.width=512,cv.height=512;let g=cv.getContext("2d");g.save(),g.translate(0,166),drawFittedText(g,ctx.copy.code||"404",{width:512,height:180,font:SANS,weight:900,fit:.7}),g.restore();let tex;return shaderScene(ctx,{frag:FRAG,init(gl){tex=texture(gl,cv,{filter:"linear",wrap:"repeat"})},uniforms:()=>({uText:tex,uA:linear(p.a),uB:linear(p.b),uC:linear(p.c),uBg:linear(p.bg),uSeg:p.segments,uSpeed:p.speed})})}};export{kaleidoscope_default as default};

package/dist/scenes/lava-lamp.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    wax: string;
+    wax2: string;
+    liquid: string;
+    liquid2: string;
+    /** How strongly the code shape pulls the wax together (0..1). */
+    form: number;
+    speed: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;