lostpage 0.0.0-stage → 0.2.0

package/dist/scenes/soft-blobs.js

@@ -0,0 +1,15 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var soft_blobs_default={id:"soft-blobs",name:"Soft Blobs",description:"Blurred colour blobs drifting slowly behind a frosted card. Pure CSS animation, so it costs almost nothing to run.",category:"Simple",kind:"2d",motion:"live",tags:["simple","gradient","blobs","glass","frosted","saas","fast","light"],layout:"center",copy:{eyebrow:"",title:"Page not found",message:"The page you\u2019re looking for doesn\u2019t exist or has been moved.",actions:[{label:"Go home",href:"/"},{label:"Contact",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{colors:["#a78bfa","#60a5fa","#f472b6"],speed:1,card:!0},theme:{bg:"#f8f7ff",fg:"#1e1b4b",accent:"#1e1b4b","accent-fg":"#ffffff","code-size":"clamp(64px,11cqw,120px)","code-weight":"800","code-color":"#1e1b4b"},presetName:"Lavender",presets:{peach:{name:"Peach",params:{colors:["#fdba74","#fda4af","#fde68a"]},theme:{bg:"#fffaf5",fg:"#431407",accent:"#431407","code-color":"#431407"}},aqua:{name:"Aqua",params:{colors:["#5eead4","#38bdf8","#a3e635"]},theme:{bg:"#f0fdfa",fg:"#042f2e",accent:"#042f2e","code-color":"#042f2e"}},night:{name:"Night",params:{colors:["#7c3aed","#2563eb","#db2777"]},theme:{bg:"#07071a",fg:"#eef2ff",accent:"#eef2ff","accent-fg":"#07071a","code-color":"#eef2ff"}}},css:`
+& .sb{position:absolute;inset:-10%;filter:blur(clamp(50px,8cqw,110px));opacity:.75}
+& .sb i{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;animation:sb-drift calc(18s / var(--sp)) ease-in-out infinite alternate}
+& .sb i:nth-child(1){left:12%;top:10%;background:var(--c0)}
+& .sb i:nth-child(2){right:8%;top:30%;background:var(--c1);animation-delay:calc(-6s / var(--sp));animation-duration:calc(22s / var(--sp))}
+& .sb i:nth-child(3){left:30%;bottom:2%;background:var(--c2);animation-delay:calc(-11s / var(--sp));animation-duration:calc(26s / var(--sp))}
+@keyframes sb-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,-8%) scale(1.15)}100%{transform:translate(-10%,10%) scale(.92)}}
+&.sb-still .sb i{animation:none}
+& .lp-code{letter-spacing:-.05em;line-height:.9;margin-bottom:8px}
+& .lp-title{font-weight:700;font-size:clamp(24px,3.4cqw,40px)}
+&.sb-card .lp-head,&.sb-card .lp-body{position:relative}
+&.sb-card .lp-overlay::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(520px,calc(100% - 32px));height:min(460px,calc(100% - 32px));
+  border-radius:28px;background:color-mix(in srgb,var(--lp-bg) 55%,transparent);border:1px solid color-mix(in srgb,#fff 55%,transparent);
+  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
+`,setup(ctx){let p=ctx.params,el=document.createElement("div");return el.className="sb",el.innerHTML="<i></i><i></i><i></i>",p.colors.slice(0,3).forEach((c,i)=>el.style.setProperty(`--c${i}`,c)),el.style.setProperty("--sp",String(Math.max(.05,p.speed))),ctx.stage.append(el),ctx.root.classList.toggle("sb-card",p.card),ctx.root.classList.toggle("sb-still",ctx.reducedMotion),{destroy:()=>el.remove()}}};export{soft_blobs_default as default};

package/dist/scenes/solar-system.d.ts

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

package/dist/scenes/solar-system.js

@@ -0,0 +1,2 @@
+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 solar_system_default={id:"solar-system",name:"Missing Planet",description:"An orrery of a little solar system. Every planet circles on schedule, except the fourth orbit, which is empty and labelled 404.",category:"Space",kind:"2d",motion:"live",tags:["canvas","space","orbits","planets","science","minimal","dark"],layout:"left",copy:{eyebrow:"Planet not found",title:"There's a gap in the orbit.",message:"Something should be circling the fourth ring. It's the page you were looking for, and it's gone.",actions:[{label:"Return to Earth",href:"/",variant:"primary"}]},params:{bg:"#05060f",sun:"#ffcf5a",orbit:"#3a3f5a",planets:["#b8b8c0","#e8b86b","#3b8fe6","#e2574c","#d9a066","#e6d29a","#7fd3e6","#4f6bff"],label:"#ff5a5a"},theme:{bg:"#05060f",fg:"#eef0ff",accent:"#eef0ff","accent-fg":"#05060f"},presetName:"Night",presets:{paper:{name:"Orrery Print",params:{bg:"#f2ede2",sun:"#e4572e",orbit:"#b9ad96",planets:["#2a2a2a"],label:"#e4572e"},theme:{bg:"#f2ede2",fg:"#1f1a12",accent:"#1f1a12","accent-fg":"#fff"}},neon:{name:"Neon Orbits",params:{bg:"#060010",sun:"#ff3bd4",orbit:"#3a1a5a",planets:["#3bd6ff","#ffe14d","#3dff8a","#ff7a3d"],label:"#3bd6ff"},theme:{bg:"#060010",accent:"#ff3bd4","accent-fg":"#fff"}}},css:`& .lp-overlay{padding-left:max(16px,calc(var(--lp-pad) * 1.5))}& .lp-head,& .lp-body{max-width:min(440px,38cqw)}
+@container (max-width:760px){& .lp-head,& .lp-body{max-width:none}& .lp-overlay{justify-content:flex-end}}`,setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,stars=[],build=()=>stars=Array.from({length:220},()=>[rnd()*c.w,rnd()*c.h,rnd()]);return build(),{resize(){c.reset(),build()},frame(t){let g=c.g;c.reset(),g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h);for(let[x,y,b]of stars)g.fillStyle=rgba("#ffffff",.2+b*.5),g.fillRect(x,y,1.2,1.2);let narrow=c.w<760,cx=narrow?c.w/2:c.w*.64,cy=narrow?c.h*.32:c.h*.5,tilt=.42+ctx.pointer.sy*.15,maxR=narrow?Math.min(c.w*.46,c.h*.5):Math.min(c.w*.34,c.h*.8),n=8,bodies=[];for(let i=0;i<n;i++){let R=maxR*(.18+i/(n-1)*.82);if(g.strokeStyle=i===3?rgba(p.label,.7):rgba(p.orbit,.9),g.setLineDash(i===3?[6,8]:[]),g.lineWidth=i===3?1.5:1,g.beginPath(),g.ellipse(cx,cy,R,R*tilt,0,0,Math.PI*2),g.stroke(),g.setLineDash([]),i===3){let x=cx+Math.cos(-.6)*R,y=cy+Math.sin(-.6)*R*tilt;g.strokeStyle=p.label,g.lineWidth=2,g.beginPath(),g.arc(x,y,9,0,Math.PI*2),g.stroke(),g.fillStyle=p.label,g.font="700 12px ui-monospace,Menlo,monospace",g.textAlign="left",g.fillText(`${ctx.copy.code} \xB7 not found`,x+14,y+4);continue}let speed=1.2/Math.pow(i+1,1.2),a=t*speed+i*1.7;bodies.push({x:cx+Math.cos(a)*R,y:cy+Math.sin(a)*R*tilt,r:4+i*5%9+(i===5?6:0),col:p.planets[i%p.planets.length],z:Math.sin(a)})}let sunR=maxR*.08,drawBody=b=>{let grd=g.createRadialGradient(b.x-(b.x-cx)*.02-b.r*.3,b.y-b.r*.3,b.r*.1,b.x,b.y,b.r);grd.addColorStop(0,b.col),grd.addColorStop(1,rgba(b.col,.35)),g.fillStyle=grd,g.beginPath(),g.arc(b.x,b.y,b.r,0,Math.PI*2),g.fill()};bodies.filter(b=>b.z<0).forEach(drawBody);let sg=g.createRadialGradient(cx,cy,0,cx,cy,sunR*3);sg.addColorStop(0,p.sun),sg.addColorStop(.33,p.sun),sg.addColorStop(1,rgba(p.sun,0)),g.fillStyle=sg,g.beginPath(),g.arc(cx,cy,sunR*3,0,Math.PI*2),g.fill(),bodies.filter(b=>b.z>=0).forEach(drawBody)}}}};export{solar_system_default as default};

package/dist/scenes/split-flap.d.ts

@@ -0,0 +1,15 @@
+interface Params {
+    heading: string;
+    /** Status shown for the missing page. */
+    status: string;
+    /** Characters cycle through this alphabet when flipping. */
+    alphabet: string;
+    /** ms per flap. */
+    flapMs: number;
+    board: string;
+    cell: string;
+    ink: string;
+    hot: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/split-flap.js

@@ -0,0 +1,37 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),split_flap_default={id:"split-flap",name:"Departures Board",description:"An airport split-flap board. Every letter clatters into place. Your page is cancelled, but the other flights still board.",category:"Signs & Displays",kind:"2d",motion:"live",tags:["dom","css-3d","split-flap","airport","travel","typography"],layout:"none",copy:{title:"Your page has been cancelled.",message:"We're sorry for the inconvenience. Please choose another destination below.",actions:[{label:"Home",href:"/",variant:"primary"},{label:"Blog",href:"/blog",variant:"secondary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{heading:"DEPARTURES",status:"CANCELLED",alphabet:" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:-/.",flapMs:42,board:"#111214",cell:"#1d1e21",ink:"#f4f1e6",hot:"#ffcc33"},theme:{bg:"#08090a",fg:"#f4f1e6",accent:"#ffcc33","accent-fg":"#111"},presetName:"Airport",presets:{delayed:{name:"Delayed",title:"Your page is delayed. Indefinitely.",params:{status:"DELAYED",hot:"#ff5a3c"},theme:{accent:"#ff5a3c","accent-fg":"#fff"}},gate:{name:"Gate Change",title:"Your page has moved to an unknown gate.",params:{heading:"GATE CHANGES",status:"GATE ???",board:"#1d1d1f",cell:"#2a2a2d",ink:"#ffd23f",hot:"#ffffff"},theme:{accent:"#ffd23f","accent-fg":"#111"}},ferry:{name:"Ferry Terminal",title:"Your page missed the boat.",params:{heading:"SAILINGS",status:"SAILED",board:"#0b3a4a",cell:"#0f4a5e",ink:"#e6f9ff",hot:"#7fe3ff"},theme:{bg:"#06242e",accent:"#7fe3ff","accent-fg":"#06242e"}},train:{name:"Rail Station",title:"This train no longer stops here.",params:{heading:"TRAINS",status:"TERMINATED",board:"#0d2a52",cell:"#123a6e",ink:"#ffffff",hot:"#ffdd00"},theme:{bg:"#06162b",accent:"#ffdd00","accent-fg":"#06162b"}},arrivals:{name:"Arrivals",title:"Your page never landed.",params:{heading:"ARRIVALS",status:"DIVERTED",hot:"#ff6b3d"},theme:{accent:"#ff6b3d"}},white:{name:"Terminal White",params:{board:"#e9e7e1",cell:"#fbfaf7",ink:"#151515",hot:"#e0311f"},theme:{bg:"#d9d6cf",fg:"#151515",accent:"#151515","accent-fg":"#fff"}},green:{name:"Platform Green",params:{heading:"PLATFORMS",status:"DELAYED",board:"#0c1f17",cell:"#12301f",ink:"#c6ffd9",hot:"#7dff9e"},theme:{bg:"#06120d",accent:"#7dff9e","accent-fg":"#06120d"}}},css:`
+& .sf-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3cqh,30px);padding:clamp(14px,4cqw,48px)}
+& .sf-board{--c:clamp(13px,2.35cqw,40px);background:var(--board);padding:calc(var(--c)*.9) calc(var(--c)*.9) calc(var(--c)*.7);border-radius:calc(var(--c)*.35);
+  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);max-width:100%;overflow:hidden}
+& .sf-head{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink);font:600 calc(var(--c)*.62)/1 var(--lp-font);letter-spacing:.3em;margin-bottom:calc(var(--c)*.6);opacity:.9}
+& .sf-head svg{width:calc(var(--c)*1.1);height:calc(var(--c)*1.1);fill:var(--hot)}
+& .sf-cols,.sf-row{display:grid;grid-template-columns:var(--cols);column-gap:calc(var(--c)*.55);align-items:center}
+& .sf-cols{color:color-mix(in srgb,var(--ink) 55%,transparent);font:500 calc(var(--c)*.42)/1 var(--lp-font);letter-spacing:.18em;margin-bottom:calc(var(--c)*.35)}
+& .sf-row{padding:calc(var(--c)*.18) 0;text-decoration:none;color:inherit;border-radius:4px;outline-offset:3px}
+& a.sf-row:hover .ch{filter:brightness(1.25)}
+& .sf-word{display:flex;gap:calc(var(--c)*.07)}
+& .ch{position:relative;width:calc(var(--c)*.72);height:calc(var(--c)*1.12);perspective:calc(var(--c)*6);font:700 var(--c)/1 var(--lp-font-mono);color:var(--ink)}
+& .ch.hot{color:var(--hot)}
+& .ch>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--cell);backface-visibility:hidden}
+& .ch>span>i{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-style:normal}
+& .ch .t,.ch .lt{top:0;border-radius:3px 3px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--cell) 85%,#fff),var(--cell))}
+& .ch .b,.ch .lb{bottom:0;border-radius:0 0 3px 3px}
+& .ch .b>i,.ch .lb>i{top:-100%}
+& .ch .t>i,.ch .lt>i{top:0}
+& .ch::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.55);z-index:3}
+& .ch .lt{transform-origin:50% 100%;z-index:2;animation:sf-t var(--ms) ease-in forwards}
+& .ch .lb{transform-origin:50% 0;z-index:2;transform:rotateX(90deg);animation:sf-b var(--ms) var(--ms) ease-out forwards}
+@keyframes sf-t{to{transform:rotateX(-90deg);filter:brightness(.6)}}
+@keyframes sf-b{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:rotateX(0)}}
+& .sf-copy{text-align:center;max-width:46ch}
+& .sf-copy h1{margin:0;font-size:clamp(22px,3cqw,36px);font-weight:600;letter-spacing:-.02em}
+& .sf-copy p{margin:.6em 0 0;color:var(--lp-muted);font-size:15px;line-height:1.55}
+& .blink{animation:sf-blink 1.1s steps(1) infinite}
+@keyframes sf-blink{50%{opacity:.25}}
+@container (max-width:700px){& .sf-hide{display:none}}
+@media (prefers-reduced-motion:reduce){& .ch .lt,& .ch .lb{animation:none;display:none}& .blink{animation:none}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,narrow=ctx.width<700,W={time:5,dest:narrow?9:12,flight:6,gate:4,status:Math.max(9,p.status.length)},pad=(s,n)=>[...(s.toUpperCase()+" ".repeat(n)).slice(0,n)].map(ch=>p.alphabet.includes(ch)?ch:" ").join(""),now=new Date,hhmm=m=>{let d=new Date(now.getTime()+m*6e4);return`${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`},path=typeof location<"u"?location.pathname.split("/").filter(Boolean).pop()??"PAGE":"PAGE",rows=[{time:hhmm(-4),dest:path.replace(/[^a-z0-9]/gi," ")||"YOUR PAGE",flight:`LP${c.code}`,gate:"--",status:p.status,hot:!0,href:null},...c.actions.slice(0,4).map((a,i)=>({time:hhmm(6+i*9),dest:a.label,flight:`LP${String(100+i*37).padStart(3,"0")}`,gate:`${String.fromCharCode(65+i)}${i+1}`,status:i===0?"BOARDING":"ON TIME",hot:!1,href:a.href??"/"}))],cols=narrow?`${W.time}fr ${W.dest}fr ${W.status}fr`:`${W.time}fr ${W.dest}fr ${W.flight}fr ${W.gate}fr ${W.status}fr`,wrap=document.createElement("div");wrap.className="sf-wrap",wrap.style.setProperty("--board",p.board),wrap.style.setProperty("--cell",p.cell),wrap.style.setProperty("--ink",p.ink),wrap.style.setProperty("--hot",p.hot),wrap.style.setProperty("--ms",`${p.flapMs}ms`);let word=(key,len,hot)=>`<span class="sf-word" data-k="${key}" data-len="${len}" data-hot="${hot?1:0}"></span>`;wrap.innerHTML=`<div class="sf-board" style="--cols:${cols}">
+      <div class="sf-head"><span>${esc(p.heading)}</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg></div>
+      <div class="sf-cols" aria-hidden="true"><span>TIME</span><span>DESTINATION</span>${narrow?"":"<span>FLIGHT</span><span>GATE</span>"}<span>REMARKS</span></div>
+      ${rows.map((r,i)=>`<${r.href?`a href="${esc(r.href)}" data-href="${esc(r.href)}"`:"div"} class="sf-row" aria-label="${esc(`${r.dest} ${r.status}`)}">${word(`${i}t`,W.time,!1)}${word(`${i}d`,W.dest,r.hot)}${narrow?"":word(`${i}f`,W.flight,!1)+word(`${i}g`,W.gate,!1)}${word(`${i}s`,W.status,r.hot)}</${r.href?"a":"div"}>`).join("")}
+    </div>
+    <div class="sf-copy"><h1><span class="lp-sr">Error ${esc(c.code)}: </span>${esc(c.title)}</h1><p>${esc(c.message)}</p></div>`,ctx.root.append(wrap),wrap.querySelectorAll("a[data-href]").forEach(a=>a.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),ctx.navigate(a.dataset.href,e))}));let alphabet=p.alphabet,cells=[],make=ch=>`<span class="t"><i>${esc(ch)}</i></span><span class="b"><i>${esc(ch)}</i></span>`,targets={};rows.forEach((r,i)=>{targets[`${i}t`]=pad(r.time,W.time),targets[`${i}d`]=pad(r.dest,W.dest),targets[`${i}f`]=pad(r.flight,W.flight),targets[`${i}g`]=pad(r.gate,W.gate),targets[`${i}s`]=pad(r.status,W.status)}),wrap.querySelectorAll(".sf-word").forEach(w=>{let tgt=targets[w.dataset.k],hot=w.dataset.hot==="1";for(let i=0;i<tgt.length;i++){let el=document.createElement("span");el.className="ch"+(hot?" hot":"");let start=ctx.reducedMotion?tgt[i]:" ";el.innerHTML=make(start),el.setAttribute("aria-hidden","true"),w.append(el),cells.push({el,cur:start,target:tgt[i],next:.25+Math.random()*.9+i*.03})}w.dataset.k.endsWith("s")&&hot&&w.classList.add("blink-later")});let step=cell=>{let i=alphabet.indexOf(cell.cur),nxt=alphabet[(i+1)%alphabet.length],el=cell.el;el.innerHTML=`<span class="t"><i>${esc(nxt)}</i></span><span class="b"><i>${esc(cell.cur)}</i></span><span class="lt"><i>${esc(cell.cur)}</i></span><span class="lb"><i>${esc(nxt)}</i></span>`,cell.cur=nxt},reshuffleAt=14;return{frame(t){if(ctx.reducedMotion)return;let busy=!1;for(let cell of cells)cell.cur!==cell.target&&(busy=!0,t>=cell.next&&(step(cell),cell.next=t+p.flapMs*1.25/1e3));if(!busy&&(wrap.querySelectorAll(".blink-later").forEach(n=>n.classList.add("blink")),t>reshuffleAt)){reshuffleAt=t+12;let row=1+Math.floor(Math.random()*(rows.length-1));for(let cell of cells)cell.el.parentElement?.dataset.k?.startsWith(String(row))&&(cell.cur=alphabet[Math.floor(Math.random()*alphabet.length)],cell.el.innerHTML=make(cell.cur),cell.next=t+Math.random()*.5)}},destroy(){wrap.remove()}}}};export{split_flap_default as default};

