lostpage 0.0.0-stage → 0.2.0

package/dist/scenes/mesh-gradient.js

@@ -0,0 +1,34 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,NOISE,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 uC1, uC2, uC3, uC4, uBase;
+uniform float uSpeed, uGrain;
+${HASH}
+${NOISE}
+${POST}
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime * 0.08 * uSpeed;
+  // domain-warped coordinates give the soft, folded look of a mesh gradient
+  vec2 q = p + 0.35 * vec2(fbm(p * 1.2 + t), fbm(p * 1.2 - t + 3.0)) + uMouse * 0.08;
+  vec3 col = uBase;
+  vec2 c1 = vec2(sin(t * 1.3) * 0.6, cos(t * 1.1) * 0.35);
+  vec2 c2 = vec2(cos(t * 0.9 + 2.0) * 0.7, sin(t * 1.4 + 1.0) * 0.4);
+  vec2 c3 = vec2(sin(t * 0.7 + 4.0) * 0.5, cos(t * 0.8 + 3.0) * 0.45);
+  vec2 c4 = vec2(cos(t * 1.2 + 5.0) * 0.65, sin(t * 0.6 + 2.0) * 0.3);
+  col = mix(col, uC1, smoothstep(0.9, 0.0, length(q - c1)));
+  col = mix(col, uC2, smoothstep(0.85, 0.0, length(q - c2)));
+  col = mix(col, uC3, smoothstep(0.8, 0.0, length(q - c3)));
+  col = mix(col, uC4, smoothstep(0.7, 0.0, length(q - c4)) * 0.85);
+  col = toSRGB(col);
+  col += (hash12(fc + fract(uTime) * 61.0) - 0.5) * uGrain;
+  fragColor = vec4(col, 1.0);
+}
+`,mesh_gradient_default={id:"mesh-gradient",name:"Mesh Gradient",description:"A slow, living mesh gradient behind a frosted-glass card. The calm, polished 404 that drops straight into most modern product sites.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","gradient","glassmorphism","saas","minimal","modern","light"],layout:"center",copy:{eyebrow:"Error 404",title:"This page doesn't exist.",message:"It may have been moved or deleted. Check the address, or head back to safety.",actions:[{label:"Go to homepage",href:"/",variant:"primary"},{label:"Contact support",href:"/contact",variant:"secondary"}]},params:{c1:"#ff9ecb",c2:"#8ec5ff",c3:"#b9a6ff",c4:"#ffe0a8",base:"#f6f3ff",speed:1,grain:.035,card:!0},theme:{bg:"#f1ecff",fg:"#17132b",accent:"#17132b","accent-fg":"#fff","code-color":"#17132b"},presetName:"Dawn",presets:{ocean:{name:"Ocean",params:{c1:"#3bd6ff",c2:"#2b59ff",c3:"#8affd6",c4:"#e6f9ff",base:"#eaf6ff"},theme:{bg:"#e3f2ff",fg:"#071a33",accent:"#071a33","code-color":"#071a33"}},sunset:{name:"Sunset",params:{c1:"#ff6b3d",c2:"#ff3d8a",c3:"#ffb13d",c4:"#7a3dff",base:"#2a0f2a"},theme:{bg:"#3a1230",fg:"#fff3ec",accent:"#fff3ec","accent-fg":"#3a1230","code-color":"#fff3ec"}},forest:{name:"Forest",params:{c1:"#2bb673",c2:"#a3e635",c3:"#0ea5a3",c4:"#fef08a",base:"#ecfdf3"},theme:{bg:"#e6f8ee",fg:"#06281a",accent:"#06281a","code-color":"#06281a"}},midnight:{name:"Midnight",params:{c1:"#4f46e5",c2:"#9333ea",c3:"#0ea5e9",c4:"#1e1b4b",base:"#05030f"},theme:{bg:"#0a0820",fg:"#eef0ff",accent:"#eef0ff","accent-fg":"#0a0820","code-color":"#eef0ff"}},peach:{name:"Peach",params:{c1:"#ffb38a",c2:"#ffd6a5",c3:"#ff8fa3",c4:"#fff1e6",base:"#fff7f0"},theme:{bg:"#ffeee2",fg:"#3a1a0a",accent:"#3a1a0a","code-color":"#3a1a0a"}},mono:{name:"Graphite",params:{c1:"#d4d4d8",c2:"#a1a1aa",c3:"#f4f4f5",c4:"#71717a",base:"#e4e4e7",grain:.05},theme:{bg:"#e4e4e7",fg:"#18181b",accent:"#18181b","code-color":"#18181b"}}},css:`& .lp-overlay{gap:0}
+& .lp-head,& .lp-body{width:min(560px,92cqw)}
+& .lp-head{padding:clamp(16px,3.4cqw,36px) clamp(18px,3.6cqw,40px) 0;border-radius:28px 28px 0 0;background:var(--mg-card);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--mg-line);border-bottom:0}
+& .lp-body{padding:4px clamp(18px,3.6cqw,40px) clamp(16px,3.4cqw,36px);border-radius:0 0 28px 28px;background:var(--mg-card);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--mg-line);border-top:0;box-shadow:0 40px 80px -40px rgba(0,0,0,.35)}
+& .lp-code{--lp-code-size:clamp(44px,11cqw,128px);font-weight:700;letter-spacing:-.06em;opacity:.92}
+& .lp-title{--lp-title-size:clamp(18px,3cqw,36px);font-weight:650}
+&{--mg-card:color-mix(in srgb,var(--lp-bg) 42%,transparent);--mg-line:color-mix(in srgb,var(--lp-fg) 12%,transparent)}
+&.mg-nocard .lp-head,&.mg-nocard .lp-body{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}`,setup(ctx){let p=ctx.params;return p.card||ctx.root.classList.add("mg-nocard"),shaderScene(ctx,{frag:FRAG,scale:.6,uniforms:()=>({uC1:linear(p.c1),uC2:linear(p.c2),uC3:linear(p.c3),uC4:linear(p.c4),uBase:linear(p.base),uSpeed:p.speed,uGrain:p.grain})})}};export{mesh_gradient_default as default};

package/dist/scenes/metro-map.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    bg: string;
+    ink: string;
+    lines: string[];
+    label: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/metro-map.js

@@ -0,0 +1,30 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),metro_map_default={id:"metro-map",name:"Metro Map",description:"A transit map of the site. Trains run between real stations, and the one you wanted is closed.",category:"Urban",kind:"2d",motion:"live",tags:["svg","map","transit","subway","design","light","navigation"],layout:"none",copy:{title:"Station closed.",message:"Trains no longer stop at this page. Change here for another line.",actions:[{label:"Home",href:"/",variant:"primary"},{label:"Blog",href:"/blog",variant:"secondary"},{label:"About",href:"/about",variant:"secondary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{bg:"#f7f5f0",ink:"#1a1a1a",lines:["#e3262f","#0098d4","#00a651","#f5a623","#8a3ab9"],label:"Line"},theme:{bg:"#f7f5f0",fg:"#1a1a1a",accent:"#1a1a1a","accent-fg":"#fff"},presetName:"Day Map",presets:{mono:{name:"Monochrome",params:{bg:"#ffffff",ink:"#111111",lines:["#111111","#555555","#999999","#333333","#777777"]},theme:{bg:"#ffffff",fg:"#111",accent:"#111","accent-fg":"#fff"}},night:{name:"Night Service",params:{bg:"#11131a",ink:"#f2f2f2",lines:["#ff4d5a","#3bb8ff","#3dff8a","#ffc23b","#c07bff"]},theme:{bg:"#11131a",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#11131a"}},pastel:{name:"Pastel",params:{bg:"#fff8f2",ink:"#2a2230",lines:["#ff8fa3","#7bc8ff","#7bdcb5","#ffcf7a","#b9a3ff"]},theme:{bg:"#fff8f2",fg:"#2a2230",accent:"#2a2230","accent-fg":"#fff"}}},css:`
+& .mm{position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(260px,340px);gap:24px;padding:clamp(16px,3cqw,40px)}
+& .mm svg{width:100%;height:100%}
+& .mm .info{align-self:center;display:flex;flex-direction:column;gap:14px}
+& .mm .sign{display:flex;align-items:center;gap:12px;font:800 13px/1 var(--lp-font);letter-spacing:.14em;text-transform:uppercase}
+& .mm .roundel{width:42px;height:42px;border-radius:50%;border:8px solid var(--l0);position:relative;flex:none}
+& .mm .roundel::after{content:"";position:absolute;left:-14px;right:-14px;top:50%;height:10px;margin-top:-5px;background:#1f3a8a}
+& .mm h1{margin:0;font:800 clamp(28px,3.4cqw,46px)/1 var(--lp-font-display);letter-spacing:-.04em}
+& .mm p{margin:0;color:var(--lp-muted);line-height:1.55}
+& .mm nav{display:grid;gap:8px;margin-top:6px}
+& .mm nav a{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--lp-fg) 5%,transparent)}
+& .mm nav a:hover{background:color-mix(in srgb,var(--lp-fg) 10%,transparent)}
+& .mm nav a i{width:14px;height:14px;border-radius:50%;flex:none;border:3px solid currentColor}
+& .mm .closed{animation:mm-b 1.4s steps(1) infinite}
+@keyframes mm-b{50%{opacity:.25}}
+@container (max-width:760px){& .mm{grid-template-columns:1fr;grid-template-rows:1fr auto}}
+@media (prefers-reduced-motion:reduce){& .mm .closed{animation:none}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,L=p.lines,stations=c.actions.map((a,i)=>({name:a.label,href:a.href??"/",i})),lines=[{col:L[0],d:"M60 120 H360 Q400 120 400 160 V420 Q400 460 440 460 H760",stops:[[60,120],[220,120],[400,290],[600,460],[760,460]]},{col:L[1],d:"M120 520 L400 290 L640 100 H860",stops:[[120,520],[260,405],[400,290],[640,100],[860,100]]},{col:L[2],d:"M80 300 H880",stops:[[80,300],[240,300],[400,290],[560,300],[720,300],[880,300]]},{col:L[3],d:"M400 290 Q520 200 600 200 H700 Q740 200 760 180 L820 120",stops:[[600,200],[700,200]]}],closed=[820,120],wrap=document.createElement("div");wrap.className="mm",wrap.style.setProperty("--l0",L[0]);let labels=[[220,120,stations[1]?.name??"Blog"],[600,460,stations[2]?.name??"About"],[860,100,stations[3]?.name??"Contact"],[400,290,stations[0]?.name??"Home"]];wrap.innerHTML=`<svg viewBox="0 0 940 600" aria-hidden="true">
+      ${lines.map(l=>`<path d="${l.d}" fill="none" stroke="${l.col}" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>`).join("")}
+      <path d="M760 180 L820 120" stroke="${p.bg}" stroke-width="6" stroke-dasharray="6 8"/>
+      ${lines.flatMap(l=>l.stops.map(([x,y])=>`<circle cx="${x}" cy="${y}" r="8" fill="${p.bg}" stroke="${p.ink}" stroke-width="4"/>`)).join("")}
+      <circle cx="400" cy="290" r="18" fill="${p.bg}" stroke="${p.ink}" stroke-width="6"/>
+      ${labels.map(([x,y,s])=>`<text x="${x+16}" y="${y-16}" font-family="Inter,Arial,sans-serif" font-weight="700" font-size="18" fill="${p.ink}">${esc(s)}</text>`).join("")}
+      <g class="closed"><circle cx="${closed[0]}" cy="${closed[1]}" r="16" fill="#fff" stroke="#e3262f" stroke-width="6"/><path d="M${closed[0]-9} ${closed[1]-9} L${closed[0]+9} ${closed[1]+9} M${closed[0]+9} ${closed[1]-9} L${closed[0]-9} ${closed[1]+9}" stroke="#e3262f" stroke-width="5" stroke-linecap="round"/></g>
+      <text x="${closed[0]-10}" y="${closed[1]+44}" font-family="Inter,Arial,sans-serif" font-weight="800" font-size="20" fill="#e3262f" text-anchor="end">${esc(c.code)} \xB7 closed</text>
+      ${lines.map((_,i)=>`<rect data-train="${i}" width="26" height="12" rx="4" fill="${p.ink}"/>`).join("")}
+    </svg>
+    <div class="info"><div class="sign"><span class="roundel" aria-hidden="true"></span>Error ${esc(c.code)}</div>
+      <h1><span class="lp-sr">Error ${esc(c.code)}: </span>${esc(c.title)}</h1><p>${esc(c.message)}</p>
+      <nav aria-label="Other stations">${stations.map(s=>`<a href="${esc(s.href)}" style="color:${L[s.i%L.length]}"><i></i><span style="color:var(--lp-fg)">${esc(s.name)}</span></a>`).join("")}</nav></div>`,ctx.root.append(wrap),wrap.querySelectorAll("nav a").forEach(a=>a.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),ctx.navigate(a.getAttribute("href"),e))}));let svg=wrap.querySelector("svg"),paths=[...svg.querySelectorAll("path")].slice(0,lines.length),lens=paths.map(pa=>pa.getTotalLength()),trains=[...svg.querySelectorAll("[data-train]")];return{frame(t){trains.forEach((tr,i)=>{let L0=lens[i],k=(Math.sin(t*(.12+i*.03)+i*2)*.5+.5)*L0,pt=paths[i].getPointAtLength(k),p2=paths[i].getPointAtLength(Math.min(L0,k+1)),a=Math.atan2(p2.y-pt.y,p2.x-pt.x)*180/Math.PI;tr.setAttribute("transform",`translate(${pt.x-13} ${pt.y-6}) rotate(${a} 13 6)`)})},destroy(){wrap.remove()}}}};export{metro_map_default as default};