package/dist/scenes/split-panel.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    panel: string;
+    panelText: string;
+    /** Put the coloured panel on the left. */
+    flip: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/split-panel.js

@@ -0,0 +1,12 @@
+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 split_panel_default={id:"split-panel",name:"Split Panel",description:"Two halves: the explanation and buttons on one side, a solid colour block with a huge number on the other. Stacks on phones.",category:"Simple",kind:"2d",motion:"static",tags:["simple","split","two-column","bold","static","fast","brand"],layout:"none",copy:{eyebrow:"Error 404",title:"Looks like you\u2019re lost.",message:"The page you are looking for is not available. It might have been moved or deleted.",actions:[{label:"Go to homepage",href:"/"},{label:"Contact us",href:"/contact",variant:"secondary",icon:"arrow"}]},params:{panel:"#ff5a36",panelText:"#ffffff",flip:!1},theme:{bg:"#ffffff",fg:"#111111",accent:"#111111","accent-fg":"#ffffff",radius:"6px"},presetName:"Coral",presets:{forest:{name:"Forest",params:{panel:"#14532d",panelText:"#bbf7d0"},theme:{bg:"#f7f7f2",fg:"#14231a",accent:"#14532d","accent-fg":"#fff"}},ink:{name:"Ink",params:{panel:"#111111",panelText:"#fafafa",flip:!0},theme:{bg:"#fafafa",fg:"#111",accent:"#111","accent-fg":"#fafafa"}},sky:{name:"Sky",params:{panel:"#38bdf8",panelText:"#082f49"},theme:{bg:"#082f49",fg:"#e0f2fe",accent:"#38bdf8","accent-fg":"#082f49"}}},css:`
+& .sp{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
+& .sp.flip .txt{order:2}
+& .sp .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,6cqw,96px)}
+& .sp .ey{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lp-muted)}
+& .sp h1{margin:14px 0 0;font-size:clamp(30px,4.8cqw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
+& .sp p{margin:18px 0 0;max-width:40ch;color:var(--lp-muted);font-size:clamp(14px,1.3cqw,17px);line-height:1.6}
+& .sp .lp-actions{justify-content:flex-start}
+& .sp .pn{background:var(--pn);color:var(--pt);display:grid;place-items:center;overflow:hidden}
+& .sp .pn span{font-weight:900;font-size:clamp(90px,19cqw,300px);letter-spacing:-.06em;line-height:1}
+@container (max-width:700px){& .sp{grid-template-columns:1fr;grid-template-rows:38% 1fr}& .sp .txt,& .sp.flip .txt{order:2;justify-content:flex-start;padding-top:28px}& .sp .pn span{font-size:clamp(80px,30cqw,160px)}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,el=layer(ctx,"sp"+(p.flip?" flip":""),`<div class="txt"><span class="ey">${esc(c.eyebrow)}</span><h1>${sr(c.code)}${esc(c.title)}</h1><p>${esc(c.message)}</p></div><div class="pn" aria-hidden="true"><span>${esc(c.code)}</span></div>`,{pn:p.panel,pt:p.panelText});return el.querySelector(".txt").append(actions(ctx)),{destroy:()=>el.remove()}}};export{split_panel_default as default};

package/dist/scenes/stage.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    curtain: string;
+    floor: string;
+    light: string;
+    back: string;
+    /** Spotlight follows the pointer when true. */
+    follow: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/stage.js

@@ -0,0 +1,2 @@
+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 stage_default={id:"stage",name:"Empty Stage",description:"The curtains part, the spotlight hunts across an empty stage, and the star of the show never walks on.",category:"Playful",kind:"2d",motion:"live",tags:["canvas","theatre","spotlight","curtains","dramatic","dark"],layout:"bottom",copy:{eyebrow:"Tonight's performance",title:"The show must go on. This page won't.",message:"Our lead role didn't turn up. Refunds are available at the box office, also known as the homepage.",actions:[{label:"Back to the lobby",href:"/",variant:"primary"}]},params:{curtain:"#9b0f1f",floor:"#3a2516",light:"#fff3d6",back:"#0d0a0c",follow:!0},theme:{bg:"#0d0a0c",fg:"#fff3e6",accent:"#ffd27a","accent-fg":"#1a0d03","code-color":"rgba(255,243,214,.92)","font-display":'"Playfair Display","Didot",Georgia,serif'},presetName:"Velvet",presets:{green:{name:"Emerald Theatre",params:{curtain:"#0f5a3a",floor:"#2a2014",light:"#f2fff6"},theme:{accent:"#c9ffe2","accent-fg":"#04140c"}},purple:{name:"Royal Purple",params:{curtain:"#4a1a6b",floor:"#24180f",light:"#fff0ff"},theme:{accent:"#f2d6ff","accent-fg":"#1a0628"}},blue:{name:"Opera Blue",params:{curtain:"#1b2f7a",floor:"#2a2420",light:"#e6f0ff"},theme:{accent:"#e6f0ff","accent-fg":"#0a1230"}},gold:{name:"Gold Lam\xE9",params:{curtain:"#b88a2a",floor:"#2a1d10",light:"#fff8e6"},theme:{accent:"#ffe7a3","accent-fg":"#1a1000"}},comedy:{name:"Comedy Club",eyebrow:"Open mic",title:"Tough crowd. No page.",params:{curtain:"#2a2a2e",floor:"#1a1a1d",light:"#ffffff",back:"#121216"},theme:{bg:"#121216",accent:"#ff4d6d","accent-fg":"#fff"}}},css:`& .lp-code{--lp-code-size:clamp(90px,14cqw,210px);font-weight:400;font-style:italic}
+& .lp-overlay{justify-content:flex-end;padding-bottom:clamp(20px,6cqh,60px)}`,setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,dust=[],lx=.5,build=()=>dust=Array.from({length:160},()=>({x:rnd(),y:rnd(),s:rnd()}));build();let curtain=(g,x0,w,h,t,side)=>{for(let i=0;i<9;i++){let fx=x0+i/9*w,fw=w/9,sway=Math.sin(t*.8+i*.7)*3*side,grd=g.createLinearGradient(fx,0,fx+fw,0);grd.addColorStop(0,rgba("#000000",.55)),grd.addColorStop(.35,p.curtain),grd.addColorStop(.6,rgba("#ffffff",.08)),grd.addColorStop(1,rgba("#000000",.45)),g.fillStyle=p.curtain,g.fillRect(fx+sway,0,fw+1,h),g.fillStyle=grd,g.fillRect(fx+sway,0,fw+1,h)}};return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset();let W=c.w,H=c.h,floorY=H*.66;g.fillStyle=p.back,g.fillRect(0,0,W,H),g.fillStyle=rgba("#ffffff",.02);for(let x=0;x<W;x+=60)g.fillRect(x,0,2,floorY);let fg=g.createLinearGradient(0,floorY,0,H);fg.addColorStop(0,rgba(p.floor,1)),fg.addColorStop(1,"#000"),g.fillStyle=fg,g.fillRect(0,floorY,W,H-floorY),g.strokeStyle=rgba("#000000",.35);for(let i=-12;i<=12;i++)g.beginPath(),g.moveTo(W/2+i*40,floorY),g.lineTo(W/2+i*160,H),g.stroke();let target=p.follow&&ctx.pointer.engaged?ctx.pointer.x/W:.5+Math.sin(t*.45)*.28+Math.sin(t*1.3)*.04;lx+=(target-lx)*Math.min(1,dt*2);let sx=lx*W,coneTop={x:W*.5,y:-40},pool={x:sx,y:floorY+(H-floorY)*.25,rx:W*.12,ry:H*.045};g.save(),g.globalCompositeOperation="lighter";let cone=g.createLinearGradient(0,0,0,pool.y);cone.addColorStop(0,rgba(p.light,.02)),cone.addColorStop(1,rgba(p.light,.16)),g.fillStyle=cone,g.beginPath(),g.moveTo(coneTop.x-8,coneTop.y),g.lineTo(coneTop.x+8,coneTop.y),g.lineTo(pool.x+pool.rx,pool.y),g.lineTo(pool.x-pool.rx,pool.y),g.closePath(),g.fill();let pg=g.createRadialGradient(pool.x,pool.y,0,pool.x,pool.y,pool.rx);pg.addColorStop(0,rgba(p.light,.75)),pg.addColorStop(.7,rgba(p.light,.25)),pg.addColorStop(1,rgba(p.light,0)),g.fillStyle=pg,g.beginPath(),g.ellipse(pool.x,pool.y,pool.rx,pool.ry,0,0,Math.PI*2),g.fill();for(let d of dust){d.y-=.006*dt*(.5+d.s),d.y<0&&(d.y=1);let y=d.y*pool.y,k=y/pool.y,cx=coneTop.x+(pool.x-coneTop.x)*k,half=8+(pool.rx-8)*k,x=cx+(d.x-.5)*2*half;g.fillStyle=rgba(p.light,.25*d.s),g.fillRect(x,y,1.5,1.5)}g.restore(),g.strokeStyle="#111",g.lineWidth=4,g.beginPath(),g.moveTo(W*.5,pool.y),g.lineTo(W*.5,pool.y-H*.22),g.stroke(),g.fillStyle="#222",g.beginPath(),g.ellipse(W*.5,pool.y-H*.225,8,12,0,0,Math.PI*2),g.fill(),g.beginPath(),g.ellipse(W*.5,pool.y,26,5,0,0,Math.PI*2),g.fill();let open=ctx.reducedMotion?1:Math.min(1,Math.max(0,(t-.3)/2)),e=1-Math.pow(1-open,3),cw=W*(.5-.36*e);curtain(g,0,cw,H,t,1),curtain(g,W-cw,cw,H,t,-1),g.fillStyle=p.curtain,g.fillRect(0,0,W,H*.07);for(let i=0;i<7;i++){let x=i/6*W;g.beginPath(),g.ellipse(x,H*.07,W/12,H*.05,0,0,Math.PI),g.fill()}g.fillStyle=rgba("#000000",.35),g.fillRect(0,H*.07-2,W,4),g.fillStyle=rgba("#ffcc66",.8),g.fillRect(0,H*.115,W,2)}}}};export{stage_default as default};

package/dist/scenes/swiss-poster.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    paper: string;
+    ink: string;
+    red: string;
+    /** Grid columns. */
+    cols: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/swiss-poster.js

@@ -0,0 +1,20 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),swiss_poster_default={id:"swiss-poster",name:"Swiss Poster",description:"International Typographic Style: a strict grid, huge Helvetica-style numerals bleeding off the edge, a red rule and small flush-left text.",category:"Typography",kind:"2d",motion:"static",tags:["dom","typography","swiss","minimal","grid","editorial","static","light"],layout:"none",copy:{eyebrow:"Fehler / Erreur / Error",title:"Seite nicht gefunden. Page not found.",message:"The page you requested is not part of this system. Return to the index.",actions:[{label:"Index",href:"/",variant:"primary"},{label:"Contact",href:"/contact",variant:"secondary"}]},params:{paper:"#f2efe8",ink:"#111111",red:"#e30613",cols:12},theme:{bg:"#f2efe8",fg:"#111"},presetName:"Z\xFCrich",presets:{red:{name:"Rot",params:{paper:"#e30613",ink:"#ffffff",red:"#111111"},theme:{bg:"#e30613",fg:"#fff"}},black:{name:"Schwarz",params:{paper:"#111111",ink:"#f2efe8",red:"#e30613"},theme:{bg:"#111",fg:"#f2efe8"}},blue:{name:"Basel Blue",params:{paper:"#f4f4f2",ink:"#0a2a8a",red:"#ff5a1f"},theme:{bg:"#f4f4f2",fg:"#0a2a8a"}}},css:`
+& .sw{position:absolute;inset:0;background:var(--paper);color:var(--ink);overflow:hidden;font-family:"Helvetica Neue","Neue Haas Grotesk Display Pro","Inter",Arial,sans-serif;
+  display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(8px,1.4cqw,20px);padding:clamp(18px,3cqw,44px)}
+& .sw .gl{position:absolute;inset:clamp(18px,3cqw,44px);display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:clamp(8px,1.4cqw,20px);pointer-events:none;opacity:.07}
+& .sw .gl i{border-left:1px solid currentColor;border-right:1px solid currentColor}
+& .sw .top{grid-column:1/-1;display:flex;justify-content:space-between;font-size:clamp(11px,1cqw,13px);font-weight:500;letter-spacing:.01em;border-top:3px solid var(--ink);padding-top:10px}
+& .sw .num{grid-column:1/-1;align-self:center;font-weight:700;font-size:clamp(160px,46cqw,700px);line-height:.78;letter-spacing:-.07em;margin-left:-.06em;white-space:nowrap}
+& .sw .num span{color:var(--red)}
+& .sw .bot{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:inherit;align-items:end}
+& .sw .rule{grid-column:1/4;height:clamp(10px,1.4cqw,18px);background:var(--red);align-self:start;margin-top:6px}
+& .sw h1{grid-column:5/10;margin:0;font-size:clamp(20px,2.6cqw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
+& .sw .side{grid-column:10/13}
+& .sw .msg{font-size:clamp(12px,1.05cqw,14px);line-height:1.45;margin:0}
+& .sw nav{display:flex;gap:14px;margin-top:12px;font-weight:700;font-size:13px}
+& .sw nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
+@container (max-width:760px){& .sw h1{grid-column:1/-1}& .sw .side{grid-column:1/-1;margin-top:10px}& .sw .rule{grid-column:1/6;margin-bottom:12px}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,code=c.code||"404",mid=Math.floor(code.length/2),num=[...code].map((ch,i)=>i===mid?`<span>${esc(ch)}</span>`:esc(ch)).join(""),wrap=document.createElement("div");return wrap.className="sw",wrap.style.setProperty("--paper",p.paper),wrap.style.setProperty("--ink",p.ink),wrap.style.setProperty("--red",p.red),wrap.style.setProperty("--cols",String(p.cols)),wrap.innerHTML=`<div class="gl" aria-hidden="true">${"<i></i>".repeat(p.cols)}</div>
+      <div class="top"><span>${esc(c.eyebrow)}</span><span>${esc(typeof location<"u"?location.pathname:"/")}</span><span>${new Date().getFullYear()}</span></div>
+      <div class="num" aria-hidden="true">${num}</div>
+      <div class="bot"><div class="rule"></div><h1><span class="lp-sr">Error ${esc(code)}: </span>${esc(c.title)}</h1><div class="side"><p class="msg">${esc(c.message)}</p><nav>${c.actions.map(a=>`<a href="${esc(a.href??"/")}">${esc(a.label)}</a>`).join("")}</nav></div></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))})),{destroy(){wrap.remove()}}}};export{swiss_poster_default as default};

package/dist/scenes/terminal.d.ts

@@ -0,0 +1,13 @@
+interface Params {
+    user: string;
+    host: string;
+    /** Window chrome: "mac" (three dots), "plain", or "none" (fullscreen). */
+    chrome: "mac" | "plain" | "none";
+    crt: boolean;
+    /** Typing speed multiplier. */
+    speed: number;
+    banner: boolean;
+    shell: "bash" | "zsh" | "ps";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/terminal.js

@@ -0,0 +1,41 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FONT={0:["\u2588\u2588\u2588\u2588\u2588","\u2588   \u2588","\u2588   \u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588"],1:["  \u2588  "," \u2588\u2588  ","  \u2588  ","  \u2588  "," \u2588\u2588\u2588 "],2:["\u2588\u2588\u2588\u2588\u2588","    \u2588","\u2588\u2588\u2588\u2588\u2588","\u2588    ","\u2588\u2588\u2588\u2588\u2588"],3:["\u2588\u2588\u2588\u2588\u2588","    \u2588"," \u2588\u2588\u2588\u2588","    \u2588","\u2588\u2588\u2588\u2588\u2588"],4:["\u2588   \u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588","    \u2588","    \u2588"],5:["\u2588\u2588\u2588\u2588\u2588","\u2588    ","\u2588\u2588\u2588\u2588\u2588","    \u2588","\u2588\u2588\u2588\u2588\u2588"],6:["\u2588\u2588\u2588\u2588\u2588","\u2588    ","\u2588\u2588\u2588\u2588\u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588"],7:["\u2588\u2588\u2588\u2588\u2588","    \u2588","   \u2588 ","  \u2588  ","  \u2588  "],8:["\u2588\u2588\u2588\u2588\u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588"],9:["\u2588\u2588\u2588\u2588\u2588","\u2588   \u2588","\u2588\u2588\u2588\u2588\u2588","    \u2588","\u2588\u2588\u2588\u2588\u2588"]};function banner(code){return[...code].every(ch=>FONT[ch])?[0,1,2,3,4].map(r=>[...code].map(ch=>FONT[ch][r]).join("  ")).join(`
+`):null}var slug=s=>s.toLowerCase().replace(/^(back to|go to|take me|return to)\s+/,"").replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")||"home",terminal_default={id:"terminal",name:"Terminal",description:"A real little shell. It types out its own error, then hands you the prompt: try help, ls, cd or sudo.",category:"Retro Tech",kind:"2d",motion:"interactive",tags:["dom","terminal","cli","developer","interactive","keyboard","accessible"],layout:"none",copy:{title:"No such file or directory",message:"The page you requested could not be found.",actions:[{label:"home",href:"/",variant:"primary"},{label:"blog",href:"/blog",variant:"secondary"},{label:"contact",href:"/contact",variant:"secondary"}]},params:{user:"guest",host:"site",chrome:"mac",crt:!1,speed:1,banner:!0,shell:"zsh"},theme:{bg:"#0d1117",fg:"#c9d1d9",accent:"#58a6ff","term-bg":"#0d1117","term-panel":"#161b22","term-prompt":"#7ee787","term-path":"#58a6ff","term-err":"#ff7b72","term-dim":"#8b949e","term-hi":"#e3b341"},presetName:"Modern",presets:{solarized:{name:"Solarized",theme:{bg:"#002b36",fg:"#93a1a1","term-bg":"#002b36","term-panel":"#073642","term-prompt":"#859900","term-path":"#268bd2","term-err":"#dc322f","term-dim":"#586e75","term-hi":"#b58900",accent:"#268bd2"}},nord:{name:"Nord",theme:{bg:"#2e3440",fg:"#d8dee9","term-bg":"#2e3440","term-panel":"#3b4252","term-prompt":"#a3be8c","term-path":"#88c0d0","term-err":"#bf616a","term-dim":"#616e88","term-hi":"#ebcb8b",accent:"#88c0d0"}},monokai:{name:"Monokai",theme:{bg:"#1e1f1c",fg:"#f8f8f2","term-bg":"#272822","term-panel":"#1e1f1c","term-prompt":"#a6e22e","term-path":"#66d9ef","term-err":"#f92672","term-dim":"#75715e","term-hi":"#e6db74",accent:"#f92672"}},light:{name:"Light",params:{chrome:"mac"},theme:{bg:"#e8eaed",fg:"#24292f","term-bg":"#ffffff","term-panel":"#f3f4f6","term-prompt":"#1a7f37","term-path":"#0969da","term-err":"#cf222e","term-dim":"#6e7781","term-hi":"#9a6700",accent:"#0969da"}},commodore:{name:"Home Computer",params:{chrome:"none",crt:!0,shell:"bash",user:"ready",host:"64k"},theme:{bg:"#3e31a2",fg:"#a5a0ff","term-bg":"#3e31a2","term-panel":"#3e31a2","term-prompt":"#a5a0ff","term-path":"#ffffff","term-err":"#ffffff","term-dim":"#8a84e6","term-hi":"#ffffff",accent:"#a5a0ff"}},green:{name:"Green Phosphor",params:{chrome:"none",crt:!0,shell:"bash"},theme:{bg:"#020a03",fg:"#33ff66","term-bg":"#020a03","term-panel":"#020a03","term-prompt":"#33ff66","term-path":"#33ff66","term-err":"#a6ffbd","term-dim":"#1d9c3f","term-hi":"#c8ffd6",accent:"#33ff66"}},amber:{name:"Amber Phosphor",params:{chrome:"none",crt:!0,shell:"bash"},theme:{bg:"#0c0700",fg:"#ffb000","term-bg":"#0c0700","term-panel":"#0c0700","term-prompt":"#ffb000","term-path":"#ffcc55","term-err":"#ffe0a0","term-dim":"#a87400","term-hi":"#fff0c8",accent:"#ffb000"}},paper:{name:"Paper",params:{chrome:"plain"},theme:{bg:"#e9e5dc",fg:"#3b3a36","term-bg":"#fbf9f4","term-panel":"#efebe2","term-prompt":"#3f7d3a","term-path":"#2f5fa7","term-err":"#b3362c","term-dim":"#8a867c","term-hi":"#8a5a00",accent:"#2f5fa7"}},shell:{name:"Blue Shell",params:{chrome:"plain",shell:"ps",user:"PS",host:"C:"},theme:{bg:"#012456",fg:"#eeedf0","term-bg":"#012456","term-panel":"#0c3a75","term-prompt":"#eeedf0","term-path":"#eeedf0","term-err":"#ff8c8c","term-dim":"#9fb6d8","term-hi":"#ffff8c",accent:"#ffff8c"}},dracula:{name:"Vampire",theme:{bg:"#1e1f29",fg:"#f8f8f2","term-bg":"#282a36","term-panel":"#21222c","term-prompt":"#50fa7b","term-path":"#bd93f9","term-err":"#ff5555","term-dim":"#6272a4","term-hi":"#f1fa8c",accent:"#ff79c6"}},hacker:{name:"Red Team",params:{chrome:"none",crt:!0,user:"root",host:"mainframe",shell:"bash"},theme:{bg:"#0a0000",fg:"#ff3b3b","term-bg":"#0a0000","term-panel":"#0a0000","term-prompt":"#ff3b3b","term-path":"#ff8080","term-err":"#ffd0d0","term-dim":"#992222","term-hi":"#ffffff",accent:"#ff3b3b"}}},css:`
+&{font-family:var(--lp-font-mono)}
+& .lpt-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4cqw,56px)}
+& .lpt-win{width:min(920px,100%);height:min(620px,100%);display:flex;flex-direction:column;background:var(--lp-term-bg);
+  border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--lp-fg) 12%,transparent);overflow:hidden}
+& .lpt-bar{height:38px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--lp-term-panel);color:var(--lp-term-dim);font-size:12px}
+& .lpt-bar i{width:12px;height:12px;border-radius:50%;display:block}
+& .lpt-bar span{flex:1;text-align:center;margin-right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+&.lpt-plain .lpt-bar i{display:none}&.lpt-plain .lpt-bar span{margin:0;text-align:left}
+&.lpt-none .lpt-win{width:100%;height:100%;border-radius:0;box-shadow:none;background:transparent}
+&.lpt-none .lpt-bar{display:none}
+&.lpt-none .lpt-wrap{padding:clamp(16px,5cqw,64px)}
+& .lpt-screen{flex:1;overflow:auto;padding:18px 20px 28px;font-size:clamp(12.5px,1.15cqw,15px);line-height:1.6;color:var(--lp-fg);cursor:text;scrollbar-width:thin}
+& .lpt-screen pre{margin:0;font:inherit;white-space:pre-wrap;word-break:break-word}
+& .lpt-banner{color:var(--lp-term-hi);line-height:1.05;font-size:.82em;margin:2px 0 14px!important;letter-spacing:0}
+& .p{color:var(--lp-term-prompt)}& .d{color:var(--lp-term-path)}& .e{color:var(--lp-term-err)}& .m{color:var(--lp-term-dim)}& .h{color:var(--lp-term-hi)}
+& .lpt-screen a{color:var(--lp-term-path);text-decoration:underline;text-underline-offset:3px}
+& .lpt-screen a:hover{color:var(--lp-term-hi)}
+& .lpt-in{display:flex;align-items:baseline;gap:0}
+& .lpt-field{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
+& .lpt-caret{display:inline-block;width:.62em;height:1.15em;vertical-align:text-bottom;background:var(--lp-fg);margin-left:1px;animation:lpt-blink 1.05s steps(1) infinite}
+&.lpt-unfocused .lpt-caret{background:transparent;outline:1px solid var(--lp-fg)}
+@keyframes lpt-blink{50%{opacity:0}}
+&.lpt-crt .lpt-screen{text-shadow:0 0 6px color-mix(in srgb,var(--lp-fg) 70%,transparent),0 0 1px var(--lp-fg)}
+&.lpt-crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
+  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
+  animation:lpt-flicker 6s infinite}
+@keyframes lpt-flicker{0%,100%{opacity:1}48%{opacity:.92}50%{opacity:1}}
+@media (prefers-reduced-motion:reduce){& .lpt-caret,&.lpt-crt::after{animation:none}}
+`,setup(ctx){let p=ctx.params,copy=ctx.copy,root=ctx.root,wrap=document.createElement("div");wrap.className="lpt-wrap",root.classList.add(`lpt-${p.chrome}`),p.crt&&root.classList.add("lpt-crt");let shellName=p.shell==="ps"?"PowerShell":p.shell;wrap.innerHTML=`<div class="lpt-win" role="application" aria-label="Terminal">
+      <div class="lpt-bar" aria-hidden="true"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i><span>${p.user}@${p.host} \u2014 ${shellName}</span></div>
+      <div class="lpt-screen"><h1 class="lp-sr">Error ${copy.code}: ${copy.title}</h1><div class="lpt-out" role="log" aria-live="polite"></div>
+      <div class="lpt-in" hidden><span class="lpt-prompt"></span><span class="lpt-typed"></span><span class="lpt-caret"></span></div>
+      <input class="lpt-field" aria-label="Terminal input" autocomplete="off" autocapitalize="off" spellcheck="false" /></div></div>`,root.append(wrap);let screen=wrap.querySelector(".lpt-screen"),out=wrap.querySelector(".lpt-out"),inRow=wrap.querySelector(".lpt-in"),promptEl=wrap.querySelector(".lpt-prompt"),typedEl=wrap.querySelector(".lpt-typed"),field=wrap.querySelector(".lpt-field"),esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),cwd="~",prompt=()=>p.shell==="ps"?`<span class="p">PS ${esc(p.host)}\\Users\\${esc(cwd==="~"?"guest":cwd)}&gt;</span> `:p.shell==="bash"?`<span class="p">${esc(p.user)}@${esc(p.host)}</span>:<span class="d">${esc(cwd)}</span>$ `:`<span class="p">\u279C</span>  <span class="d">${esc(cwd)}</span> `,requested=typeof location<"u"&&decodeURIComponent(location.pathname).replace(/\/$/,"")||"/missing-page",dirs=(copy.actions.length?copy.actions:[{label:"home",href:"/"}]).map(a=>({name:slug(a.label),href:a.href??"/",action:a})),go=(href,e)=>{let a=dirs.find(d=>d.href===href)?.action;a?.onClick&&e&&a.onClick(e),ctx.navigate(href,e)},line=html=>{let pre=document.createElement("pre");return pre.innerHTML=html,out.append(pre),screen.scrollTop=screen.scrollHeight,pre},lsHtml=()=>dirs.map(d=>`<a href="${esc(d.href)}" data-href="${esc(d.href)}">${esc(d.name)}/</a>`).join("   ")||'<span class="m">(empty)</span>';out.addEventListener("click",e=>{let a=e.target.closest("a");if(!a)return;let href=a.getAttribute("data-href");href&&(e.preventDefault(),go(href,e))});let notFound=(cmd,target)=>p.shell==="ps"?`<span class="e">${esc(cmd)} : Cannot find path '${esc(target)}' because it does not exist.</span>`:p.shell==="bash"?`<span class="e">bash: ${esc(cmd)}: ${esc(target)}: No such file or directory</span>`:`<span class="e">${esc(cmd)}: no such file or directory: ${esc(target)}</span>`,history=[],hIdx=0;function run(raw){let input=raw.trim();if(line(prompt()+esc(input)),!input)return;history.push(input),hIdx=history.length;let[cmd,...args]=input.split(/\s+/),arg=args.join(" "),find=name=>dirs.find(d=>d.name===name.replace(/^~?\/?/,"").replace(/\/$/,""));switch(cmd.toLowerCase()){case"help":line(`<span class="h">Available commands</span>
+  <span class="d">ls</span>            list places you can go
+  <span class="d">cd</span> &lt;place&gt;    go there
+  <span class="d">home</span>          back to the homepage
+  <span class="d">back</span>          previous page
+  <span class="d">whoami</span>, <span class="d">date</span>, <span class="d">echo</span>, <span class="d">clear</span>, <span class="d">history</span>`);break;case"ls":case"dir":case"ll":line(lsHtml());break;case"cd":case"open":case"cat":case"set-location":{if(!arg||arg==="~"||arg==="/")return go(dirs[0]?.href??"/");if(arg==="..")return history.length>1?window.history.back():go("/");let d=find(arg);d?(line(`<span class="m">\u2192 opening ${esc(d.href)}</span>`),setTimeout(()=>go(d.href),350)):line(notFound(cmd,arg));break}case"home":case"exit":case"logout":case"q":line('<span class="m">\u2192 heading home</span>'),setTimeout(()=>go(dirs[0]?.href??"/"),300);break;case"back":window.history.back();break;case"clear":case"cls":out.innerHTML="";break;case"whoami":line(esc(p.user)+' <span class="m">(lost, but in good company)</span>');break;case"pwd":line(esc(requested));break;case"date":line(esc(new Date().toString()));break;case"echo":line(esc(arg));break;case"history":line(history.map((h,i)=>`  ${i+1}  ${esc(h)}`).join(`
+`));break;case"sudo":line(`<span class="e">${esc(p.user)} is not in the sudoers file. This incident will be reported.</span>`);break;case"rm":line('<span class="e">Nice try. The page is already gone.</span>');break;case"404":line(`<span class="h">${esc(copy.title)}</span> <span class="m">\u2014 ${esc(copy.message)}</span>`);break;case"vim":case"vi":case"nano":line(`<span class="m">You'd never get out. Try </span><span class="d">home</span>`);break;default:line(p.shell==="ps"?`<span class="e">${esc(cmd)} : The term '${esc(cmd)}' is not recognized.</span>`:`<span class="e">${p.shell}: command not found: ${esc(cmd)}</span>`),line('<span class="m">Type </span><span class="d">help</span><span class="m"> to see what works.</span>')}}let focused=!1,setFocus=v=>{focused=v,root.classList.toggle("lpt-unfocused",!v)};setFocus(!1),field.addEventListener("focus",()=>setFocus(!0)),field.addEventListener("blur",()=>setFocus(!1)),field.addEventListener("input",()=>{typedEl.textContent=field.value}),field.addEventListener("keydown",e=>{if(e.key==="Enter"){let v=field.value;field.value="",typedEl.textContent="",run(v),promptEl.innerHTML=prompt()}else if(e.key==="ArrowUp"&&history.length)hIdx=Math.max(0,hIdx-1),field.value=history[hIdx],typedEl.textContent=field.value,e.preventDefault();else if(e.key==="ArrowDown"&&history.length)hIdx=Math.min(history.length,hIdx+1),field.value=history[hIdx]??"",typedEl.textContent=field.value,e.preventDefault();else if(e.key==="Tab"){e.preventDefault();let[c0,...rest]=field.value.split(" "),part=rest.join(" "),m=dirs.find(d=>d.name.startsWith(part));rest.length&&m&&(field.value=`${c0} ${m.name}`),typedEl.textContent=field.value}else e.key==="l"&&e.ctrlKey&&(e.preventDefault(),out.innerHTML="")}),screen.addEventListener("pointerdown",e=>{e.target.closest("a")||(field.focus({preventScroll:!0}),e.preventDefault())});let timers=[],cancelled=!1,wait=ms=>new Promise(r=>timers.push(window.setTimeout(r,ctx.reducedMotion?0:ms/p.speed)));async function type(cmd){let pre=line(prompt());for(let ch of cmd){if(cancelled)return;pre.innerHTML+=esc(ch),await wait(45+Math.random()*70)}await wait(260)}return(async()=>{let b=p.banner&&banner(copy.code);if(b){let pre=line(esc(b));pre.className="lpt-banner",pre.setAttribute("aria-hidden","true")}line(`<span class="m"># ${esc(copy.title)} \u2014 ${esc(copy.message)}</span>`),await wait(500);let target=requested.length>1?requested:"/missing-page";await type(`cd ${target}`),!cancelled&&(line(notFound("cd",target)),await wait(500),await type("ls"),!cancelled&&(line(lsHtml()),await wait(300),line(`<span class="m">Type </span><span class="d">help</span><span class="m">, or </span><span class="d">cd ${esc(dirs[0]?.name??"home")}</span><span class="m"> to get back.</span>`),promptEl.innerHTML=prompt(),inRow.hidden=!1,screen.scrollTop=screen.scrollHeight))})(),ctx.onWindow("keydown",e=>{if(focused||e.metaKey||e.ctrlKey||e.altKey||e.key.length!==1||!ctx.visible()||inRow.hidden)return;let tag=(document.activeElement?.tagName??"").toLowerCase();tag==="input"||tag==="textarea"||field.focus({preventScroll:!0})}),{destroy(){cancelled=!0,timers.forEach(clearTimeout),wrap.remove(),root.classList.remove("lpt-crt","lpt-unfocused",`lpt-${p.chrome}`)}}}};export{terminal_default as default};

package/dist/scenes/thunderstorm.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    sky: string;
+    cloud: string;
+    ground: string;
+    bolt: string;
+    rain: number;
+    /** Seconds between strikes (average). */
+    every: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/thunderstorm.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 thunderstorm_default={id:"thunderstorm",name:"Thunderstorm",description:"A storm rolls over a dark plain. Every lightning flash lights up the clouds, and for a split second the error shows in them.",category:"Nature",kind:"2d",motion:"live",tags:["canvas","storm","lightning","rain","dramatic","dark","weather"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Severe weather warning",title:"This page was struck by lightning.",message:"Wait for the next flash and you'll see what's left of it. Shelter is available on the homepage.",actions:[{label:"Take shelter",href:"/",variant:"primary"}]},params:{sky:"#0a0d14",cloud:"#2a3140",ground:"#05070a",bolt:"#e6eeff",rain:1,every:3.2},theme:{bg:"#0a0d14",fg:"#e6eef8",accent:"#e6eef8","accent-fg":"#0a0d14"},presetName:"Night Storm",presets:{purple:{name:"Violet Storm",params:{sky:"#120a1f",cloud:"#3a2a55",bolt:"#f0dcff"},theme:{bg:"#120a1f",accent:"#e6ccff","accent-fg":"#120a1f"}},dust:{name:"Dust Storm",params:{sky:"#2a1a0d",cloud:"#6b4a2a",ground:"#1a0f05",bolt:"#fff2d6",rain:.2},theme:{bg:"#2a1a0d",accent:"#ffe0b0","accent-fg":"#2a1a0d"}},sea:{name:"Storm at Sea",params:{sky:"#05121a",cloud:"#1d3440",ground:"#020a10",bolt:"#d6f2ff",rain:1.4,every:2.4},theme:{bg:"#05121a"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,clouds,lit,bolt=[],flash=0,nextStrike=.9,build=()=>{let sc=Math.min(1,ctx.dpr),W=Math.ceil(c.w*sc),H=Math.ceil(c.h*.62*sc),mk=()=>Object.assign(document.createElement("canvas"),{width:W,height:H});clouds=mk(),lit=mk();let g=clouds.getContext("2d"),l=lit.getContext("2d");for(let i=0;i<260;i++){let x=rnd()*W,y=rnd()**1.6*H*.9,r=(30+rnd()*90)*sc,grd=g.createRadialGradient(x,y,0,x,y,r);grd.addColorStop(0,rgba(p.cloud,.32)),grd.addColorStop(1,rgba(p.cloud,0)),g.fillStyle=grd,g.fillRect(x-r,y-r,r*2,r*2)}l.drawImage(clouds,0,0),l.globalCompositeOperation="lighter",l.drawImage(clouds,0,0),l.globalCompositeOperation="source-over",l.font=`900 ${Math.min(W*.26,H*.55)}px ${SANS}`,l.textAlign="center",l.textBaseline="middle",l.filter=`blur(${8*sc}px)`,l.fillStyle="rgba(230,238,255,.55)",l.fillText(ctx.copy.code||"404",W/2,H*.5),l.filter="none"};build();let makeBolt=()=>{let segs=[],grow=(x,y,ang,len,depth)=>{let path=[[x,y]],cx=x,cy=y;for(let i=0;i<18&&cy<c.h*.86;i++)ang+=(rnd()-.5)*.9,cx+=Math.sin(ang)*len,cy+=Math.cos(ang)*len,path.push([cx,cy]),depth<2&&rnd()<.18&&grow(cx,cy,ang+(rnd()-.5)*1.6,len*.7,depth+1);segs.push(path)};return grow(c.w*(.2+rnd()*.6),c.h*.12,(rnd()-.5)*.4,c.h*.045,0),segs};return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset(),dt>0&&t>nextStrike&&(nextStrike=t+p.every*(.5+rnd()),bolt=makeBolt(),flash=1),flash=Math.max(0,flash-dt*1.6);let f=flash>.7||flash>.3&&flash<.45?flash:flash*.4;g.fillStyle=p.sky,g.fillRect(0,0,c.w,c.h),g.fillStyle=rgba(p.bolt,f*.25),g.fillRect(0,0,c.w,c.h);let drift=t*8%c.w;g.drawImage(clouds,-drift,0,c.w,c.h*.62),g.drawImage(clouds,c.w-drift,0,c.w,c.h*.62),g.globalAlpha=Math.min(1,.14+f),g.drawImage(lit,0,0,c.w,c.h*.62),g.globalAlpha=1,flash>.25&&(g.strokeStyle=p.bolt,g.shadowColor=p.bolt,g.shadowBlur=20,bolt.forEach((path,i)=>{g.lineWidth=i===bolt.length-1?3:1.4,g.beginPath(),path.forEach(([x,y],k)=>k?g.lineTo(x,y):g.moveTo(x,y)),g.stroke()}),g.shadowBlur=0);let gy=c.h*.86;g.fillStyle=p.ground,g.beginPath(),g.moveTo(0,c.h);for(let x=0;x<=c.w;x+=20)g.lineTo(x,gy-Math.sin(x*.005)*12-Math.sin(x*.013)*6);g.lineTo(c.w,c.h),g.fill(),g.strokeStyle=p.ground,g.lineWidth=6;let tx=c.w*.82;g.beginPath(),g.moveTo(tx,gy),g.lineTo(tx,gy-90),g.lineTo(tx-30,gy-130),g.moveTo(tx,gy-70),g.lineTo(tx+40,gy-115),g.moveTo(tx,gy-90),g.lineTo(tx+8,gy-150),g.stroke(),g.strokeStyle=rgba("#b8c6d8",.25+f*.4),g.lineWidth=1,g.beginPath();let n=Math.round(260*p.rain);for(let i=0;i<n;i++){let x=(i*97.3+t*300)%(c.w+100)-50,y=(i*53.7+t*900*(.8+i%5*.08))%c.h;g.moveTo(x,y),g.lineTo(x-4,y+16)}g.stroke()}}}};export{thunderstorm_default as default};

package/dist/scenes/topographic.d.ts

@@ -0,0 +1,13 @@
+interface Params {
+    paper: string;
+    line: string;
+    accent: string;
+    /** Contour spacing (smaller = more lines). */
+    spacing: number;
+    /** Hypsometric tint between contours. */
+    tint: boolean;
+    low: string;
+    high: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/topographic.js

@@ -0,0 +1,38 @@
+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, uLine, uAccent, uLow, uHigh;
+uniform float uSpacing, uTint;
+${HASH}
+${NOISE}
+${POST}
+float height(vec2 uv, vec2 p, float t) {
+  float h = fbm(p * 1.4 + vec2(t * 0.01, 0.0)) * 0.7 + fbm(p * 3.1 - 2.0) * 0.25;
+  // the code rises out of the terrain as a plateau
+  h += textureLod(uText, uv, 2.5).a * 0.55;
+  return h;
+}
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = (fc - 0.5 * uRes) / uRes.y + uMouse * 0.02;
+  float t = uTime;
+  float h = height(uv, p, t);
+  float v = h / uSpacing;
+  float w = fwidth(v);
+  float line = 1.0 - smoothstep(0.0, w * 1.4, abs(fract(v - 0.5) - 0.5));
+  float index = 1.0 - smoothstep(0.0, w * 2.2, abs(fract(v / 5.0 - 0.5) - 0.5) * 5.0);
+  vec3 col = uPaper;
+  if (uTint > 0.5) col = mix(uLow, uHigh, smoothstep(0.2, 1.0, floor(v) * uSpacing));
+  col = mix(col, uLine, line * 0.55);
+  col = mix(col, uLine, index * 0.85);
+  // the plateau's edge is drawn in the accent colour
+  float plate = textureLod(uText, uv, 2.5).a;
+  float edge = 1.0 - smoothstep(0.0, fwidth(plate) * 1.5, abs(plate - 0.5));
+  col = mix(col, uAccent, edge * 0.9);
+  // survey grid
+  vec2 g = abs(fract(fc / 80.0) - 0.5);
+  col = mix(col, uLine, (1.0 - smoothstep(0.0, 0.01, min(g.x, g.y))) * 0.08);
+  col *= 0.98 + 0.02 * hash12(fc);
+  fragColor = vec4(toSRGB(col), 1.0);
+}
+`,topographic_default={id:"topographic",name:"Topographic",description:"A survey map with contour lines curving round the terrain, and the error rising out of it as a plateau. The contours drift slowly as the land shifts.",category:"Abstract",kind:"2d",motion:"live",tags:["webgl","map","contours","minimal","light","elegant","cartography"],layout:"bottom-left",codeInScene:!0,copy:{eyebrow:"Survey sheet 404",title:"Off the map.",message:"This terrain was surveyed thoroughly. The page you were looking for isn't on it.",actions:[{label:"Back to known ground",href:"/",variant:"primary"}]},params:{paper:"#f4f1e8",line:"#8a6a4a",accent:"#e4572e",spacing:.045,tint:!1,low:"#dfe9d0",high:"#f2e4c4"},theme:{bg:"#f4f1e8",fg:"#2a1d10",accent:"#2a1d10","accent-fg":"#fff"},presetName:"Survey",presets:{night:{name:"Night Ops",params:{paper:"#0b1410",line:"#3dff8a",accent:"#ffffff",spacing:.05},theme:{bg:"#0b1410",fg:"#d6ffe6",accent:"#3dff8a","accent-fg":"#0b1410"}},tinted:{name:"Hypsometric",params:{tint:!0,low:"#cfe3c4",high:"#f2d9b0",line:"#5a4a32",accent:"#c1121f"},theme:{bg:"#e6e6cf"}},blue:{name:"Bathymetry",eyebrow:"Depth chart 404",title:"Sunk below the soundings.",params:{paper:"#e6f1fa",line:"#1d4e89",accent:"#ff6b35",tint:!0,low:"#9fc9ec",high:"#e6f1fa"},theme:{bg:"#e6f1fa",fg:"#0b2340"}},ink:{name:"Ink on Black",params:{paper:"#111111",line:"#e6e6e6",accent:"#ffcc00",spacing:.035},theme:{bg:"#111",fg:"#f2f2f2",accent:"#ffcc00","accent-fg":"#111"}}},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(cv.width*.08,cv.height*.34-cv.height*.22),drawFittedText(g,ctx.copy.code||"404",{width:cv.width*.84,height:cv.height*.44,font:SANS,weight:900,fit:.9}),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),uLine:linear(p.line),uAccent:linear(p.accent),uLow:linear(p.low),uHigh:linear(p.high),uSpacing:p.spacing,uTint:p.tint?1:0})}),resize:draw}}};export{topographic_default as default};

package/dist/scenes/torn-page.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    paper: string;
+    line: string;
+    under: string;
+    /** Tear direction: diagonal or horizontal. */
+    tear: "diagonal" | "horizontal";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/torn-page.js

@@ -0,0 +1,16 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]);function tearPath(rnd,horizontal){let pts=[],wob=0;for(let i=0;i<=46;i++){let t=i/46;wob+=(rnd()-.5)*2.2,wob*=.86;let jag=(rnd()-.5)*2.4;horizontal?pts.push([t*100,52+wob*2+jag]):pts.push([t*100,78-t*56+wob*2+jag])}return pts}var torn_page_default={id:"torn-page",name:"Torn Page",description:"The page you wanted, ripped in two. The halves drift apart to show the 404 beneath and lean toward your cursor.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","paper","torn","light","tactile","minimal"],layout:"center",copy:{eyebrow:"Error 404",title:"Someone tore this page out.",message:"There's nothing behind it but the error. The rest of the book is still on the shelf.",actions:[{label:"Back to the first page",href:"/",variant:"primary"}]},params:{paper:"#fbfaf6",line:"#e6e2d8",under:"#141414",tear:"diagonal"},theme:{bg:"#e7e3da",fg:"#f5f3ee",accent:"#f5f3ee","accent-fg":"#141414","code-color":"#f5f3ee"},presetName:"Notebook",presets:{mint:{name:"Mint Stationery",params:{paper:"#e9f7f0",line:"#cfe9dc",under:"#0f3b2a",tear:"horizontal"},theme:{bg:"#d4ebdf",fg:"#eafff4",accent:"#eafff4","accent-fg":"#0f3b2a","code-color":"#eafff4"}},newsprint:{name:"Newsprint",params:{paper:"#ebe6da",line:"#d6d0c2",under:"#c1121f"},theme:{bg:"#dcd6c8",fg:"#fff4e8",accent:"#fff4e8","accent-fg":"#c1121f","code-color":"#fff4e8"}},cobalt:{name:"Cobalt",params:{paper:"#ffffff",line:"#e6ebf5",under:"#1d3fd6",tear:"horizontal"},theme:{bg:"#e9eef8",fg:"#ffffff",accent:"#ffffff","accent-fg":"#1d3fd6","code-color":"#ffffff"}},kraft:{name:"Kraft",params:{paper:"#d9b88a",line:"#c6a273",under:"#2a1d10",tear:"horizontal"},theme:{bg:"#c9ab80","accent-fg":"#2a1d10",fg:"#f6ead6",accent:"#f6ead6","code-color":"#f6ead6"}},blueprint:{name:"Blueprint",params:{paper:"#1f4e8c",line:"#3a6aa8",under:"#f2f6fb"},theme:{bg:"#163b6b",fg:"#0f2a4d",accent:"#0f2a4d","accent-fg":"#fff","code-color":"#0f2a4d"}},red:{name:"Red Envelope",params:{paper:"#d7263d",line:"#c21f35",under:"#fff4e8",tear:"horizontal"},theme:{bg:"#b81d31",fg:"#2b0a0f",accent:"#2b0a0f","accent-fg":"#fff4e8","code-color":"#2b0a0f"}},midnight:{name:"Midnight",params:{paper:"#1c1d22",line:"#26272e",under:"#f3d35c"},theme:{bg:"#111216",fg:"#16130a",accent:"#16130a","accent-fg":"#f3d35c","code-color":"#16130a"}}},css:`
+& .tp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1600px}
+& .tp-under{position:absolute;width:min(78cqw,900px);height:min(78cqh,620px);background:var(--under);border-radius:6px;
+  box-shadow:inset 0 0 120px rgba(0,0,0,.35)}
+& .tp-half{position:absolute;width:min(78cqw,900px);height:min(78cqh,620px);background:var(--paper);border-radius:6px;
+  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);will-change:transform;filter:drop-shadow(0 18px 30px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.12))}
+& .tp-half .sheet{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;gap:14px;
+  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--line) 31px 32px);border-radius:inherit}
+& .tp-half .sk{background:var(--line);border-radius:6px;filter:brightness(.96)}
+& .tp-fibre{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
+& .lp-overlay{z-index:1}
+& .lp-code{color:var(--lp-code-color);--lp-code-size:clamp(110px,18cqw,240px);font-weight:800;letter-spacing:-.05em}
+& .lp-message{color:color-mix(in srgb,var(--lp-fg) 70%,transparent)}
+& .lp-stage{z-index:2;pointer-events:none}
+`,setup(ctx){let p=ctx.params,rnd=ctx.random,horizontal=p.tear==="horizontal",pts=tearPath(rnd,horizontal),fwd=pts.map(([x,y])=>`${x.toFixed(2)}% ${y.toFixed(2)}%`).join(","),back=[...pts].reverse().map(([x,y])=>`${x.toFixed(2)}% ${y.toFixed(2)}%`).join(","),clipA=horizontal?`polygon(0% 0%, 100% 0%, ${back})`:`polygon(0% 0%, 100% 0%, ${back})`,clipB=`polygon(${fwd}, 100% 100%, 0% 100%)`,skeleton=()=>[["28%","26px"],["62%","14px"],["100%","120px"],["90%","12px"],["96%","12px"],["70%","12px"],["100%","12px"],["84%","12px"],["40%","12px"],["92%","12px"]].map(([w,h])=>`<div class="sk" style="width:${w};height:${h}"></div>`).join(""),wrap=document.createElement("div");wrap.className="tp",wrap.style.setProperty("--paper",p.paper),wrap.style.setProperty("--line",p.line),wrap.style.setProperty("--under",p.under),wrap.innerHTML=`<div class="tp-half a" style="clip-path:${clipA}"><div class="sheet">${skeleton()}</div></div>
+      <div class="tp-half b" style="clip-path:${clipB}"><div class="sheet">${skeleton()}</div></div>`;let under=document.createElement("div");under.className="tp",under.innerHTML='<div class="tp-under"></div>',under.style.zIndex="0",under.style.setProperty("--under",p.under),ctx.root.insertBefore(under,ctx.root.firstChild),ctx.stage.append(wrap);let a=wrap.querySelector(".a"),b=wrap.querySelector(".b"),open=horizontal?{ax:0,ay:-34,ar:-3,bx:0,by:30,br:2.5}:{ax:-20,ay:-26,ar:-7,bx:20,by:24,br:6},opened=ctx.reducedMotion,t0=setTimeout(()=>opened=!0,600);return{frame(t){let k=opened?1:0,sx=ctx.pointer.sx*8,sy=ctx.pointer.sy*6,breathe=ctx.reducedMotion?0:Math.sin(t*.8)*1.2;a.style.transform=`translate(${(open.ax+sx*.6)*k}%, ${(open.ay-sy*.5-breathe)*k}%) rotate(${open.ar*k+ctx.pointer.sx*1.5}deg) rotateX(${ctx.pointer.sy*4}deg)`,b.style.transform=`translate(${(open.bx+sx*.4)*k}%, ${(open.by-sy*.3+breathe)*k}%) rotate(${open.br*k-ctx.pointer.sx*1.2}deg) rotateX(${ctx.pointer.sy*-4}deg)`,t>1&&(a.style.transition="transform .6s cubic-bezier(.2,.8,.2,1)",b.style.transition="transform .6s cubic-bezier(.2,.8,.2,1)")},destroy(){clearTimeout(t0),wrap.remove(),under.remove()}}}};export{torn_page_default as default};

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

@@ -0,0 +1,10 @@
+interface Params {
+    paper: string;
+    land: string;
+    ink: string;
+    sea: string;
+    red: string;
+    serpent: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/treasure-map.js

@@ -0,0 +1,3 @@
+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 treasure_map_default={id:"treasure-map",name:"Here Be Dragons",description:"An old parchment chart. The dotted route draws itself out past the known coast to an X in open water, where a sea serpent waits.",category:"Paper & Print",kind:"2d",motion:"live",tags:["canvas","map","pirate","vintage","illustration","light","adventure"],layout:"bottom-left",copy:{eyebrow:"Mare Incognitum",title:"Ye've sailed off the map.",message:"X marks the spot, but there's naught here but sea and serpents. Chart a course back to port.",actions:[{label:"Return to port",href:"/",variant:"primary"},{label:"Ask the harbourmaster",href:"/contact",variant:"secondary"}]},params:{paper:"#ead6ab",land:"#d8bd85",ink:"#4a2f17",sea:"#8a6a43",red:"#a3241a",serpent:!0},theme:{bg:"#ead6ab",fg:"#3a2410",accent:"#3a2410","accent-fg":"#f3e4c4","font-display":'"IM Fell English","Fraunces","Palatino Linotype",Palatino,Georgia,ui-serif,serif',"code-color":"rgba(58,36,16,.85)","title-weight":"600"},presetName:"Parchment",presets:{tropic:{name:"Tropical Chart",params:{paper:"#f2e2b8",land:"#9fcf7a",ink:"#3a2a12",sea:"#3a8aa8",red:"#d6281a"},theme:{bg:"#f2e2b8"}},blueprint:{name:"Blueprint Chart",params:{paper:"#1c4f8f",land:"#2a64a8",ink:"#e6f0ff",sea:"#9fc3ff",red:"#ffd23f",serpent:!0},theme:{bg:"#1c4f8f",fg:"#e6f0ff",accent:"#e6f0ff","accent-fg":"#1c4f8f","code-color":"rgba(230,240,255,.9)"}},night:{name:"Night Chart",params:{paper:"#1d2433",land:"#2a3346",ink:"#c9b78d",sea:"#7f8aa6",red:"#e2574c"},theme:{bg:"#1d2433",fg:"#e6d8b6",accent:"#e6d8b6","accent-fg":"#1d2433","code-color":"rgba(230,216,182,.9)"}},nautical:{name:"Admiralty",params:{paper:"#eef1ea",land:"#e7dcc0",ink:"#1f3550",sea:"#5d7896",red:"#c0392b",serpent:!1},theme:{bg:"#eef1ea",fg:"#1f3550",accent:"#1f3550","accent-fg":"#eef1ea","code-color":"rgba(31,53,80,.85)"}},sepia:{name:"Sepia",params:{paper:"#d9c3a0",land:"#c9ad80",ink:"#2e1c0e",sea:"#6b4f33",red:"#7a1d14"},theme:{bg:"#d9c3a0",fg:"#2e1c0e",accent:"#2e1c0e","accent-fg":"#e8d7b9"}}},css:`& .lp-code{--lp-code-size:clamp(70px,9cqw,128px);font-weight:600;letter-spacing:.02em;font-family:var(--lp-font-display)}
+& .lp-title{font-style:italic}
+& .lp-btn--primary{border-radius:2px}`,setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,base,route=[],xMark={x:0,y:0},noisy=seed=>{let a=Array.from({length:6},(_,i)=>({f:i+2,ph:seed*13.1+i*2.7,amp:.22/(i+1.2)}));return th=>1+a.reduce((s,k)=>s+Math.sin(th*k.f+k.ph)*k.amp,0)};function island(g,cx,cy,R,seed){let r=noisy(seed),path=new Path2D;for(let i=0;i<=160;i++){let th=i/160*Math.PI*2,rr=R*r(th),x=cx+Math.cos(th)*rr*1.25,y=cy+Math.sin(th)*rr*.8;i===0?path.moveTo(x,y):path.lineTo(x,y)}path.closePath();for(let k=3;k>=1;k--)g.save(),g.translate(cx,cy),g.scale(1+k*.07,1+k*.09),g.translate(-cx,-cy),g.strokeStyle=rgba(p.sea,.35-k*.07),g.lineWidth=1.1,g.setLineDash([6,5]),g.stroke(path),g.restore();g.setLineDash([]),g.fillStyle=p.land,g.fill(path),g.strokeStyle=p.ink,g.lineWidth=2,g.stroke(path),g.save(),g.clip(path),g.strokeStyle=rgba(p.ink,.12),g.lineWidth=1;for(let x=cx-R*2;x<cx+R*2;x+=7)g.beginPath(),g.moveTo(x,cy-R*1.5),g.lineTo(x+R*.6,cy+R*1.5),g.stroke();g.restore(),g.strokeStyle=p.ink,g.lineWidth=1.6;for(let i=0;i<6;i++){let mx=cx+(rnd()-.5)*R*1.3,my=cy+(rnd()-.5)*R*.6,s=R*(.12+rnd()*.08);g.beginPath(),g.moveTo(mx-s,my+s*.4),g.lineTo(mx,my-s*.8),g.lineTo(mx+s,my+s*.4),g.stroke(),g.beginPath(),g.moveTo(mx,my-s*.8),g.lineTo(mx+s*.25,my+s*.4),g.stroke()}return path}function compass(g,x,y,R){g.save(),g.translate(x,y),g.strokeStyle=p.ink,g.fillStyle=p.ink,g.lineWidth=1.2,g.beginPath(),g.arc(0,0,R,0,Math.PI*2),g.stroke(),g.beginPath(),g.arc(0,0,R*.82,0,Math.PI*2),g.stroke();for(let i=0;i<32;i++){let a=i/32*Math.PI*2;g.beginPath(),g.moveTo(Math.cos(a)*R*.82,Math.sin(a)*R*.82),g.lineTo(Math.cos(a)*R*(i%4?.9:.97),Math.sin(a)*R*(i%4?.9:.97)),g.stroke()}for(let i=0;i<8;i++){let a=i/8*Math.PI*2-Math.PI/2,len=i%2?R*.5:R*.8,w=R*.11;for(let side of[-1,1])g.beginPath(),g.moveTo(0,0),g.lineTo(Math.cos(a)*len,Math.sin(a)*len),g.lineTo(Math.cos(a+side*Math.PI/2)*w,Math.sin(a+side*Math.PI/2)*w),g.closePath(),side<0?g.fill():g.stroke()}g.font=`600 ${R*.36}px Georgia,serif`,g.textAlign="center",g.fillText("N",0,-R*1.08),g.restore()}function build(){let w=Math.ceil(c.w),h=Math.ceil(c.h),sc=Math.min(2,ctx.dpr);base=document.createElement("canvas"),base.width=w*sc,base.height=h*sc;let g=base.getContext("2d");g.scale(sc,sc),g.fillStyle=p.paper,g.fillRect(0,0,w,h);for(let i=0;i<26;i++){let x=rnd()*w,y=rnd()*h,r=40+rnd()*220,grd=g.createRadialGradient(x,y,0,x,y,r);grd.addColorStop(0,rgba(p.ink,.07*rnd())),grd.addColorStop(1,rgba(p.ink,0)),g.fillStyle=grd,g.fillRect(x-r,y-r,r*2,r*2)}g.strokeStyle=rgba(p.ink,.05);for(let i=0;i<w*h/900;i++){let x=rnd()*w,y=rnd()*h;g.beginPath(),g.moveTo(x,y),g.lineTo(x+(rnd()-.5)*30,y+(rnd()-.5)*6),g.stroke()}let cx=w*.84,cy=h*.22;g.strokeStyle=rgba(p.ink,.12),g.lineWidth=.8;for(let i=0;i<16;i++){let a=i/16*Math.PI*2;g.beginPath(),g.moveTo(cx,cy),g.lineTo(cx+Math.cos(a)*w*1.5,cy+Math.sin(a)*w*1.5),g.stroke()}let R=Math.min(w,h)*.17;island(g,w*.2,h*.36,R,1.7),island(g,w*.43,h*.18,R*.42,4.2),island(g,w*.36,h*.62,R*.32,8.9),compass(g,cx,cy,Math.min(w,h)*.075),g.fillStyle=p.ink,g.textAlign="center",g.font=`italic 600 ${Math.max(13,R*.16)}px Georgia,serif`,g.fillText("Terra Cognita",w*.2,h*.36+R*.06),g.font=`italic ${Math.max(12,R*.13)}px Georgia,serif`,g.fillStyle=rgba(p.ink,.7),g.fillText("M A R E   I N C O G N I T U M",w*.66,h*.52);let v=g.createRadialGradient(w/2,h/2,Math.min(w,h)*.35,w/2,h/2,Math.max(w,h)*.75);v.addColorStop(0,rgba(p.ink,0)),v.addColorStop(1,rgba(p.ink,.5)),g.fillStyle=v,g.fillRect(0,0,w,h);let start={x:w*.25,y:h*.4};xMark={x:w*.74,y:h*.4},route=[];let pts=[start,{x:w*.34,y:h*.47},{x:w*.47,y:h*.4},{x:w*.57,y:h*.3},{x:w*.66,y:h*.36},xMark];for(let i=0;i<pts.length-1;i++){let a=pts[Math.max(0,i-1)],b=pts[i],cc=pts[i+1],d=pts[Math.min(pts.length-1,i+2)];for(let k=0;k<30;k++){let t=k/30,t2=t*t,t3=t2*t,f=(p0,p1,p2,p3)=>.5*(2*p1+(-p0+p2)*t+(2*p0-5*p1+4*p2-p3)*t2+(-p0+3*p1-3*p2+p3)*t3);route.push({x:f(a.x,b.x,cc.x,d.x),y:f(a.y,b.y,cc.y,d.y)})}}route.push(xMark)}return build(),{resize(){c.reset(),build()},frame(t){let g=c.g;c.reset(),g.drawImage(base,0,0,c.w,c.h);let prog=ctx.reducedMotion?1:Math.min(1,Math.max(0,(t-.4)/3.2)),upto=Math.floor(prog*(route.length-1));g.fillStyle=p.red;let acc=0;for(let i=1;i<=upto;i++){let a=route[i-1],b=route[i];acc+=Math.hypot(b.x-a.x,b.y-a.y),acc>11&&(acc=0,g.beginPath(),g.arc(b.x,b.y,2.2,0,Math.PI*2),g.fill())}let s0=route[0];if(g.strokeStyle=p.red,g.lineWidth=2,g.beginPath(),g.arc(s0.x,s0.y,6,0,Math.PI*2),g.stroke(),g.font="italic 13px Georgia,serif",g.fillStyle=p.ink,g.textAlign="left",g.fillText("you were here",s0.x+10,s0.y+18),prog>=1){let k=Math.min(1,(t-3.6)*3+(ctx.reducedMotion?1:0)),s=16*k;g.strokeStyle=p.red,g.lineWidth=4,g.lineCap="round",g.beginPath(),g.moveTo(xMark.x-s,xMark.y-s),g.lineTo(xMark.x+s,xMark.y+s),g.moveTo(xMark.x+s,xMark.y-s),g.lineTo(xMark.x-s,xMark.y+s),g.stroke(),g.fillStyle=p.ink,g.font=`italic 600 ${Math.max(14,c.w*.012)}px Georgia,serif`,g.textAlign="center",g.globalAlpha=k,g.fillText(`${ctx.copy.code}: here be dragons`,xMark.x,xMark.y+40),g.globalAlpha=1}if(p.serpent){let sx=xMark.x+c.w*.04,sy=xMark.y+c.h*.17;g.strokeStyle=p.ink,g.fillStyle=p.land,g.lineWidth=2;for(let i=0;i<4;i++){let ph=t*1.2-i*.7,hx2=sx-i*44,rise=14+Math.sin(ph)*5;g.beginPath(),g.moveTo(hx2-18,sy),g.quadraticCurveTo(hx2,sy-rise*1.8,hx2+18,sy),g.fill(),g.stroke(),g.beginPath(),g.moveTo(hx2-6,sy-rise*.75),g.lineTo(hx2-3,sy-rise*1.05),g.lineTo(hx2,sy-rise*.85),g.stroke(),g.beginPath(),g.moveTo(hx2-24,sy+2),g.lineTo(hx2-16,sy+2),g.moveTo(hx2+16,sy+2),g.lineTo(hx2+24,sy+2),g.stroke()}let hx=sx+36,hy=sy-22+Math.sin(t*1.2+.7)*4;g.beginPath(),g.moveTo(sx+16,sy),g.quadraticCurveTo(sx+28,sy-10,hx,hy),g.quadraticCurveTo(hx+22,hy-6,hx+26,hy+4),g.quadraticCurveTo(hx+12,hy+8,sx+30,sy),g.closePath(),g.fill(),g.stroke(),g.fillStyle=p.ink,g.beginPath(),g.arc(hx+10,hy-1,2,0,Math.PI*2),g.fill()}let shipT=ctx.reducedMotion?.55:t*.03%1,sp=route[Math.floor(shipT*(route.length-1))];g.save(),g.translate(sp.x,sp.y-26+Math.sin(t*1.6)*2),g.rotate(Math.sin(t*1.3)*.08),g.strokeStyle=p.ink,g.fillStyle=p.land,g.lineWidth=1.6,g.beginPath(),g.moveTo(-16,0),g.lineTo(16,0),g.lineTo(10,8),g.lineTo(-10,8),g.closePath(),g.fill(),g.stroke(),g.beginPath(),g.moveTo(0,0),g.lineTo(0,-26),g.stroke(),g.beginPath(),g.moveTo(1,-24),g.quadraticCurveTo(14,-14,1,-4),g.closePath(),g.fill(),g.stroke(),g.restore()}}}};export{treasure_map_default as default};

package/dist/scenes/typewriter.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    paper: string;
+    ink: string;
+    desk: string;
+    /** ms per character */
+    speed: number;
+    letter: string[];
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/typewriter.js

@@ -0,0 +1,23 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),typewriter_default={id:"typewriter",name:"Typewriter",description:"An old typewriter types you a short, polite letter about the missing page, one clack at a time.",category:"Paper & Print",kind:"2d",motion:"live",tags:["dom","typewriter","vintage","letter","light","editorial","warm"],layout:"none",copy:{title:"A letter about your page",message:"",actions:[{label:"Return to the homepage",href:"/",variant:"primary"}]},params:{paper:"#fbf8f1",ink:"#1f1d1a",desk:"#3b2a1e",speed:28,letter:["Dear visitor,","","We regret to inform you that the page you","requested could not be found. We have looked","in the drawers, under the blotter and behind","the filing cabinet.","","It may have moved, or it may never have been.","","Yours faithfully,","The Management"]},theme:{bg:"#3b2a1e",fg:"#1f1d1a",accent:"#1f1d1a","accent-fg":"#fbf8f1"},presetName:"Office",presets:{noir:{name:"Detective's Report",params:{paper:"#efe8d6",ink:"#1a1a1a",desk:"#141414",letter:["CASE FILE 404","","Subject: one (1) web page.","Last seen: this address.","Status: missing.","","Leads: none. Suspects: a broken link.","Recommendation: return to the homepage.","","\u2014 Det. Lostpage"]},theme:{bg:"#141414",fg:"#1a1a1a",accent:"#1a1a1a","accent-fg":"#efe8d6"}},love:{name:"Love Letter",params:{paper:"#fff3f3",ink:"#6b0f1a",desk:"#c98a8a",letter:["My dearest visitor,","","I waited for you at this address,","but the page and I were never meant to be.","","Go home. I'll be fine.","","Forever not found,","404"]},theme:{bg:"#c98a8a",fg:"#6b0f1a",accent:"#6b0f1a","accent-fg":"#fff3f3"}},telegram:{name:"Telegram",params:{paper:"#f2e6b8",ink:"#111",desk:"#1d2a2a",letter:["TELEGRAM","","PAGE NOT FOUND STOP","SEARCHED EVERYWHERE STOP","PLEASE RETURN TO HOMEPAGE STOP","","END"]},theme:{bg:"#1d2a2a",fg:"#111",accent:"#111","accent-fg":"#f2e6b8"}}},css:`
+& .tw{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--desk) 85%,#fff),var(--desk) 70%);overflow:hidden}
+& .tw-sheet{position:relative;margin-top:clamp(20px,6cqh,70px);width:min(720px,92cqw);min-height:78cqh;background:var(--paper);color:var(--ink);padding:clamp(28px,6cqw,72px) clamp(24px,6cqw,80px);
+  box-shadow:0 30px 60px -25px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.04);transform:rotate(-.6deg);font:clamp(14px,1.45cqw,18.5px)/1.75 "Courier Prime","Courier New",ui-monospace,monospace}
+& .tw-sheet::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}
+& .tw-head{display:flex;justify-content:space-between;font-size:.82em;opacity:.7;margin-bottom:2.2em}
+& .tw-body{white-space:pre-wrap;min-height:12em}
+& .tw-body span{opacity:.92;text-shadow:.3px 0 currentColor}
+& .tw-caret{display:inline-block;width:.55em;height:1.1em;vertical-align:-.15em;background:currentColor;opacity:.5;animation:tw-c 1s steps(1) infinite}
+@keyframes tw-c{50%{opacity:0}}
+& .tw-code{position:absolute;right:clamp(20px,4cqw,48px);top:clamp(20px,4cqw,48px);font:700 clamp(26px,3cqw,40px)/1 inherit;color:#b3261e;border:3px solid #b3261e;padding:.15em .35em;transform:rotate(8deg);opacity:0;transition:opacity .4s,transform .4s}
+& .tw-code.on{opacity:.85;transform:rotate(-8deg) scale(1)}
+& .tw-act{margin-top:2.4em;opacity:0;transition:opacity .6s}
+& .tw-act.on{opacity:1}
+& .tw-act a{color:var(--ink);font-weight:700}
+@media (prefers-reduced-motion:reduce){& .tw-caret{animation:none}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,date=new Date().toLocaleDateString(void 0,{day:"numeric",month:"long",year:"numeric"}),wrap=document.createElement("div");wrap.className="tw",wrap.style.setProperty("--paper",p.paper),wrap.style.setProperty("--ink",p.ink),wrap.style.setProperty("--desk",p.desk);let text=p.letter.join(`
+`);wrap.innerHTML=`<div class="tw-sheet"><div class="tw-code" aria-hidden="true">${esc(c.code)}</div>
+      <div class="tw-head"><span>Ref. ${esc(c.code)}/${esc(typeof location<"u"?location.pathname:"/")}</span><span>${esc(date)}</span></div>
+      <h1 class="lp-sr">Error ${esc(c.code)}: ${esc(c.title)}</h1><p class="lp-sr">${esc(text)}</p>
+      <div class="tw-body" aria-hidden="true"><span></span><i class="tw-caret"></i></div>
+      <div class="tw-act">${c.actions.map(a=>`<a href="${esc(a.href??"/")}">${esc(a.label)} \u2192</a>`).join("<br>")}</div></div>`,ctx.root.append(wrap);let out=wrap.querySelector(".tw-body span"),stamp=wrap.querySelector(".tw-code"),act=wrap.querySelector(".tw-act"),sheet=wrap.querySelector(".tw-sheet");wrap.querySelectorAll(".tw-act a").forEach(a=>a.addEventListener("click",e=>{e.metaKey||e.ctrlKey||(e.preventDefault(),ctx.navigate(a.getAttribute("href"),e))}));let shown=-1;return{frame(t){let budget=ctx.reducedMotion?1e9:(t-.6)*1e3,n=0;for(;n<text.length&&budget>0;){let ch=text[n];budget-=p.speed*(ch===`
+`?9:".,".includes(ch)?5:1+n*7919%5*.25),budget>0&&n++}n!==shown&&(shown=n,out.textContent=text.slice(0,n),ctx.reducedMotion||(sheet.style.transform=`rotate(-.6deg) translateX(${n%2*.6}px)`));let done=n>=text.length;stamp.classList.toggle("on",done),act.classList.toggle("on",done)},destroy(){wrap.remove()}}}};export{typewriter_default as default};