package/dist/scenes/milk-carton.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    carton: string;
+    accent: string;
+    ink: string;
+    brand: string;
+    photo: "page" | "cat" | "ghost";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/milk-carton.js

@@ -0,0 +1,53 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),PHOTOS={page:'<svg viewBox="0 0 80 96" aria-hidden="true"><rect x="10" y="6" width="60" height="84" rx="4" fill="#fff" stroke="currentColor" stroke-width="3"/><path d="M52 6v16h18" fill="none" stroke="currentColor" stroke-width="3"/><circle cx="31" cy="44" r="3.5" fill="currentColor"/><circle cx="49" cy="44" r="3.5" fill="currentColor"/><path d="M30 64q10-8 20 0" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M18 78h44" stroke="currentColor" stroke-width="2" opacity=".3"/></svg>',cat:'<svg viewBox="0 0 80 96" aria-hidden="true"><path d="M18 40 14 16l16 12h20l16-12-4 24c4 6 6 12 6 18 0 16-12 26-28 26S12 74 12 58c0-6 2-12 6-18z" fill="#fff" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle cx="31" cy="52" r="3.5" fill="currentColor"/><circle cx="49" cy="52" r="3.5" fill="currentColor"/><path d="M36 62h8l-4 4z" fill="currentColor"/><path d="M8 60h14M8 66h14M58 60h14M58 66h14" stroke="currentColor" stroke-width="2"/></svg>',ghost:'<svg viewBox="0 0 80 96" aria-hidden="true"><path d="M16 84V40a24 24 0 0 1 48 0v44l-8-6-8 6-8-6-8 6-8-6z" fill="#fff" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><ellipse cx="32" cy="44" rx="3.5" ry="5" fill="currentColor"/><ellipse cx="48" cy="44" rx="3.5" ry="5" fill="currentColor"/><ellipse cx="40" cy="60" rx="5" ry="6" fill="currentColor"/></svg>'},milk_carton_default={id:"milk-carton",name:"Missing",description:"A 3D milk carton with your page printed on the side: last seen at this URL. Drag it around to read the back.",category:"Playful",kind:"3d",motion:"interactive",tags:["css-3d","dom","funny","illustration","light","interactive","print"],layout:"right",codeInScene:!1,copy:{eyebrow:"Have you seen this page?",title:"Missing since your last click.",message:"It was last seen at this exact address. If you find it, please return it to the homepage.",actions:[{label:"Return to homepage",href:"/",variant:"primary"},{label:"File a report",href:"/contact",variant:"secondary"}]},params:{carton:"#ffffff",accent:"#1f6feb",ink:"#11203a",brand:"Lost & Found Dairy",photo:"page"},theme:{bg:"#dfeaf6",fg:"#11203a",accent:"#11203a","accent-fg":"#fff","code-color":"rgba(17,32,58,.14)"},presetName:"Classic Blue",presets:{banana:{name:"Banana Milk",params:{carton:"#fffbe6",accent:"#f2b705",ink:"#3a2a00"},theme:{bg:"#fff3b8",fg:"#3a2a00",accent:"#3a2a00","code-color":"rgba(58,42,0,.12)"}},matcha:{name:"Matcha",params:{carton:"#f4f8ee",accent:"#4a7c2a",ink:"#1a2e10",photo:"ghost"},theme:{bg:"#dcebcf",fg:"#1a2e10",accent:"#1a2e10","code-color":"rgba(26,46,16,.12)"}},blueberry:{name:"Blueberry",params:{carton:"#f6f2ff",accent:"#5b3cc4",ink:"#1f1247",photo:"cat"},theme:{bg:"#e2daff",fg:"#1f1247",accent:"#1f1247","code-color":"rgba(31,18,71,.12)"}},strawberry:{name:"Strawberry",params:{accent:"#e5486b",ink:"#3a0f1b"},theme:{bg:"#fbe3e8",fg:"#3a0f1b",accent:"#3a0f1b","code-color":"rgba(58,15,27,.12)"}},chocolate:{name:"Chocolate",params:{carton:"#fff7ee",accent:"#7a4a2a",ink:"#2b1709",photo:"cat"},theme:{bg:"#efe0cf",fg:"#2b1709",accent:"#2b1709","code-color":"rgba(43,23,9,.12)"}},oat:{name:"Oat Milk",params:{carton:"#f4eedf",accent:"#2f7d4a",ink:"#14301e",brand:"Oatly Lost",photo:"ghost"},theme:{bg:"#e4ead9",fg:"#14301e",accent:"#14301e","code-color":"rgba(20,48,30,.12)"}},night:{name:"Midnight Snack",params:{accent:"#5b7cff",ink:"#0c1233"},theme:{bg:"#0f1430",fg:"#eef1ff",accent:"#eef1ff","accent-fg":"#0f1430","code-color":"rgba(238,241,255,.1)"}}},css:`
+& .mc-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding-left:clamp(24px,12cqw,220px);perspective:1400px}
+& .mc{--w:clamp(150px,17cqw,250px);margin-top:calc(var(--w) * .5);--d:var(--w);--h:calc(var(--w) * 1.62);position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;
+  transform:rotateX(var(--rx,-8deg)) rotateY(var(--ry,-28deg));cursor:grab;touch-action:none}
+& .mc:active{cursor:grabbing}
+& .mc .f{position:absolute;inset:0;backface-visibility:hidden;background:var(--carton);color:var(--ink);overflow:hidden;
+  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);font-family:var(--lp-font)}
+& .mc .front{transform:translateZ(calc(var(--d)/2))}
+& .mc .back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
+& .mc .left{width:var(--d);transform:rotateY(-90deg) translateZ(calc(var(--d)/2))}
+& .mc .right{width:var(--d);transform:rotateY(90deg) translateZ(calc(var(--w) - var(--d)/2))}
+& .mc .bottom{height:var(--d);top:auto;bottom:0;transform:rotateX(-90deg) translateZ(calc(var(--d)/2));background:#d8dde3}
+& .mc .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,var(--sh,0)),rgba(0,0,0,calc(var(--sh,0)*.4)))}
+& .mc .roofA,& .mc .roofB{position:absolute;left:0;width:var(--w);height:calc(var(--d) * .7071);top:calc(var(--d) * -.7071);background:var(--carton);
+  transform-origin:50% 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);backface-visibility:hidden}
+& .mc .roofA{transform:translateZ(calc(var(--d)/2)) rotateX(45deg);background:linear-gradient(180deg,color-mix(in srgb,var(--carton) 88%,#000),var(--carton))}
+& .mc .roofB{transform:rotateY(180deg) translateZ(calc(var(--d)/2)) rotateX(45deg);background:linear-gradient(180deg,color-mix(in srgb,var(--carton) 80%,#000),color-mix(in srgb,var(--carton) 92%,#000))}
+& .mc .gl,& .mc .gr{position:absolute;left:0;top:calc(var(--d) * -.5);width:var(--d);height:calc(var(--d) * .5);clip-path:polygon(0 100%,50% 0,100% 100%);
+  background:color-mix(in srgb,var(--carton) 86%,#000)}
+& .mc .gl{transform:rotateY(-90deg) translateZ(calc(var(--d)/2))}
+& .mc .gr{transform:rotateY(90deg) translateZ(calc(var(--w) - var(--d)/2))}
+& .mc .ridge{position:absolute;left:0;top:calc(var(--d) * -.5 - var(--w) * .1);width:var(--w);height:calc(var(--w) * .1);background:var(--carton);
+  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -6px 8px -6px rgba(0,0,0,.25)}
+& .band{background:var(--accent);color:#fff;text-align:center;font-weight:800;letter-spacing:.14em;font-size:calc(var(--w) * .12);padding:.32em 0 .26em;line-height:1}
+& .brand{font-size:calc(var(--w) * .052);text-align:center;letter-spacing:.2em;text-transform:uppercase;padding:.7em .4em .3em;font-weight:700;color:var(--accent)}
+& .q{font-size:calc(var(--w) * .062);text-align:center;font-weight:700;margin:.35em .5em .5em;line-height:1.2}
+& .photo{width:52%;margin:0 auto;aspect-ratio:4/5;border:3px solid var(--ink);padding:5%;background:#f2f4f7;display:flex;align-items:center;justify-content:center;color:var(--ink);filter:grayscale(1) contrast(1.1)}
+& .photo svg{width:100%;height:100%}
+& .facts{font-size:calc(var(--w) * .05);line-height:1.45;padding:.7em .9em;margin:0}
+& .facts b{display:inline-block;min-width:5.6em}
+& .back .facts{font-size:calc(var(--w) * .052)}
+& .nf{border:2px solid var(--ink);margin:.8em;padding:.5em .6em;font-size:calc(var(--w) * .045);line-height:1.35}
+& .nf h3{margin:0 0 .2em;font-size:1.6em;font-weight:900;border-bottom:6px solid var(--ink);padding-bottom:.1em;letter-spacing:-.02em}
+& .nf div{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding:.18em 0}
+& .side-text{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;font-size:calc(var(--w) * .2);letter-spacing:.06em;color:var(--accent);opacity:.9;
+  display:flex;align-items:center;justify-content:center;height:100%;width:100%}
+& .mc-shadow{position:absolute;left:50%;bottom:calc(var(--h) * -.06);width:calc(var(--w) * 1.5);height:calc(var(--w) * .3);transform:translateX(-50%) translateZ(-1px) rotateX(90deg);
+  background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);pointer-events:none}
+& .lp-overlay{padding-right:clamp(24px,9cqw,160px)}
+& .lp-body,& .lp-head{max-width:min(520px,46cqw)}
+& .lp-code{--lp-code-size:clamp(90px,11cqw,170px);font-weight:800;letter-spacing:-.05em}
+@container (max-width:760px){& .mc-stage{justify-content:center;align-items:flex-start;padding:7cqh 0 0}& .mc{--w:clamp(110px,30cqw,170px)}
+  & .lp-overlay{justify-content:flex-end;padding-right:16px}& .lp-body,& .lp-head{max-width:none}& .lp-code{display:none}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,path=typeof location<"u"?location.pathname:"/missing",today=new Date().toLocaleDateString(void 0,{month:"short",day:"numeric",year:"numeric"}),stage=document.createElement("div");stage.className="mc-stage",stage.style.setProperty("--carton",p.carton),stage.style.setProperty("--accent",p.accent),stage.style.setProperty("--ink",p.ink),stage.setAttribute("aria-hidden","true"),stage.innerHTML=`<div class="mc">
+      <div class="f front"><div class="band">MISSING</div><div class="q">Have you seen this page?</div><div class="photo">${PHOTOS[p.photo]}</div>
+        <p class="facts"><b>Name:</b> ${esc(path.length>22?"\u2026"+path.slice(-21):path)}<br><b>Code:</b> ${esc(c.code)}<br><b>Last seen:</b> ${esc(today)}<br><b>Reward:</b> the homepage</p><div class="shade"></div></div>
+      <div class="f back"><div class="brand">${esc(p.brand)}</div><div class="nf"><h3>Page Facts</h3>
+        <div><span>Serving size</span><b>0 pages</b></div><div><span>Content</span><b>0%</b></div><div><span>Links that work</span><b>0g</b></div><div><span>Existential dread</span><b>404%</b></div>
+        <div style="border:0"><span>Store in your bookmarks</span></div></div><div class="shade"></div></div>
+      <div class="f left"><div class="side-text">${esc(c.code)}</div><div class="shade"></div></div>
+      <div class="f right"><div class="side-text">LOST</div><div class="shade"></div></div>
+      <div class="roofA"></div><div class="roofB"></div><div class="gl"></div><div class="gr"></div><div class="ridge"></div>
+      <div class="mc-shadow"></div></div>`,ctx.stage.append(stage),ctx.stage.removeAttribute("aria-hidden");let box=stage.querySelector(".mc"),faces=[...stage.querySelectorAll(".f")],ry=-28,rx=-8,vry=0,dragging=!1,lastX=0,lastY=0;box.addEventListener("pointerdown",e=>{dragging=!0,lastX=e.clientX,lastY=e.clientY,box.setPointerCapture(e.pointerId)}),box.addEventListener("pointermove",e=>{if(!dragging)return;let dx=e.clientX-lastX,dy=e.clientY-lastY;lastX=e.clientX,lastY=e.clientY,ry+=dx*.6,rx=Math.max(-35,Math.min(20,rx-dy*.3)),vry=dx*.6,ctx.invalidate()});let end=()=>dragging=!1;box.addEventListener("pointerup",end),box.addEventListener("pointercancel",end),stage.style.pointerEvents="auto";let apply=()=>{box.style.setProperty("--ry",`${ry}deg`),box.style.setProperty("--rx",`${rx}deg`);let yaw=ry*Math.PI/180,normals=[0,Math.PI,-Math.PI/2,Math.PI/2];faces.forEach((f,i)=>{if(i>3)return;let facing=Math.cos(yaw+normals[i]-.5);f.style.setProperty("--sh",String(Math.max(0,.32-facing*.32)))})};return apply(),{frame(t,dt){if(!dragging){vry*=Math.exp(-2.5*dt),ry+=vry*dt*10;let target=-28+Math.sin(t*.6)*10+ctx.pointer.sx*12,k=Math.abs(vry)<.5?1.2:0,wrapped=((ry-target)%360+540)%360-180;ry-=wrapped*Math.min(1,k*dt),rx+=(-8+ctx.pointer.sy*6-rx)*Math.min(1,dt*2)}apply()},destroy(){stage.remove()}}}};export{milk_carton_default as default};

package/dist/scenes/minimal.d.ts

@@ -0,0 +1,6 @@
+interface Params {
+    /** Show a thin rule between the code and the title. */
+    rule: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/minimal.js

@@ -0,0 +1,9 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var minimal_default={id:"minimal",name:"Minimal",description:"The classic: a large status code, one line of explanation and a way home. Nothing animates, nothing loads; it just works.",category:"Simple",kind:"2d",motion:"static",tags:["simple","minimal","clean","static","light","fast","classic"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"Sorry, we couldn\u2019t find the page you\u2019re looking for.",actions:[{label:"Go back home",href:"/",variant:"primary"},{label:"Contact support",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{rule:!1},theme:{bg:"#ffffff",fg:"#0f172a",accent:"#4f46e5","accent-fg":"#ffffff","code-color":"#4f46e5","code-size":"clamp(15px,1.4cqw,17px)","code-weight":"600",radius:"8px"},presetName:"Indigo",presets:{dark:{name:"Dark",theme:{bg:"#0b0f19",fg:"#f1f5f9",accent:"#818cf8","accent-fg":"#0b0f19","code-color":"#818cf8"}},emerald:{name:"Emerald",theme:{bg:"#f7faf9",fg:"#052e22",accent:"#059669","accent-fg":"#fff","code-color":"#059669"}},big:{name:"Big number",title:"Lost your way?",params:{rule:!0},theme:{bg:"#fafafa",fg:"#18181b",accent:"#18181b","accent-fg":"#fafafa","code-color":"#18181b","code-size":"clamp(72px,16cqw,180px)","code-weight":"800",radius:"999px"}},warm:{name:"Warm",theme:{bg:"#fbf6ef",fg:"#3b2414",accent:"#c2410c","accent-fg":"#fff","code-color":"#c2410c"}}},css:`
+& .lp-code{letter-spacing:.02em;line-height:1;margin-bottom:12px}
+& .lp-title{font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,5cqw,56px)}
+& .lp-message{font-size:clamp(14px,1.4cqw,17px)}
+& .lp-btn--primary{padding:12px 20px;font-weight:600}
+& .lp-btn--secondary{border:0;font-weight:600}
+&.lp-p-big .lp-code{letter-spacing:-.05em;line-height:.9}
+&.mn-rule .lp-code::after{content:"";display:block;width:56px;height:3px;margin:22px auto 0;background:var(--lp-accent);border-radius:2px}
+`,setup(ctx){ctx.root.classList.toggle("mn-rule",ctx.params.rule)}};export{minimal_default as default};

package/dist/scenes/mirage.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    skyTop: string;
+    skyHorizon: string;
+    sandLight: string;
+    sandDark: string;
+    sun: string;
+    haze: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/mirage.js

@@ -0,0 +1,70 @@
+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 uSkyTop, uSkyHorizon, uSandL, uSandD, uSun;
+uniform float uHaze;
+${HASH}
+${NOISE}
+${POST}
+
+float dune(float x, float seed, float amp, float base) {
+  return base + amp * (0.6 * sin(x * 2.1 + seed) + 0.3 * sin(x * 4.7 + seed * 2.0) + 0.1 * sin(x * 9.3 + seed * 3.0)) + (fbm(vec2(x * 1.5, seed)) - 0.5) * amp;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y + vec2(uMouse.x * 0.03, 0.0);
+  float t = uTime;
+  float horizon = -0.02;
+  // heat shimmer: wobble the image near the horizon
+  float shim = uHaze * smoothstep(0.25, 0.0, abs(p.y - horizon)) * 0.006;
+  vec2 q = p + vec2(sin(p.y * 160.0 + t * 6.0) * shim, sin(p.x * 30.0 + t * 3.0) * shim * 0.5);
+  vec3 col = mix(uSkyHorizon, uSkyTop, smoothstep(horizon, 0.55, q.y));
+  // sun
+  vec2 sp = vec2(0.42, 0.22);
+  float sd = length(q - sp);
+  col = mix(col, uSun * 1.6, smoothstep(0.06, 0.055, sd));
+  col += uSun * 0.35 * exp(-sd * 6.0);
+  // the mirage: the code floats above the horizon, wavering, with an inverted reflection below it
+  vec2 tuv = vec2(q.x * uRes.y / uRes.x + 0.5, (q.y - horizon - 0.02) * 2.2 + 0.08);
+  if (tuv.x > 0.0 && tuv.x < 1.0 && tuv.y > 0.0 && tuv.y < 1.0) {
+    float a = texture(uText, tuv + vec2(sin(tuv.y * 40.0 + t * 5.0) * 0.004, 0.0)).a;
+    col = mix(col, mix(uSkyHorizon, uSkyTop, 0.6) * 0.75, a * 0.55 * (0.75 + 0.25 * sin(t * 1.3)));
+  }
+  vec2 ruv = vec2(tuv.x, (horizon - q.y + 0.02) * 2.2 + 0.08);
+  if (q.y < horizon && ruv.x > 0.0 && ruv.x < 1.0 && ruv.y > 0.0 && ruv.y < 1.0) {
+    float a = texture(uText, ruv + vec2(sin(ruv.y * 60.0 + t * 7.0) * 0.008, 0.0)).a;
+    col = mix(col, uSkyHorizon * 1.05, a * 0.3);
+  }
+  // dunes, far to near
+  for (int i = 0; i < 4; i++) {
+    float fi = float(i);
+    float h = dune(q.x * (1.0 + fi * 0.4) + fi * 3.7, fi * 1.9, 0.03 + fi * 0.03, horizon - 0.02 - fi * 0.09);
+    if (q.y < h) {
+      float slope = dune(q.x * (1.0 + fi * 0.4) + fi * 3.7 + 0.01, fi * 1.9, 0.03 + fi * 0.03, 0.0) - dune(q.x * (1.0 + fi * 0.4) + fi * 3.7 - 0.01, fi * 1.9, 0.03 + fi * 0.03, 0.0);
+      vec3 sand = mix(uSandD, uSandL, smoothstep(-0.004, 0.006, -slope + (h - q.y) * 0.02));
+      sand = mix(sand, uSkyHorizon, 0.45 - fi * 0.13);
+      // wind ripples on the nearest dunes
+      sand *= 0.95 + 0.05 * sin((q.x * 3.0 + q.y) * (90.0 + fi * 40.0) + fbm(q * 8.0) * 6.0) * step(1.5, fi);
+      col = sand;
+    }
+  }
+  // a cactus silhouette
+  vec2 cp = q - vec2(-0.62, -0.25);
+  float trunk = step(abs(cp.x), 0.016) * step(0.0, cp.y) * step(cp.y, 0.22);
+  float arm1 = step(abs(cp.x + 0.04), 0.012) * step(0.08, cp.y) * step(cp.y, 0.16) + step(abs(cp.y - 0.08), 0.012) * step(-0.04, cp.x) * step(cp.x, 0.0);
+  float arm2 = step(abs(cp.x - 0.042), 0.012) * step(0.11, cp.y) * step(cp.y, 0.19) + step(abs(cp.y - 0.11), 0.012) * step(0.0, cp.x) * step(cp.x, 0.042);
+  col = mix(col, uSandD * 0.35, clamp(trunk + arm1 + arm2, 0.0, 1.0));
+  // tumbleweed rolling across
+  float tx = mod(t * 0.12, 2.4) - 1.2;
+  vec2 tw = q - vec2(tx * uRes.x / uRes.y * 0.9, -0.3 + abs(sin(t * 3.0)) * 0.03);
+  float ang = -t * 4.0;
+  tw = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)) * tw;
+  float r = length(tw);
+  float weed = smoothstep(0.035, 0.03, r) * smoothstep(0.35, 0.65, abs(sin(atan(tw.y, tw.x) * 7.0 + r * 120.0)));
+  col = mix(col, uSandD * 0.45, weed * 0.85);
+  col = toSRGB(aces(col * 1.05));
+  col += grain(fc, t) * 0.02;
+  fragColor = vec4(col, 1.0);
+}
+`,mirage_default={id:"mirage",name:"Mirage",description:"Rolling dunes under a white-hot sun. On the shimmering horizon the 404 wavers like a mirage, and a tumbleweed rolls past.",category:"Nature",kind:"2d",motion:"live",tags:["webgl","desert","dunes","heat","mirage","warm","nature"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Heat haze",title:"Just a mirage.",message:"You thought you saw the page out there. It was the heat. Water and the homepage are back this way.",actions:[{label:"Back to the oasis",href:"/",variant:"primary"}]},params:{skyTop:"#3d8fd6",skyHorizon:"#f2e3c4",sandLight:"#f2c48a",sandDark:"#b8743f",sun:"#fff6dc",haze:1},theme:{bg:"#d9a066",fg:"#2a1406",accent:"#2a1406","accent-fg":"#fff3e0"},presetName:"Midday",presets:{salt:{name:"Salt Flats",params:{skyTop:"#5fa8e6",skyHorizon:"#ffffff",sandLight:"#ffffff",sandDark:"#d9dce6",sun:"#fffbe6",haze:1.4},theme:{bg:"#eef2f6",fg:"#0f1a26",accent:"#0f1a26","accent-fg":"#fff"}},dusk:{name:"Dusk",params:{skyTop:"#3a2a6b",skyHorizon:"#ff9a6b",sandLight:"#d9805a",sandDark:"#5a2a3a",sun:"#ffd2a8"},theme:{bg:"#8a4a4a",fg:"#fff0e6",accent:"#fff0e6","accent-fg":"#3a1a1a"}},white:{name:"White Sands",params:{skyTop:"#7fb8e6",skyHorizon:"#f4f6f8",sandLight:"#ffffff",sandDark:"#c9cfd6",sun:"#ffffff"},theme:{bg:"#e9edf1",fg:"#1c2a36",accent:"#1c2a36","accent-fg":"#fff"}}},css:"& .lp-body{text-shadow:0 1px 14px rgba(255,240,220,.5)}",setup(ctx){let p=ctx.params,cv=document.createElement("canvas");cv.width=1024,cv.height=256;let g=cv.getContext("2d");drawFittedText(g,ctx.copy.code||"404",{width:1024,height:256,font:SANS,weight:800,fit:.9});let tex;return shaderScene(ctx,{frag:FRAG,init(gl){tex=texture(gl,cv,{filter:"linear"})},uniforms:()=>({uText:tex,uSkyTop:linear(p.skyTop),uSkyHorizon:linear(p.skyHorizon),uSandL:linear(p.sandLight),uSandD:linear(p.sandDark),uSun:linear(p.sun),uHaze:p.haze})})}};export{mirage_default as default};

package/dist/scenes/moon-landing.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    sky: string;
+    ground: string;
+    earth: boolean;
+    flag: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/moon-landing.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 moon_landing_default={id:"moon-landing",name:"Moon Landing",description:"Bootprints lead away from the lander across grey dust, past a planted 404 flag, and off the edge of the screen. Earth hangs in the black sky.",category:"Space",kind:"2d",motion:"live",tags:["canvas","moon","space","lunar","illustration","calm","dark"],layout:"top",copy:{eyebrow:"Tranquility Base",title:"One small step into nowhere.",message:"We came all this way and the page isn't here. The footprints lead back home.",actions:[{label:"Return to Earth",href:"/",variant:"primary"}]},params:{sky:"#000000",ground:"#8f8f8c",earth:!0,flag:"#ff4d2e"},theme:{bg:"#000000",fg:"#f2f2f0",accent:"#f2f2f0","accent-fg":"#000","code-color":"rgba(242,242,240,.14)"},presetName:"Earthrise",presets:{europa:{name:"Ice Moon",eyebrow:"Europa",title:"Frozen solid. No page.",params:{sky:"#020617",ground:"#c9d6e6",flag:"#ff3b5c",earth:!1}},mars:{name:"Red Planet",eyebrow:"Jezero Crater",title:"Not even a rover could find it.",params:{sky:"#d9a07a",ground:"#b5532c",earth:!1,flag:"#1f6feb"},theme:{bg:"#b5532c",fg:"#2a0f05",accent:"#2a0f05","accent-fg":"#fff","code-color":"rgba(42,15,5,.14)"}},blue:{name:"Blue Moon",params:{sky:"#020617",ground:"#6b7a99",flag:"#ffd23f"}}},css:"& .lp-overlay{padding-top:clamp(20px,5cqh,56px)}& .lp-code{--lp-code-size:clamp(64px,10cqw,140px)}& .lp-actions{margin-top:16px}",setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,bg,horizon=()=>c.h*.68,build=()=>{let sc=Math.min(2,ctx.dpr);bg=document.createElement("canvas"),bg.width=c.w*sc,bg.height=c.h*sc;let g=bg.getContext("2d");if(g.scale(sc,sc),g.fillStyle=p.sky,g.fillRect(0,0,c.w,c.h),p.sky==="#000000"||p.sky.startsWith("#02"))for(let i=0;i<400;i++)g.fillStyle=`rgba(255,255,255,${rnd()*.8})`,g.fillRect(rnd()*c.w,rnd()*horizon(),1.2,1.2);let H=horizon(),gg=g.createLinearGradient(0,H,0,c.h);gg.addColorStop(0,p.ground),gg.addColorStop(1,rgba(p.ground,.45)),g.fillStyle=gg,g.beginPath(),g.moveTo(0,c.h),g.lineTo(0,H+20),g.quadraticCurveTo(c.w/2,H-30,c.w,H+20),g.lineTo(c.w,c.h),g.fill();for(let i=0;i<26;i++){let y=H+20+rnd()**1.5*(c.h-H),x=rnd()*c.w,r=(6+rnd()*50)*((y-H)/(c.h-H)+.3);g.fillStyle="rgba(0,0,0,.18)",g.beginPath(),g.ellipse(x,y,r,r*.35,0,0,Math.PI*2),g.fill(),g.strokeStyle="rgba(255,255,255,.15)",g.lineWidth=2,g.beginPath(),g.ellipse(x,y,r,r*.35,0,Math.PI*.1,Math.PI*.9),g.stroke()}for(let i=0;i<c.w*(c.h-H)/30;i++)g.fillStyle=`rgba(${rnd()>.5?"255,255,255":"0,0,0"},${rnd()*.08})`,g.fillRect(rnd()*c.w,H+rnd()*(c.h-H),1.5,1.5);let lx=c.w*.24,ly=H+(c.h-H)*.32;for(let k=0;k<40;k++){let t=k/40,x=lx+t*(c.w*.85-lx)+Math.sin(t*9)*20,y=ly+t*(c.h*.95-ly)*.9,s=3+t*6;g.fillStyle="rgba(0,0,0,.25)",g.beginPath(),g.ellipse(x+(k%2?s:-s),y,s*.6,s*.28,-.3,0,Math.PI*2),g.fill()}};build();let lander=(g,x,y,s)=>{g.save(),g.translate(x,y),g.strokeStyle="#c9c9c9",g.lineWidth=s*.04;for(let dx of[-1,1])g.beginPath(),g.moveTo(dx*s*.3,-s*.3),g.lineTo(dx*s*.6,0),g.stroke(),g.fillStyle="#c9c9c9",g.fillRect(dx*s*.6-s*.08,-s*.02,s*.16,s*.04);g.fillStyle="#d9a441",g.fillRect(-s*.4,-s*.55,s*.8,s*.3),g.fillStyle="#e9e9e9",g.beginPath(),g.moveTo(-s*.3,-s*.55),g.lineTo(-s*.2,-s*.95),g.lineTo(s*.25,-s*.95),g.lineTo(s*.35,-s*.55),g.closePath(),g.fill(),g.fillStyle="#222",g.fillRect(-s*.08,-s*.85,s*.16,s*.12),g.restore()};return{resize(){c.reset(),build()},frame(t){let g=c.g;c.reset(),g.drawImage(bg,0,0,c.w,c.h);let H=horizon();if(p.earth){let ex=c.w*.78,ey=c.h*.26+Math.sin(t*.05)*4,R=Math.min(c.w,c.h)*.07,eg=g.createRadialGradient(ex-R*.4,ey-R*.4,R*.1,ex,ey,R);eg.addColorStop(0,"#9fd3ff"),eg.addColorStop(.6,"#2a6fd6"),eg.addColorStop(1,"#0a2a66"),g.fillStyle=eg,g.beginPath(),g.arc(ex,ey,R,0,Math.PI*2),g.fill(),g.fillStyle="rgba(255,255,255,.55)";for(let k=0;k<6;k++)g.fillRect(ex-R*.6+k*R*.22,ey-R*.2+Math.sin(k+t*.1)*R*.3,R*.3,R*.08);g.fillStyle="rgba(0,0,0,.75)",g.beginPath(),g.arc(ex+R*.45,ey+R*.1,R*1.02,0,Math.PI*2),g.fill()}lander(g,c.w*.22,H+(c.h-H)*.3,Math.min(c.w,c.h)*.16);let fx=c.w*.52,fy=H+(c.h-H)*.22,fh=Math.min(c.w,c.h)*.2;g.fillStyle="#ddd",g.fillRect(fx,fy-fh,3,fh),g.fillRect(fx,fy-fh,fh*.75,2);let fw=fh*.75;g.fillStyle=p.flag,g.beginPath(),g.moveTo(fx+3,fy-fh+2);for(let k=0;k<=10;k++)g.lineTo(fx+3+k/10*fw,fy-fh+2+Math.sin(k*.9)*3);for(let k=10;k>=0;k--)g.lineTo(fx+3+k/10*fw,fy-fh*.55+Math.sin(k*.9)*3);g.closePath(),g.fill(),g.fillStyle="#fff",g.font=`900 ${fh*.22}px Inter,Arial,sans-serif`,g.textAlign="center",g.fillText(ctx.copy.code,fx+3+fw/2,fy-fh*.69),g.fillStyle="rgba(0,0,0,.25)",g.beginPath(),g.ellipse(fx+fh*.4,fy+4,fh*.45,5,0,0,Math.PI*2),g.fill()}}}};export{moon_landing_default as default};

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

@@ -0,0 +1,15 @@
+interface Params {
+    neon: string;
+    neon2: string;
+    wall: string;
+    mortar: string;
+    /** Second line under the code, in the second tube colour. */
+    sub: string;
+    font: string;
+    /** 0 calm … 1 very flaky */
+    flicker: number;
+    /** Wall type: bricks, tiles or concrete */
+    surface: "brick" | "tile" | "concrete";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/neon-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 neon_sign_default={id:"neon-sign",name:"Neon Sign",description:"A buzzing neon sign on a back-alley wall. The tubes flicker and their light spills across the surface. Click it and it falters.",category:"Urban",kind:"2d",motion:"live",tags:["canvas","neon","night","urban","glow","retro","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Open 24/7, except this page",title:"Lights are on. Nobody's home.",message:"This page closed down a while ago. The rest of the street is still open.",actions:[{label:"Back to the main street",href:"/",variant:"primary"}]},params:{neon:"#ff2d95",neon2:"#2de2ff",wall:"#2a1a1d",mortar:"#130b0d",sub:"NOT FOUND",font:'"Inter",ui-sans-serif,system-ui,sans-serif',flicker:.5,surface:"brick"},theme:{bg:"#0d0709",accent:"#ff2d95","accent-fg":"#fff",fg:"#ffe9f3"},presetName:"Pink & Cyan",presets:{vegas:{name:"Vegas",eyebrow:"Welcome to fabulous",title:"What happens here stays lost.",params:{neon:"#ffcf3b",neon2:"#ff3b5c",sub:"NO JACKPOT",wall:"#24101a",mortar:"#120810"},theme:{accent:"#ffcf3b","accent-fg":"#1a0a00"}},arcade:{name:"Arcade",eyebrow:"Game over",params:{neon:"#3dff6b",neon2:"#b45cff",sub:"GAME OVER",surface:"tile",wall:"#141024",mortar:"#0a0814"},theme:{accent:"#3dff6b","accent-fg":"#02140a"}},pastel:{name:"Pastel Caf\xE9",params:{neon:"#ff7ab8",neon2:"#6bd6ff",sub:"SORRY!",surface:"tile",wall:"#e9e3f2",mortar:"#cfc6de",flicker:.2},theme:{bg:"#e9e3f2",fg:"#2a1a33",accent:"#ff4fa0","accent-fg":"#fff"}},bar:{name:"Dive Bar",eyebrow:"Last call",title:"Bar's closed. So is this page.",params:{neon:"#ff2a2a",neon2:"#2a6bff",sub:"CLOSED",wall:"#1a1410",mortar:"#0d0a08",flicker:.7},theme:{accent:"#ff2a2a","accent-fg":"#fff"}},motel:{name:"Motel",eyebrow:"No vacancy",title:"No rooms at this address.",params:{neon:"#ff3b1f",neon2:"#ffd23f",sub:"NO VACANCY",wall:"#1d1a24",mortar:"#0d0c12",font:'"Georgia",ui-serif,serif'},theme:{accent:"#ffd23f","accent-fg":"#1a0a00",bg:"#0b0a10"}},diner:{name:"Diner",eyebrow:"Kitchen closed",title:"We're all out of this page.",params:{neon:"#3dffb1",neon2:"#ff4fd8",sub:"EAT AT HOME",surface:"tile",wall:"#16302c",mortar:"#0a1615"},theme:{accent:"#3dffb1","accent-fg":"#002116",bg:"#081413"}},tokyo:{name:"Tokyo",eyebrow:"\u30DA\u30FC\u30B8\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093",params:{neon:"#ff2a3d",neon2:"#ffffff",sub:"\u898B\u3064\u304B\u308A\u307E\u305B\u3093",surface:"concrete",wall:"#1c1e24",mortar:"#101116"},theme:{accent:"#ff2a3d","accent-fg":"#fff",bg:"#0b0c10"}},blue:{name:"Blue Hour",params:{neon:"#4d7cff",neon2:"#b26bff",sub:"PAGE MISSING",wall:"#151a2a",mortar:"#0a0d16",flicker:.25},theme:{accent:"#7d9cff","accent-fg":"#050a1a",bg:"#080b14"}},broken:{name:"Busted",eyebrow:"Needs repair",title:"Half the letters are out. So is the page.",params:{neon:"#ff9a1f",neon2:"#ff4a4a",sub:"OUT OF ORDER",flicker:1},theme:{accent:"#ff9a1f","accent-fg":"#1a0a00"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,code=ctx.copy.code||"404",wall,sign,lit,geom={x:0,y:0,w:0,h:0};function buildWall(){let w=Math.ceil(c.w),h=Math.ceil(c.h);wall=document.createElement("canvas");let sc=Math.min(2,ctx.dpr);wall.width=w*sc,wall.height=h*sc;let g=wall.getContext("2d");if(g.scale(sc,sc),g.fillStyle=p.mortar,g.fillRect(0,0,w,h),p.surface==="brick")for(let y=0,row=0;y<h+34;y+=34,row++)for(let x=row%2?-92/2:0;x<w+92;x+=92){let v=.82+rnd()*.3;g.fillStyle=shade(p.wall,v),g.fillRect(x+3,y+3,86,28);for(let k=0;k<14;k++)g.fillStyle=`rgba(0,0,0,${rnd()*.18})`,g.fillRect(x+3+rnd()*82,y+3+rnd()*26,2+rnd()*6,1+rnd()*3)}else if(p.surface==="tile")for(let y=0;y<h+46;y+=46)for(let x=0;x<w+46;x+=46)g.fillStyle=shade(p.wall,.9+rnd()*.2),g.fillRect(x+2,y+2,42,42),g.fillStyle="rgba(255,255,255,.05)",g.fillRect(x+2,y+2,42,3);else{g.fillStyle=p.wall,g.fillRect(0,0,w,h);for(let k=0;k<w*h/60;k++)g.fillStyle=`rgba(${rnd()>.5?"255,255,255":"0,0,0"},${rnd()*.06})`,g.fillRect(rnd()*w,rnd()*h,1+rnd()*2,1+rnd()*2);g.strokeStyle="rgba(0,0,0,.35)",g.lineWidth=2;for(let x=0;x<w;x+=240)g.beginPath(),g.moveTo(x,0),g.lineTo(x,h),g.stroke()}let grd=g.createLinearGradient(0,0,0,h);grd.addColorStop(0,"rgba(0,0,0,.45)"),grd.addColorStop(.5,"rgba(0,0,0,.1)"),grd.addColorStop(1,"rgba(0,0,0,.6)"),g.fillStyle=grd,g.fillRect(0,0,w,h)}function buildSign(){let w=Math.ceil(c.w),h=Math.ceil(c.h),sc=Math.min(2,ctx.dpr),mk=()=>{let cv=document.createElement("canvas");return cv.width=w*sc,cv.height=h*sc,cv.getContext("2d").scale(sc,sc),cv};sign=mk(),lit=mk();let boxW=Math.min(w*.72,980),size=boxW/(code.length*.62);size=Math.min(size,h*.3);let cx=w/2,cy=h*.34,subSize=size*.2;geom={x:cx,y:cy,w:boxW,h:size};let draw=(g,lit2)=>{g.lineJoin="round",g.lineCap="round",g.textAlign="center",g.textBaseline="middle";let tube=(text,font,y,color,lw)=>{if(g.font=font,lit2){for(let[blur,alpha,width]of[[lw*9,.55,lw*1.2],[lw*3.5,.85,lw],[0,1,lw*.9]])g.shadowColor=color,g.shadowBlur=blur,g.strokeStyle=rgba(color,alpha),g.lineWidth=width,g.strokeText(text,cx,y);g.shadowBlur=0,g.strokeStyle="rgba(255,255,255,.85)",g.lineWidth=lw*.32,g.strokeText(text,cx,y)}else g.strokeStyle=rgba(color,.18),g.lineWidth=lw,g.strokeText(text,cx,y),g.strokeStyle="rgba(255,255,255,.08)",g.lineWidth=lw*.3,g.strokeText(text,cx,y)};tube(code,`400 ${size}px ${p.font}`,cy,p.neon,Math.max(3,size*.035)),tube(p.sub,`600 ${subSize}px ${p.font}`,cy+size*.62,p.neon2,Math.max(2,subSize*.09))};draw(sign.getContext("2d"),!1),draw(lit.getContext("2d"),!0)}let a1=1,a2=1,kick=0;ctx.on("pointerdown",()=>{kick=1.4});let build=()=>{c.reset(),buildWall(),buildSign()};build();let nextGlitch=2;return{resize:build,frame(t,dt){let g=c.g;c.reset(),kick=Math.max(0,kick-dt);let flaky=p.flicker+kick;dt===0?(a1=1,a2=1):(t>nextGlitch&&(nextGlitch=t+.8+rnd()*(6-flaky*4),a1=rnd()>.5?.15:.5),a1+=(1-a1)*Math.min(1,dt*(6+rnd()*20)),rnd()<.02*flaky&&(a1*=.3+rnd()*.5),a2=.9+.1*Math.sin(t*50)+(rnd()<.008*flaky?-.7:0),a2=Math.max(.15,a2)),g.globalCompositeOperation="source-over",g.drawImage(wall,0,0,c.w,c.h);let spill=(color,a,y,r)=>{let grd=g.createRadialGradient(geom.x,y,0,geom.x,y,r);grd.addColorStop(0,rgba(color,.4*a)),grd.addColorStop(.5,rgba(color,.12*a)),grd.addColorStop(1,rgba(color,0)),g.globalCompositeOperation="lighter",g.fillStyle=grd,g.fillRect(0,0,c.w,c.h)};spill(p.neon,a1,geom.y,geom.w*.75),spill(p.neon2,a2*.6,geom.y+geom.h*.62,geom.w*.45),g.globalCompositeOperation="source-over",g.drawImage(sign,0,0,c.w,c.h),g.globalCompositeOperation="lighter",g.save(),g.beginPath(),g.rect(0,0,c.w,geom.y+geom.h*.45),g.clip(),g.globalAlpha=a1,g.drawImage(lit,0,0,c.w,c.h),g.restore(),g.save(),g.beginPath(),g.rect(0,geom.y+geom.h*.45,c.w,c.h),g.clip(),g.globalAlpha=a2,g.drawImage(lit,0,0,c.w,c.h),g.restore(),g.globalAlpha=1,g.globalCompositeOperation="source-over"}}}};function shade(hex,v){let n=parseInt(hex.slice(1),16),r=Math.min(255,(n>>16&255)*v),g=Math.min(255,(n>>8&255)*v),b=Math.min(255,(n&255)*v);return`rgb(${r|0},${g|0},${b|0})`}export{neon_sign_default as default};

package/dist/scenes/newspaper.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    masthead: string;
+    headline: string;
+    paper: string;
+    ink: string;
+    spot: string;
+    spin: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/newspaper.js

@@ -0,0 +1,49 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),newspaper_default={id:"newspaper",name:"Extra! Extra!",description:"A front page spins onto the screen like an old movie montage: page vanishes without a trace, with witness quotes and a halftone photo.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","print","newspaper","vintage","funny","light","editorial"],layout:"none",copy:{eyebrow:"Late edition",title:"Page vanishes without a trace",message:"Authorities are baffled after a visitor clicked a link and found nothing on the other side. The homepage remains open for business.",actions:[{label:"Continue on the homepage",href:"/",variant:"primary"},{label:"Contact the newsroom",href:"/contact",variant:"secondary"}]},params:{masthead:"The Daily 404",headline:"",paper:"#f3eee2",ink:"#1b1a17",spot:"#b3261e",spin:!0},theme:{bg:"#2b2a27",fg:"#1b1a17"},presetName:"Morning Edition",presets:{gazette:{name:"Old Gazette",params:{masthead:"The 404 Gazette",paper:"#e8dcc0",ink:"#2b2014",spot:"#6b2a14"},theme:{bg:"#3a2d1c"}},tech:{name:"Tech Daily",title:"Startup's page pivots out of existence",message:"Sources close to the URL say the page 'moved fast and broke things', mostly itself.",params:{masthead:"The Daily Bug",paper:"#f4f6f8",ink:"#0f172a",spot:"#2563eb"},theme:{bg:"#0f172a"}},sports:{name:"Sports Final",title:"Page fumbles at the one-yard line",message:"A heartbreaking 404 for fans who had already clicked. The homepage remains undefeated.",params:{masthead:"Sports 404",paper:"#fffdf5",ink:"#111",spot:"#16a34a"},theme:{bg:"#14532d"}},tabloid:{name:"Tabloid",title:"Page abducted by aliens!",message:"Shocking new evidence suggests the page you requested was beamed up moments before you arrived.",params:{masthead:"The Weekly Lost",paper:"#ffffff",ink:"#111",spot:"#e3061a"},theme:{bg:"#ffd400"}},pink:{name:"Financial Pink",title:"Page value plunges to zero",message:"Markets react as the requested page delists overnight. Analysts recommend moving to the homepage.",params:{masthead:"The 404 Times",paper:"#fbe3d0",ink:"#262626",spot:"#0d5a8c"},theme:{bg:"#3a2f2a"}},noir:{name:"Noir",params:{masthead:"Evening Shadow",paper:"#d9d4c7",ink:"#0d0d0d",spot:"#0d0d0d",spin:!0},theme:{bg:"#0d0d0d"}}},css:`
+& .np-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3cqw,40px);perspective:1200px;overflow:hidden;
+  background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--lp-bg) 70%,#fff),var(--lp-bg) 70%)}
+& .np{width:min(980px,100%);max-height:100%;overflow:hidden;background:var(--paper);color:var(--ink);padding:clamp(16px,2.6cqw,36px) clamp(16px,3cqw,44px);
+  font-family:"Times New Roman",Georgia,ui-serif,serif;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);position:relative;transform-origin:50% 50%}
+& .np::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
+& .np-top{display:flex;justify-content:space-between;font:600 11px/1.2 var(--lp-font);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:6px}
+& .np-mast{font-family:"Old English Text MT","UnifrakturMaguntia","Engravers MT",Georgia,serif;font-size:clamp(34px,7cqw,84px);text-align:center;line-height:1;margin:.12em 0 .06em;font-weight:700;letter-spacing:-.01em}
+& .np-rule{border-top:3px double var(--ink);border-bottom:1px solid var(--ink);height:5px;margin:4px 0 10px}
+& .np-extra{display:flex;align-items:center;gap:14px;justify-content:center;margin:.2em 0 .1em}
+& .np-extra span{background:var(--spot);color:var(--paper);font:900 clamp(12px,1.4cqw,16px)/1 var(--lp-font);letter-spacing:.3em;padding:.45em .8em}
+& .np h1{font-size:clamp(30px,5.6cqw,70px);line-height:.95;text-align:center;margin:.1em 0 .18em;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
+& .np .deck{text-align:center;font-style:italic;font-size:clamp(14px,1.6cqw,19px);margin:0 auto .8em;max-width:60ch}
+& .np-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(12px,2cqw,26px);border-top:1px solid var(--ink);padding-top:12px}
+& .np-cols p{margin:0 0 .7em;font-size:clamp(11.5px,1.05cqw,14px);line-height:1.42;text-align:justify;hyphens:auto}
+& .np-cols p:first-of-type::first-letter{float:left;font-size:3.4em;line-height:.8;padding:.06em .08em 0 0;font-weight:900}
+& .np-photo{aspect-ratio:4/3;border:1px solid var(--ink);margin-bottom:6px;position:relative;overflow:hidden;
+  background:radial-gradient(circle at 50% 45%,var(--paper) 0 28%,transparent 29%),
+  radial-gradient(var(--ink) 34%,transparent 36%) 0 0/7px 7px,
+  linear-gradient(180deg,color-mix(in srgb,var(--ink) 15%,transparent),color-mix(in srgb,var(--ink) 55%,transparent))}
+& .np-photo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 clamp(34px,6cqw,76px)/1 var(--lp-font);color:var(--ink)}
+& .np-cap{font:italic 11px/1.3 var(--lp-font);margin-bottom:10px;opacity:.8}
+& .np-q{font-size:clamp(15px,1.7cqw,20px)!important;line-height:1.2!important;font-weight:700;text-align:left!important;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:.5em 0}
+& .np a{color:var(--spot);font-weight:700}
+& .np-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
+& .np-act a{font:700 12px/1 var(--lp-font);text-transform:uppercase;letter-spacing:.12em;padding:10px 14px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;background:transparent}
+& .np-act a:first-child{background:var(--ink);color:var(--paper)}
+& .np.spin{animation:np-spin 1.5s cubic-bezier(.17,.84,.29,1.06) both}
+@keyframes np-spin{from{transform:rotate(-1080deg) scale(.02)}to{transform:rotate(-1.2deg) scale(1)}}
+& .np.idle{transform:rotate(-1.2deg)}
+@container (max-width:760px){& .np-cols{grid-template-columns:1fr}& .np-cols>div:nth-child(3){display:none}}
+@media (prefers-reduced-motion:reduce){& .np.spin{animation:none;transform:rotate(-1.2deg)}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,path=typeof location<"u"?location.pathname:"/missing",date=new Date().toLocaleDateString(void 0,{weekday:"long",month:"long",day:"numeric",year:"numeric"}),wrap=document.createElement("div");wrap.className="np-wrap",wrap.style.setProperty("--paper",p.paper),wrap.style.setProperty("--ink",p.ink),wrap.style.setProperty("--spot",p.spot);let acts=c.actions.map(a=>`<a href="${esc(a.href??"/")}">${esc(a.label)}</a>`).join("");wrap.innerHTML=`<article class="np ${p.spin?"spin":"idle"}">
+      <div class="np-top"><span>${esc(date)}</span><span>Vol. ${esc(c.code)} \xB7 No. ${esc(c.code)}</span><span>Price: one click</span></div>
+      <div class="np-mast">${esc(p.masthead)}</div><div class="np-rule"></div>
+      <div class="np-extra"><span>EXTRA</span><span>${esc(c.eyebrow||"Breaking")}</span></div>
+      <h1><span class="lp-sr">Error ${esc(c.code)}: </span>${esc(p.headline||c.title)}</h1>
+      <p class="deck">${esc(c.message)}</p>
+      <div class="np-cols">
+        <div><div class="np-photo"><b>${esc(c.code)}</b></div><div class="np-cap">The scene at <em>${esc(path)}</em>, moments after the disappearance.</div>
+          <p>It was an ordinary visit until the link was clicked. Witnesses describe a brief loading spinner, then nothing at all. The address was correct, the request polite, the server awake.</p></div>
+        <div><p>"I've been browsing for years and I've never seen anything like it," said one visitor, still holding the back button. "One second it's there, the next it's a four-oh-four."</p>
+          <p class="np-q">"The page you are looking for does not exist, may have moved, or was never here."</p>
+          <p>Engineers confirmed the page is not hiding in the cache.</p></div>
+        <div><p>Readers are urged to remain calm. Every other page is accounted for and the homepage reports no damage.</p>
+          <p>Anyone with information is asked to return to the front page, where a full investigation continues.</p>
+          <div class="np-act">${acts}</div></div>
+      </div></article>`,ctx.root.append(wrap),wrap.querySelectorAll(".np-act a").forEach(a=>a.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),ctx.navigate(a.getAttribute("href"),e))}));let article=wrap.querySelector(".np");return{frame(t){t<1.6&&!ctx.reducedMotion||(article.classList.remove("spin"),article.style.transform=`rotate(${-1.2+ctx.pointer.sx*1.2}deg) translate(${ctx.pointer.sx*6}px, ${-ctx.pointer.sy*4}px)`)},destroy(){wrap.remove()}}}};export{newspaper_default as default};

package/dist/scenes/nixie.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    glow: string;
+    core: string;
+    bg: string;
+    table: string;
+    metal: string;
+    /** Seconds between anti-poisoning roll cycles. */
+    roll: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/nixie.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 nixie_default={id:"nixie",name:"Nixie Tubes",description:"Warm cold-cathode tubes. The digits roll like a slot machine before settling on the error, and every glass envelope catches the light.",category:"Signs & Displays",kind:"2d",motion:"live",tags:["canvas","nixie","vintage","glow","electronics","warm","dark"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Readout",title:"The tubes are warm. The page is cold.",message:"Our instruments read 404, no matter how many times we let them roll. Let's take you somewhere that exists.",actions:[{label:"Return home",href:"/",variant:"primary"}]},params:{glow:"#ff7a1f",core:"#ffe1b8",bg:"#0b0806",table:"#1a120d",metal:"#5a4a3c",roll:11},theme:{bg:"#0b0806",fg:"#ffe9d2",accent:"#ff8a33","accent-fg":"#1a0a00"},presetName:"Neon Orange",presets:{ice:{name:"Cold Cathode",params:{glow:"#5ac8ff",core:"#e6f7ff",bg:"#03070c",table:"#08111c",metal:"#3a4a5a"},theme:{bg:"#03070c",accent:"#5ac8ff","accent-fg":"#03070c"}},magenta:{name:"Magenta",params:{glow:"#ff3bd4",core:"#ffe6f8",bg:"#0a0309",table:"#160915",metal:"#4a3550"},theme:{bg:"#0a0309",accent:"#ff7ae0","accent-fg":"#1a0016"}},white:{name:"Incandescent",params:{glow:"#ffd9a8",core:"#ffffff",bg:"#100b07",table:"#2a1d12",metal:"#6b5a48"},theme:{bg:"#100b07",accent:"#ffe6c7","accent-fg":"#1a0d00"}},argon:{name:"Argon",params:{glow:"#8c6bff",core:"#efe6ff",bg:"#07060d",table:"#120f1d",metal:"#4a4560"},theme:{bg:"#07060d",accent:"#b9a3ff","accent-fg":"#0d0820"}},vfd:{name:"VFD Green",eyebrow:"Display",params:{glow:"#2bffc6",core:"#e6fff7",bg:"#020807",table:"#06130f",metal:"#2f4a42"},theme:{bg:"#020807",accent:"#2bffc6","accent-fg":"#002116"}},ruby:{name:"Ruby",params:{glow:"#ff2a3a",core:"#ffd9dc",bg:"#0a0405",table:"#160a0b",metal:"#4d3536"},theme:{bg:"#0a0405",accent:"#ff5864","accent-fg":"#1a0004"}},brass:{name:"Brass & Walnut",params:{glow:"#ff9a3c",core:"#fff0d6",bg:"#140c06",table:"#3a2412",metal:"#b08a4a"},theme:{bg:"#140c06",accent:"#ffb066","accent-fg":"#1a0c00"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),code=[...ctx.copy.code||"404"].slice(0,6),n=code.length,shown=code.map(()=>"0"),settleAt=code.map((_,i)=>1.4+i*.45),nextRoll=p.roll,rollStart=-10,hoverIdx=-1,layout={tw:0,th:0,gap:0,x0:0,y0:0},measure=()=>{let tw=Math.min(c.w*.62/n,190,c.h*.26),th=tw*1.78,gap=tw*.16,total=n*tw+(n-1)*gap;layout={tw,th,gap,x0:(c.w-total)/2,y0:c.h*.36-th/2}};measure(),ctx.on("pointermove",e=>{let r=ctx.root.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,{tw,th,gap,x0,y0}=layout;if(hoverIdx=-1,y>y0&&y<y0+th)for(let i=0;i<n;i++)x>x0+i*(tw+gap)&&x<x0+i*(tw+gap)+tw&&(hoverIdx=i)});function tube(g,x,y,tw,th,digit,t,flick){let r=tw/2,bodyTop=y+r;g.save(),g.beginPath(),g.moveTo(x,y+th),g.lineTo(x,bodyTop),g.arc(x+r,bodyTop,r,Math.PI,0),g.lineTo(x+tw,y+th),g.closePath();let glass=g.createLinearGradient(x,0,x+tw,0);glass.addColorStop(0,"rgba(255,255,255,.07)"),glass.addColorStop(.5,"rgba(40,28,20,.35)"),glass.addColorStop(1,"rgba(255,255,255,.05)"),g.fillStyle=glass,g.fill(),g.clip(),g.strokeStyle=rgba(p.metal,.35),g.lineWidth=.7;let hs=tw/11;for(let row=0;row*hs*.86<th;row++)for(let col=-1;col*hs<tw+hs;col++){let hx=x+col*hs+(row%2?hs/2:0),hy=bodyTop-r*.4+row*hs*.86;g.beginPath();for(let k=0;k<6;k++){let a=Math.PI/3*k+Math.PI/6,px=hx+Math.cos(a)*hs*.5,py=hy+Math.sin(a)*hs*.5;k===0?g.moveTo(px,py):g.lineTo(px,py)}g.closePath(),g.stroke()}let fs=tw*.95,cx=x+tw/2,cy=y+th*.53;g.textAlign="center",g.textBaseline="middle",g.lineJoin="round",g.font=`300 ${fs}px "Helvetica Neue",Arial,sans-serif`;for(let d=0;d<10;d++)g.strokeStyle=rgba(p.metal,.22+d*.015),g.lineWidth=Math.max(1,fs*.022),g.strokeText(String(d),cx+(d-5)*.4,cy+(d-5)*.3);let glow=flick;g.globalCompositeOperation="lighter";for(let[blur,alpha,lw]of[[fs*.5,.35,fs*.06],[fs*.16,.75,fs*.04],[fs*.04,1,fs*.028]])g.shadowColor=p.glow,g.shadowBlur=blur,g.strokeStyle=rgba(p.glow,alpha*glow),g.lineWidth=lw,g.strokeText(digit,cx,cy);g.shadowBlur=0,g.strokeStyle=rgba(p.core,.9*glow),g.lineWidth=fs*.012,g.strokeText(digit,cx,cy);let haze=g.createRadialGradient(cx,cy,0,cx,cy,tw);haze.addColorStop(0,rgba(p.glow,.16*glow)),haze.addColorStop(1,rgba(p.glow,0)),g.fillStyle=haze,g.fillRect(x,y,tw,th),g.globalCompositeOperation="source-over",g.restore(),g.save(),g.globalCompositeOperation="lighter";let hl=g.createLinearGradient(x+tw*.12,0,x+tw*.26,0);hl.addColorStop(0,"rgba(255,255,255,0)"),hl.addColorStop(.5,"rgba(255,255,255,.16)"),hl.addColorStop(1,"rgba(255,255,255,0)"),g.fillStyle=hl,g.fillRect(x+tw*.12,bodyTop-r*.3,tw*.14,th-r*.8),g.fillStyle="rgba(255,255,255,.07)",g.fillRect(x+tw*.78,bodyTop,tw*.05,th-r*1.4),g.fillStyle="rgba(255,255,255,.12)",g.beginPath(),g.arc(x+r,y+2,tw*.035,0,Math.PI*2),g.fill(),g.restore();let sy=y+th,sg=g.createLinearGradient(0,sy,0,sy+tw*.32);sg.addColorStop(0,shade(p.metal,1.1)),sg.addColorStop(1,shade(p.metal,.45)),g.fillStyle=sg,roundRect(g,x-tw*.06,sy-tw*.05,tw*1.12,tw*.32,tw*.06),g.fill(),g.fillStyle="rgba(255,255,255,.18)",g.fillRect(x-tw*.04,sy-tw*.04,tw*1.08,1.2)}return{resize(){c.reset(),measure()},frame(t){let g=c.g;c.reset(),g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h);let{tw,th,gap,x0,y0}=layout,tableY=y0+th+tw*.27,tg=g.createLinearGradient(0,tableY,0,c.h);tg.addColorStop(0,shade(p.table,1.25)),tg.addColorStop(1,shade(p.table,.5)),g.fillStyle=tg,g.fillRect(0,tableY,c.w,c.h-tableY);let amb=g.createRadialGradient(c.w/2,y0+th*.55,0,c.w/2,y0+th*.55,c.w*.5);amb.addColorStop(0,rgba(p.glow,.13)),amb.addColorStop(1,rgba(p.glow,0)),g.fillStyle=amb,g.fillRect(0,0,c.w,c.h),!ctx.reducedMotion&&t>nextRoll&&(rollStart=t,nextRoll=t+p.roll);for(let i=0;i<n;i++){let settled=ctx.reducedMotion||t>settleAt[i],rolling=!ctx.reducedMotion&&t-rollStart<1.1+i*.25,target=code[i];(!settled||rolling||hoverIdx===i)&&/\d/.test(target)?Math.floor(t*18+i*3)!==Math.floor((t-1/60)*18+i*3)&&(shown[i]=String(Math.floor(Math.random()*10))):shown[i]=target;let flick=ctx.reducedMotion?1:.93+.07*Math.sin(t*90+i*7)*Math.sin(t*13+i);tube(g,x0+i*(tw+gap),y0,tw,th,shown[i],t,flick)}g.save(),g.globalAlpha=.18,g.translate(0,tableY*2+tw*.06),g.scale(1,-1),g.beginPath(),g.rect(0,tableY,c.w,th),g.clip(),g.drawImage(c.canvas,0,0,c.canvas.width,c.canvas.height,0,0,c.w,c.h),g.restore();let fade=g.createLinearGradient(0,tableY,0,tableY+th*.6);fade.addColorStop(0,rgba(shade(p.table,1.25),0)),fade.addColorStop(1,shade(p.table,.8)),g.fillStyle=fade,g.fillRect(0,tableY,c.w,th*.6+2)}}}};function shade(hex,v){if(hex.startsWith("rgb"))return hex;let n=parseInt(hex.slice(1),16),r=Math.min(255,(n>>16&255)*v),g=Math.min(255,(n>>8&255)*v),b=Math.min(255,(n&255)*v);return`rgb(${r|0},${g|0},${b|0})`}function roundRect(g,x,y,w,h,r){g.beginPath(),g.moveTo(x+r,y),g.arcTo(x+w,y,x+w,y+h,r),g.arcTo(x+w,y+h,x,y+h,r),g.arcTo(x,y+h,x,y,r),g.arcTo(x,y,x+w,y,r),g.closePath()}export{nixie_default as default};

package/dist/scenes/no-signal.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    /** Channels to cycle through: static, bars, blue, nosignal. */
+    channels: ("static" | "bars" | "blue" | "nosignal")[];
+    /** Seconds per channel when idle; 0 = only change on click. */
+    hold: number;
+    curvature: number;
+    osd: string;
+    phosphor: "color" | "green" | "amber";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/no-signal.js

@@ -0,0 +1,82 @@
+import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,POST,texture,updateTexture}from"../chunks/chunk-SH72TE6I.js";import{MONO}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var MODES={static:0,bars:1,blue:2,nosignal:3},FRAG=`
+uniform sampler2D uOSD;
+uniform float uMode, uSwitch, uCurve, uPhos;
+${HASH}
+${POST}
+
+vec3 bars(vec2 uv) {
+  vec3 top[7] = vec3[7](vec3(.75), vec3(.75,.75,0.), vec3(0.,.75,.75), vec3(0.,.75,0.), vec3(.75,0.,.75), vec3(.75,0.,0.), vec3(0.,0.,.75));
+  int i = int(clamp(floor(uv.x * 7.0), 0.0, 6.0));
+  if (uv.y > 0.33) return top[i];
+  if (uv.y > 0.25) {
+    vec3 mid[7] = vec3[7](vec3(0.,0.,.75), vec3(.07), vec3(.75,0.,.75), vec3(.07), vec3(0.,.75,.75), vec3(.07), vec3(.75));
+    return mid[i];
+  }
+  float x = uv.x;
+  if (x < 0.18) return vec3(0.0, 0.13, 0.3);
+  if (x < 0.36) return vec3(1.0);
+  if (x < 0.54) return vec3(0.2, 0.0, 0.4);
+  if (x < 0.71) return vec3(0.07);
+  if (x < 0.76) return vec3(0.03);
+  if (x < 0.81) return vec3(0.07);
+  if (x < 0.86) return vec3(0.11);
+  return vec3(0.07);
+}
+
+vec3 staticNoise(vec2 uv, vec2 fc, float t) {
+  float line = floor(fc.y / 2.0);
+  float jitter = (hash12(vec2(line, floor(t * 30.0))) - 0.5) * 6.0;
+  float n = hash12(floor(vec2(fc.x + jitter, fc.y) / 1.5) + floor(t * 60.0) * 17.31);
+  float roll = smoothstep(0.0, 0.15, fract(uv.y * 0.6 - t * 0.35)) * 0.25 + 0.75;
+  return vec3(n * roll);
+}
+
+vec3 content(vec2 uv, vec2 fc, float t) {
+  if (uMode < 0.5) return staticNoise(uv, fc, t);
+  if (uMode < 1.5) return bars(uv) + (hash12(fc + t) - 0.5) * 0.04;
+  if (uMode < 2.5) return vec3(0.02, 0.05, 0.75) + (hash12(fc * 0.5 + t) - 0.5) * 0.02;
+  return vec3(0.0);
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  float t = uTime;
+  // barrel distortion
+  vec2 c = uv * 2.0 - 1.0;
+  c *= 1.0 + uCurve * dot(c.yx, c.yx) * vec2(0.06, 0.09);
+  vec2 cuv = c * 0.5 + 0.5;
+  float edge = smoothstep(0.0, 0.006, cuv.x) * smoothstep(1.0, 0.994, cuv.x) * smoothstep(0.0, 0.008, cuv.y) * smoothstep(1.0, 0.992, cuv.y);
+
+  // channel switch: vertical roll + static burst
+  float sw = clamp(uSwitch / 0.55, 0.0, 1.0);
+  vec2 suv = cuv;
+  suv.y = fract(suv.y + (1.0 - sw) * (1.0 - sw) * 1.7);
+  vec3 col = content(suv, fc, t);
+  vec4 osd = texture(uOSD, suv);
+  col = mix(col, osd.rgb, osd.a);
+  col = mix(staticNoise(cuv, fc, t), col, smoothstep(0.0, 1.0, sw));
+
+  // horizontal sync wobble
+  col *= 0.94 + 0.06 * sin(cuv.y * 900.0 + t * 8.0);
+  // scanlines + aperture grille
+  float scan = 0.72 + 0.28 * sin(fc.y * 3.14159 * 0.5) * sin(fc.y * 3.14159 * 0.5);
+  vec3 mask = vec3(1.0);
+  float m = mod(fc.x, 3.0);
+  mask = m < 1.0 ? vec3(1.0, 0.75, 0.75) : m < 2.0 ? vec3(0.75, 1.0, 0.75) : vec3(0.75, 0.75, 1.0);
+  col *= scan * mix(vec3(1.0), mask, 0.6);
+  // phosphor tint for mono monitors
+  float lum = dot(col, vec3(0.3, 0.59, 0.11));
+  if (uPhos > 0.5 && uPhos < 1.5) col = vec3(0.2, 1.0, 0.35) * lum * 1.3;
+  if (uPhos > 1.5) col = vec3(1.0, 0.65, 0.1) * lum * 1.3;
+  // glow, flicker, vignette
+  col += col * col * 0.35;
+  col *= 0.97 + 0.03 * sin(t * 120.0);
+  col *= mix(0.45, 1.0, vignette(cuv, 0.35));
+  col *= edge;
+  fragColor = vec4(col, 1.0);
+}
+`,no_signal_default={id:"no-signal",name:"No Signal",description:"An old CRT television: static, test cards and blue VCR screens. Click to change the channel.",category:"Retro Tech",kind:"2d",motion:"live",tags:["webgl","crt","tv","static","retro","vhs","interactive"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Channel 404",title:"We've lost the signal.",message:"This channel isn't broadcasting. Click the screen to flip channels, or tune back in to the homepage.",actions:[{label:"Tune in to home",href:"/",variant:"primary"}]},params:{channels:["static","bars","blue","nosignal"],hold:3.5,curvature:1,osd:"#3dff6e",phosphor:"color"},theme:{bg:"#000000",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#000","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Channel Surf",presets:{flat:{name:"Flat Panel",params:{curvature:0,channels:["nosignal","bars"]}},surf:{name:"Fast Surf",params:{hold:1.4}},static:{name:"Static",params:{channels:["static"],hold:0}},"test-card":{name:"Test Card",eyebrow:"Please stand by",title:"Technical difficulties.",params:{channels:["bars"],hold:0}},vcr:{name:"VCR Blue",eyebrow:"Tracking",title:"Nothing recorded here.",message:"The tape for this page is blank. Rewind to the homepage.",params:{channels:["blue"],hold:0,osd:"#ffffff"}},green:{name:"Green Monitor",params:{phosphor:"green",channels:["nosignal","static","bars"]},theme:{accent:"#3dff6e",fg:"#c9ffd6"}},amber:{name:"Amber Monitor",params:{phosphor:"amber",channels:["nosignal","static","bars"]},theme:{accent:"#ffb000",fg:"#ffe4b0"}}},css:`& .lp-body{background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 30%);padding:28px 32px 6px;border-radius:14px}
+& .lp-title{letter-spacing:-.01em;text-transform:uppercase;font-size:clamp(24px,3.6cqw,44px)}
+& .lp-message{color:rgba(255,255,255,.75)}
+& .lp-eyebrow{color:#fff;opacity:.8}`,setup(ctx){let p=ctx.params,channels=p.channels.length?p.channels:["static"],ch=0,switchedAt=-10,nowT=0,osd=document.createElement("canvas"),tex=null,gl,code=ctx.copy.code||"404";function drawOSD(mode,t){osd.width=1024,osd.height=768;let g=osd.getContext("2d");if(g.clearRect(0,0,1024,768),g.font=`700 44px ${MONO}`,g.textBaseline="top",g.shadowColor="rgba(0,0,0,.8)",g.shadowOffsetX=3,g.shadowOffsetY=3,g.fillStyle=p.osd,g.textAlign="right",g.fillText(`CH ${code}`,954,60),g.textAlign="left",mode==="blue")g.fillStyle="#fff",g.fillText("PLAY \u25B6",70,60),g.font=`700 32px ${MONO}`,g.fillText(`SP  0:${code.slice(0,2)}:${code.slice(-2)}`,70,658),g.textAlign="center",g.font=`700 150px ${MONO}`,g.fillText(code,1024/2,768*.33);else if(mode==="nosignal"){let bx=(Math.sin(t*.7)*.5+.5)*604+40,by=(Math.sin(t*.53+1)*.5+.5)*508+40;g.strokeStyle=p.osd,g.lineWidth=4,g.strokeRect(bx,by,340,120),g.textAlign="center",g.font=`700 46px ${MONO}`,g.fillText("NO SIGNAL",bx+170,by+36)}else mode==="bars"?(g.textAlign="center",g.fillStyle="#000",g.shadowColor="transparent",g.fillRect(1024/2-170,768*.36,340,120),g.fillStyle="#fff",g.font=`700 92px ${MONO}`,g.fillText(code,1024/2,768*.37)):(g.textAlign="center",g.font=`700 64px ${MONO}`,g.fillText(code,1024/2,768*.36));tex&&updateTexture(gl,tex,osd,{filter:"linear"})}let change=()=>{ch=(ch+1)%channels.length,switchedAt=nowT,drawOSD(channels[ch],nowT)};ctx.on("pointerdown",e=>{e.target.closest("a,button")||change()});let scene=shaderScene(ctx,{frag:FRAG,adaptive:!1,init(g){gl=g,drawOSD(channels[0],0),tex=texture(gl,osd,{filter:"linear"})},uniforms:t=>({uOSD:tex,uMode:MODES[channels[ch]],uSwitch:t-switchedAt,uCurve:p.curvature,uPhos:p.phosphor==="green"?1:p.phosphor==="amber"?2:0})}),lastOsd=0;return{frame(t,dt){nowT=t,p.hold>0&&channels.length>1&&t-switchedAt>p.hold&&!ctx.reducedMotion&&change(),channels[ch]==="nosignal"&&t-lastOsd>1/30&&(lastOsd=t,drawOSD("nosignal",t)),scene.frame(t,dt)}}}};export{no_signal_default as default};

package/dist/scenes/one-bit.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    dark: string;
+    light: string;
+    /** Pixel size of the dither. */
+    pixel: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;