package/dist/scenes/ufo.d.ts

@@ -0,0 +1,11 @@
+interface Params {
+    skyTop: string;
+    skyBottom: string;
+    ground: string;
+    ship: string;
+    beam: string;
+    lights: string[];
+    stars: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/ufo.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 ufo_default={id:"ufo",name:"Abducted",description:"A flying saucer hovers over a quiet field and beams your page up, page by page. Move the pointer and it follows.",category:"Space",kind:"2d",motion:"live",tags:["canvas","ufo","aliens","funny","night","illustration","interactive"],layout:"bottom",codeInScene:!1,copy:{eyebrow:"Close encounter",title:"Your page was abducted.",message:"Witnesses saw a bright light, then the page was gone. We're negotiating its return. Meanwhile, the homepage is safe.",actions:[{label:"Return to Earth",href:"/",variant:"primary"}]},params:{skyTop:"#050a1f",skyBottom:"#1b2a55",ground:"#0b1a14",ship:"#c9d1de",beam:"#b7ffcf",lights:["#ff5a5a","#ffd25a","#5affb0","#5ac8ff"],stars:!0},theme:{bg:"#0b1a14",fg:"#eaf6ff",accent:"#b7ffcf","accent-fg":"#04140c","code-color":"rgba(183,255,207,.9)"},presetName:"Farm Night",presets:{city:{name:"City Rooftops",eyebrow:"Over the city",params:{skyTop:"#0a0618",skyBottom:"#3a1f5a",ground:"#0d0a14",ship:"#d9dce6",beam:"#d9b3ff",lights:["#ff3bd4","#3bd6ff","#ffffff"]},theme:{bg:"#0d0a14",accent:"#d9b3ff","accent-fg":"#12052a","code-color":"rgba(217,179,255,.9)"}},snow:{name:"Snowfield",params:{skyTop:"#1a2a44",skyBottom:"#7a94b8",ground:"#e6eef6",ship:"#a9b4c4",beam:"#fff6c2",stars:!0},theme:{bg:"#e6eef6",fg:"#0f1a2a",accent:"#0f1a2a","accent-fg":"#fff","code-color":"rgba(15,26,42,.85)"}},desert:{name:"Desert",params:{skyTop:"#1a0f2e",skyBottom:"#c4623a",ground:"#5a2e1a",beam:"#fff2b3",ship:"#e0d6c8"},theme:{bg:"#5a2e1a",accent:"#fff2b3","accent-fg":"#2a1206","code-color":"rgba(255,242,179,.9)"}},retro:{name:"B-Movie",eyebrow:"They came from page 404",params:{skyTop:"#0d0d0d",skyBottom:"#3a3a3a",ground:"#151515",ship:"#e6e6e6",beam:"#ffffff",lights:["#ffffff","#bbbbbb"],stars:!0},theme:{bg:"#151515",accent:"#fff","accent-fg":"#000","font-display":'"Courier New",ui-monospace,monospace',"code-color":"#fff"}},day:{name:"Broad Daylight",eyebrow:"In broad daylight",params:{skyTop:"#6fb6ff",skyBottom:"#d9f0ff",ground:"#5aa35a",ship:"#8a94a6",beam:"#fff6a6",stars:!1},theme:{bg:"#5aa35a",fg:"#0d2a12",accent:"#0d2a12","accent-fg":"#fff","code-color":"rgba(13,42,18,.85)"}}},css:"& .lp-code{--lp-code-size:clamp(64px,8cqw,120px);font-weight:800}",setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,stars=[],sheets=[],ux=0,lastSheet=0,build=()=>{stars=Array.from({length:220},()=>[rnd()*c.w,rnd()*c.h*.7,rnd()]),ux=c.w*.5};build();let sheet=(g,x,y,s,rot,a)=>{g.save(),g.translate(x,y),g.rotate(rot),g.scale(Math.cos(rot*1.7),1),g.globalAlpha=a,g.fillStyle="#ffffff",g.fillRect(-s*.36,-s/2,s*.72,s),g.fillStyle="#c9ced6";for(let i=0;i<6;i++)g.fillRect(-s*.26,-s*.36+i*s*.13,s*(i===0?.3:.52),s*.05);g.fillStyle="#ff5a5a",g.font=`800 ${s*.22}px Inter,Arial,sans-serif`,g.textAlign="center",g.fillText(ctx.copy.code,0,s*.42),g.restore()};return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset();let groundY=c.h*.74,sky=g.createLinearGradient(0,0,0,groundY);if(sky.addColorStop(0,p.skyTop),sky.addColorStop(1,p.skyBottom),g.fillStyle=sky,g.fillRect(0,0,c.w,c.h),p.stars)for(let[x,y,b]of stars)g.fillStyle=`rgba(255,255,255,${.3+.7*b*(.6+.4*Math.sin(t*2+x))})`,g.fillRect(x,y,1.4,1.4);g.fillStyle=rgba("#fff6dd",p.stars?.9:.5),g.beginPath(),g.arc(c.w*.86,c.h*.14,Math.min(c.w,c.h)*.045,0,Math.PI*2),g.fill(),g.fillStyle=rgba(p.ground,1),g.beginPath(),g.moveTo(0,c.h);for(let x=0;x<=c.w;x+=12)g.lineTo(x,groundY-Math.sin(x*.004+1)*c.h*.03-Math.sin(x*.011)*c.h*.012);g.lineTo(c.w,c.h),g.fill();let bx=c.w*.14;g.fillStyle=rgba("#000000",.55),g.beginPath(),g.moveTo(bx,groundY),g.lineTo(bx,groundY-60),g.lineTo(bx+45,groundY-95),g.lineTo(bx+90,groundY-60),g.lineTo(bx+90,groundY),g.fill(),g.fillStyle=rgba(p.lights[1]??"#ffd25a",.8),g.fillRect(bx+38,groundY-58,14,14);let target=ctx.pointer.engaged?ctx.pointer.x:c.w*(.5+Math.sin(t*.3)*.18);ux+=(target-ux)*Math.min(1,dt*1.5);let uy=c.h*.2+Math.sin(t*1.4)*8,W=Math.min(c.w*.26,300),beamW=W*.4,grd=g.createLinearGradient(0,uy,0,groundY);grd.addColorStop(0,rgba(p.beam,.55)),grd.addColorStop(1,rgba(p.beam,.08)),g.fillStyle=grd,g.beginPath(),g.moveTo(ux-beamW*.3,uy+W*.08),g.lineTo(ux+beamW*.3,uy+W*.08),g.lineTo(ux+beamW*1.4,groundY+6),g.lineTo(ux-beamW*1.4,groundY+6),g.closePath(),g.fill(),g.fillStyle=rgba(p.beam,.25),g.beginPath(),g.ellipse(ux,groundY+4,beamW*1.4,10,0,0,Math.PI*2),g.fill(),dt>0&&t-lastSheet>1.1&&(lastSheet=t,sheets.push({y:groundY-10,rot:rnd()*6,vr:(rnd()-.5)*2,x:(rnd()-.5)*beamW,alpha:1}));for(let s of sheets){s.y-=(groundY-uy)*.12*dt,s.rot+=s.vr*dt;let k=(s.y-uy)/(groundY-uy);s.alpha=Math.min(1,k*4),sheet(g,ux+s.x*k,s.y,Math.max(16,W*.16)*(.5+.5*k),s.rot,s.alpha)}sheets=sheets.filter(s=>s.y>uy+10),g.save(),g.translate(ux,uy),g.rotate(Math.sin(t*.9)*.05+(target-ux)*4e-4);let dome=g.createRadialGradient(-W*.06,-W*.16,0,0,-W*.08,W*.2);dome.addColorStop(0,"rgba(220,255,240,.95)"),dome.addColorStop(1,rgba(p.beam,.35)),g.fillStyle=dome,g.beginPath(),g.ellipse(0,-W*.06,W*.17,W*.15,0,Math.PI,0),g.fill();let hull=g.createLinearGradient(0,-W*.08,0,W*.1);hull.addColorStop(0,"#ffffff"),hull.addColorStop(.45,p.ship),hull.addColorStop(1,"#4a5160"),g.fillStyle=hull,g.beginPath(),g.ellipse(0,0,W/2,W*.09,0,0,Math.PI*2),g.fill(),g.fillStyle="#3a404c",g.beginPath(),g.ellipse(0,W*.04,W*.24,W*.04,0,0,Math.PI*2),g.fill();for(let i=0;i<9;i++){let a=i/9*Math.PI*2+t*2,lx=Math.cos(a)*W*.4,ly=Math.sin(a)*W*.05;if(Math.sin(a)<-.2)continue;let col=p.lights[i%p.lights.length];g.fillStyle=col,g.shadowColor=col,g.shadowBlur=12,g.beginPath(),g.arc(lx,ly+W*.01,W*.018,0,Math.PI*2),g.fill()}g.shadowBlur=0,g.restore()}}}};export{ufo_default as default};

package/dist/scenes/unplugged.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    wall: string;
+    cable: string;
+    plug: string;
+    socket: string;
+    spark: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/unplugged.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 unplugged_default={id:"unplugged",name:"Unplugged",description:"Someone pulled the plug on this page. Drag the plug back into the socket and you'll be taken home.",category:"Physics",kind:"2d",motion:"live",tags:["canvas","physics","rope","drag","interactive","funny","light"],layout:"bottom-left",codeInScene:!1,copy:{eyebrow:"Connection lost",title:"Someone pulled the plug.",message:"This page lost power. Drag the plug into the socket to reconnect to the homepage.",actions:[{label:"Or just go home",href:"/",variant:"secondary",icon:"arrow"}]},params:{wall:"#f1eee8",cable:"#1d1d1f",plug:"#2a2a2c",socket:"#ffffff",spark:"#ffd23f"},theme:{bg:"#f1eee8",fg:"#1d1d1f",accent:"#1d1d1f","accent-fg":"#fff","code-color":"rgba(29,29,31,.12)"},presetName:"Studio",presets:{mint:{name:"Mint",params:{wall:"#dff5ec",cable:"#0f3b2a",plug:"#0f3b2a",socket:"#ffffff",spark:"#ffb000"},theme:{bg:"#dff5ec",fg:"#0f3b2a",accent:"#0f3b2a","accent-fg":"#fff","code-color":"rgba(15,59,42,.12)"}},dark:{name:"After Hours",params:{wall:"#18191c",cable:"#e9e9ea",plug:"#d9d9dc",socket:"#2a2c31",spark:"#5ad1ff"},theme:{bg:"#18191c",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#18191c","code-color":"rgba(242,242,242,.1)"}},orange:{name:"Safety Orange",params:{wall:"#ff6a2b",cable:"#1b1b1b",plug:"#1b1b1b",socket:"#fff4ec",spark:"#fff36b"},theme:{bg:"#ff6a2b",fg:"#1b1b1b",accent:"#1b1b1b","accent-fg":"#ff6a2b","code-color":"rgba(27,27,27,.14)"}}},css:"& .lp-code{--lp-code-size:clamp(110px,16cqw,240px);font-weight:900;letter-spacing:-.06em}",setup(ctx){let p=ctx.params,c=canvas2d(ctx),N=26,pts=[],seg=0,grab=!1,plugged=!1,pluggedAt=0,sparks=[],socketPos=()=>({x:c.w*.78,y:c.h*.36}),build=()=>{pts=[];let ax=c.w*.22,ay=-10;seg=Math.min(c.h*.62,c.w*.5)/N;for(let i=0;i<N;i++){let x=ax+Math.sin(i/3)*12,y=ay+i*seg*.95;pts.push({x,y,px:x,py:y})}plugged=!1};return build(),ctx.on("pointerdown",e=>{if(e.target.closest("a,button"))return;let end=pts[N-1];Math.hypot(ctx.pointer.x-end.x,ctx.pointer.y-end.y)<90&&(grab=!0,plugged=!1)}),ctx.onWindow("pointerup",()=>{if(!grab)return;grab=!1;let s=socketPos(),end=pts[N-1];Math.hypot(end.x-(s.x-36),end.y-s.y)<70&&(plugged=!0,pluggedAt=performance.now())}),{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset();let s=socketPos();if(dt>0){let grav=c.h*1.6;for(let i=1;i<N;i++){let q=pts[i],vx=(q.x-q.px)*.985,vy=(q.y-q.py)*.985;q.px=q.x,q.py=q.y,q.x+=vx,q.y+=vy+grav*dt*dt}let end=pts[N-1];grab?(end.x+=(ctx.pointer.x-end.x)*.6,end.y+=(ctx.pointer.y-end.y)*.6):plugged?(end.x=s.x-36,end.y=s.y):ctx.pointer.engaged||(end.x+=Math.sin(t*.9)*.9);for(let it=0;it<18;it++){pts[0].x=c.w*.22,pts[0].y=-10;for(let i=0;i<N-1;i++){let a=pts[i],b=pts[i+1],dx=b.x-a.x,dy=b.y-a.y,d=Math.hypot(dx,dy)||1,diff=(d-seg)/d,wa=i===0?0:.5,wb=i+1===N-1&&(grab||plugged)?0:1-wa;a.x+=dx*diff*wa,a.y+=dy*diff*wa,b.x-=dx*diff*wb,b.y-=dy*diff*wb}for(let q of pts)q.y>c.h-8&&(q.y=c.h-8)}if(!plugged&&Math.random()<dt*.9){let e2=pts[N-1];for(let i=0;i<12;i++)sparks.push({x:e2.x+24,y:e2.y,vx:(Math.random()-.3)*260,vy:(Math.random()-.7)*260,life:.4+Math.random()*.3})}}g.fillStyle=p.wall,g.fillRect(0,0,c.w,c.h),g.save(),g.translate(s.x,s.y),g.fillStyle="rgba(0,0,0,.12)",g.beginPath(),g.roundRect(-52,-68,116,156,18),g.fill(),g.fillStyle=p.socket,g.beginPath(),g.roundRect(-58,-78,116,156,18),g.fill(),g.strokeStyle="rgba(0,0,0,.12)",g.stroke(),g.fillStyle="rgba(0,0,0,.06)",g.beginPath(),g.arc(0,0,40,0,Math.PI*2),g.fill(),g.fillStyle="#1d1d1f",g.beginPath(),g.roundRect(-16,-14,8,28,3),g.roundRect(8,-14,8,28,3),g.fill();let on=plugged;g.fillStyle=on?"#3dff7a":Math.floor(t*2)%2?"#ff4d4d":"#7a1f1f",g.shadowColor=g.fillStyle,g.shadowBlur=10,g.beginPath(),g.arc(0,-56,5,0,Math.PI*2),g.fill(),g.shadowBlur=0,g.restore(),g.strokeStyle=p.cable,g.lineCap="round",g.lineJoin="round",g.lineWidth=9,g.beginPath(),g.moveTo(pts[0].x,pts[0].y);for(let i=1;i<N-1;i++){let mx=(pts[i].x+pts[i+1].x)/2,my=(pts[i].y+pts[i+1].y)/2;g.quadraticCurveTo(pts[i].x,pts[i].y,mx,my)}g.lineTo(pts[N-1].x,pts[N-1].y),g.stroke(),g.strokeStyle="rgba(255,255,255,.18)",g.lineWidth=2,g.stroke();let e=pts[N-1],pr=pts[N-3],ang=plugged?0:Math.atan2(e.y-pr.y,e.x-pr.x);g.save(),g.translate(e.x,e.y),g.rotate(ang),g.fillStyle="#c9c9cc",g.fillRect(22,-12,22,6),g.fillRect(22,6,22,6),g.fillStyle=p.plug,g.beginPath(),g.roundRect(-20,-22,44,44,9),g.fill(),g.fillStyle="rgba(255,255,255,.12)",g.fillRect(-14,-18,30,4),g.restore();for(let sp of sparks)sp.x+=sp.vx*dt,sp.y+=sp.vy*dt,sp.vy+=900*dt,sp.life-=dt,g.strokeStyle=rgba(p.spark,Math.max(0,sp.life*2.5)),g.lineWidth=2,g.beginPath(),g.moveTo(sp.x,sp.y),g.lineTo(sp.x-sp.vx*.02,sp.y-sp.vy*.02),g.stroke();sparks=sparks.filter(sp=>sp.life>0),g.fillStyle=rgba(p.cable,.5),g.font="600 12px ui-monospace,Menlo,monospace",g.textAlign="center",g.fillText(plugged?"reconnecting\u2026":"drag the plug into the socket",s.x,s.y+104),plugged&&performance.now()-pluggedAt>900&&(plugged=!1,pluggedAt=1/0,ctx.navigate(ctx.copy.actions[0]?.href??"/"))}}}};export{unplugged_default as default};

package/dist/scenes/vending-machine.d.ts

@@ -0,0 +1,7 @@
+interface Params {
+    body: string;
+    glass: string;
+    accent: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;