lostpage 0.0.0-stage → 0.2.0

package/dist/scenes/vending-machine.js

@@ -0,0 +1,27 @@
+import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var esc=s=>s.replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[c]),ITEMS=["\u{1F964}","\u{1F36B}","\u{1F36A}","\u{1F968}","\u{1F9C3}","\u{1F36C}","\u{1F35F}","\u{1F95C}","\u{1F369}","\u{1F9CB}","\u{1F36D}","\u{1F96F}"],vending_machine_default={id:"vending-machine",name:"Sold Out",description:"A glowing vending machine where every slot is stocked except yours. Type the code into the keypad and watch what happens.",category:"Playful",kind:"2d",motion:"interactive",tags:["dom","vending","funny","interactive","retro","neon","keypad"],layout:"right",copy:{eyebrow:"Slot 404",title:"This one's sold out.",message:"Everything else is in stock. Try the keypad, or pick something from the homepage.",actions:[{label:"Browse the homepage",href:"/",variant:"primary"}]},params:{body:"#d62839",glass:"#0d1424",accent:"#3dff8a"},theme:{bg:"#121826",fg:"#f2f5ff",accent:"#3dff8a","accent-fg":"#021208"},presetName:"Cola Red",presets:{green:{name:"Tea Machine",params:{body:"#2a7a4a",glass:"#06140c",accent:"#ffd23f"},theme:{accent:"#ffd23f","accent-fg":"#1a1400"}},blue:{name:"Midnight Blue",params:{body:"#1f4e9c",glass:"#081020",accent:"#7fd3ff"},theme:{accent:"#7fd3ff","accent-fg":"#04121f"}},tokyo:{name:"Tokyo White",params:{body:"#f2f2f2",glass:"#101418",accent:"#ff3b5c"},theme:{bg:"#e7e9ee",fg:"#101418",accent:"#ff3b5c","accent-fg":"#fff"}}},css:`
+& .vm-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding-left:clamp(20px,10cqw,180px)}
+& .vm{--u:clamp(8px,1.05cqh,12px);position:relative;width:calc(var(--u)*44);height:calc(var(--u)*72);background:linear-gradient(90deg,color-mix(in srgb,var(--body) 75%,#000),var(--body) 12%,var(--body) 88%,color-mix(in srgb,var(--body) 70%,#000));
+  border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*2.4);display:grid;grid-template-columns:1fr calc(var(--u)*10);gap:calc(var(--u)*1.6);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
+& .vm::before{content:"";position:absolute;left:0;right:0;top:calc(var(--u)*-2.6);height:calc(var(--u)*3);border-radius:calc(var(--u)*1) calc(var(--u)*1) 0 0;background:color-mix(in srgb,var(--body) 80%,#fff)}
+& .vm-glass{position:relative;background:var(--glass);border-radius:calc(var(--u)*.8);padding:calc(var(--u)*1.2);display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:calc(var(--u)*.8);
+  box-shadow:inset 0 0 calc(var(--u)*3) rgba(120,200,255,.25);overflow:hidden}
+& .vm-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%,transparent 60%,rgba(255,255,255,.06));pointer-events:none}
+& .vm-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-bottom:calc(var(--u)*.35) solid #9aa3b5}
+& .vm-slot .it{font-size:calc(var(--u)*3.3);line-height:1;transition:transform .6s cubic-bezier(.5,0,.75,0)}
+& .vm-slot .tag{font:700 calc(var(--u)*.95)/1 var(--lp-font-mono);color:#cfd6e6;margin-top:calc(var(--u)*.5)}
+& .vm-slot.out .it{opacity:.18;filter:grayscale(1)}
+& .vm-slot.out .so{position:absolute;inset:auto 0 calc(var(--u)*2.4);margin:auto;width:max-content;transform:rotate(-12deg);font:800 calc(var(--u)*1.1)/1 var(--lp-font);color:#fff;background:#e5484d;padding:calc(var(--u)*.35) calc(var(--u)*.6);border-radius:4px;letter-spacing:.08em}
+& .vm-slot.drop .it{transform:translateY(calc(var(--u)*30))}
+& .vm-side{display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
+& .vm-screen{background:#071009;color:var(--accent);font:700 calc(var(--u)*1.5)/1.2 var(--lp-font-mono);padding:calc(var(--u)*.9);border-radius:6px;text-shadow:0 0 8px var(--accent);min-height:calc(var(--u)*6);display:flex;align-items:center;justify-content:center;text-align:center}
+& .vm-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.5)}
+& .vm-keys button{aspect-ratio:1;border:0;border-radius:6px;background:linear-gradient(180deg,#f2f2f2,#c9ced6);font:800 calc(var(--u)*1.4)/1 var(--lp-font-mono);color:#222;cursor:pointer;box-shadow:0 3px 0 #8e949c;pointer-events:auto}
+& .vm-keys button:active{transform:translateY(2px);box-shadow:0 1px 0 #8e949c}
+& .vm-coin{height:calc(var(--u)*5);border-radius:6px;background:#0b0b0b;display:flex;align-items:center;justify-content:center}
+& .vm-coin i{width:calc(var(--u)*.6);height:calc(var(--u)*3);background:#555;border-radius:3px}
+& .vm-tray{grid-column:1/-1;height:calc(var(--u)*7);background:#0b0b0b;border-radius:calc(var(--u)*.8);box-shadow:inset 0 calc(var(--u)*.6) calc(var(--u)*1.2) rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;color:#666;font:700 calc(var(--u)*1.1)/1 var(--lp-font-mono);letter-spacing:.2em}
+& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}& .lp-head,& .lp-body{max-width:min(460px,40cqw)}
+@container (max-width:820px){& .vm-wrap{justify-content:center;align-items:flex-start;padding:4cqh 0 0}& .vm{--u:clamp(6px,.8cqh,9px)}& .lp-overlay{justify-content:flex-end}& .lp-head,& .lp-body{max-width:none}& .lp-code{display:none}}
+`,setup(ctx){let p=ctx.params,c=ctx.copy,wrap=document.createElement("div");wrap.className="vm-wrap",wrap.style.setProperty("--body",p.body),wrap.style.setProperty("--glass",p.glass),wrap.style.setProperty("--accent",p.accent);let slots=ITEMS.map((it,i)=>{let code=i===7?c.code:`${String.fromCharCode(65+Math.floor(i/3))}${i%3+1}`;return{it,code,out:i===7}});wrap.innerHTML=`<div class="vm"><div class="vm-glass">${slots.map((s,i)=>`<div class="vm-slot${s.out?" out":""}" data-i="${i}"><span class="it">${s.it}</span>${s.out?'<span class="so">SOLD OUT</span>':""}<span class="tag">${esc(s.code)}</span></div>`).join("")}</div>
+      <div class="vm-side"><div class="vm-screen" aria-live="polite">INSERT<br>CODE</div><div class="vm-keys">${["1","2","3","4","5","6","7","8","9","A","0","B"].map(k=>`<button type="button" aria-label="Key ${k}">${k}</button>`).join("")}</div>
+      <div class="vm-coin"><i></i></div></div><div class="vm-tray">PUSH</div></div>`,ctx.stage.append(wrap),ctx.stage.removeAttribute("aria-hidden");let screen=wrap.querySelector(".vm-screen"),typed="",busy=!1,vend=code=>{busy=!0;let idx=slots.findIndex(s=>s.code.toUpperCase()===code.toUpperCase());if(idx<0)screen.innerHTML="INVALID<br>CODE";else if(slots[idx].out)screen.innerHTML=`${esc(code)}<br>SOLD OUT`;else{screen.innerHTML=`VENDING<br>${esc(code)}`;let el=wrap.querySelector(`.vm-slot[data-i="${idx}"]`);el.classList.add("drop"),setTimeout(()=>el.classList.remove("drop"),1600)}setTimeout(()=>{typed="",busy=!1,screen.innerHTML="INSERT<br>CODE"},1800)};wrap.querySelectorAll(".vm-keys button").forEach(b=>b.addEventListener("click",()=>{if(busy)return;typed+=b.textContent,screen.textContent=typed;let isTarget=c.code.startsWith(typed)||/^[A-D][1-3]$/.test(typed);(typed.length>=c.code.length||/^[A-D][1-3]$/.test(typed)||!isTarget)&&vend(typed)}));let demo=ctx.reducedMotion?-1:2.5,demoIdx=0;return{frame(t){demo<0||ctx.pointer.engaged||busy||t>demo&&(demoIdx<c.code.length?(typed+=c.code[demoIdx++],screen.textContent=typed,demo=t+.45):(vend(typed),demoIdx=0,demo=t+7))},destroy(){wrap.remove()}}}};export{vending_machine_default as default};

package/dist/scenes/vinyl.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    deck: string;
+    record: string;
+    label: string;
+    labelInk: string;
+    bg: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/vinyl.js

@@ -0,0 +1,2 @@
+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 vinyl_default={id:"vinyl",name:"Broken Record",description:"A turntable spins a record pressed with the error. Every few seconds the needle skips back and the same groove plays again.",category:"Retro Tech",kind:"2d",motion:"live",tags:["canvas","vinyl","music","turntable","retro","warm","illustration"],layout:"right",copy:{eyebrow:"Now playing",title:"Sounds like a broken record.",message:"This page keeps skipping back to the same spot: not found, not found, not found. Change the record.",actions:[{label:"Change the record",href:"/",variant:"primary"}]},params:{deck:"#d9cbb4",record:"#111111",label:"#e4572e",labelInk:"#fff4e6",bg:"#f2e8d8"},theme:{bg:"#f2e8d8",fg:"#2a1a0d",accent:"#2a1a0d","accent-fg":"#fff"},presetName:"Walnut",presets:{black:{name:"Studio Black",params:{deck:"#1d1d20",record:"#0a0a0a",label:"#f2f2f2",labelInk:"#111111",bg:"#0e0e10"},theme:{bg:"#0e0e10",fg:"#f2f2f2",accent:"#f2f2f2","accent-fg":"#000"}},color:{name:"Coloured Vinyl",params:{deck:"#f4f1ea",record:"#c2185b",label:"#ffd23f",labelInk:"#3a0a22",bg:"#ffe6ee"},theme:{bg:"#ffe6ee",fg:"#3a0a22",accent:"#3a0a22"}},jazz:{name:"Blue Note",params:{deck:"#16202e",record:"#0b0b0b",label:"#2b59ff",labelInk:"#ffffff",bg:"#0d1622"},theme:{bg:"#0d1622",fg:"#e6eeff",accent:"#e6eeff","accent-fg":"#0d1622"}}},css:`& .lp-overlay{padding-right:clamp(24px,8cqw,140px)}& .lp-head,& .lp-body{max-width:min(460px,40cqw)}
+@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),ang=0,skipT=0;return{resize(){c.reset()},frame(t,dt){let g=c.g;c.reset(),g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h);let narrow=c.w<760,R=narrow?Math.min(c.w*.36,c.h*.24):Math.min(c.h*.36,c.w*.24),cx=narrow?c.w/2:c.w*.32,cy=narrow?c.h*.3:c.h*.5;g.fillStyle="rgba(0,0,0,.18)",g.beginPath(),g.roundRect(cx-R*1.3+10,cy-R*1.2+16,R*2.75,R*2.4,R*.08),g.fill(),g.fillStyle=p.deck,g.beginPath(),g.roundRect(cx-R*1.3,cy-R*1.2,R*2.75,R*2.4,R*.08),g.fill(),ang+=dt*(33.3/60)*Math.PI*2,skipT+=dt;let jump=0;skipT>2.6&&(skipT=0,jump=1),g.fillStyle="#2a2a2a",g.beginPath(),g.arc(cx,cy,R*1.04,0,Math.PI*2),g.fill(),g.save(),g.translate(cx,cy),g.rotate(ang),g.fillStyle=p.record,g.beginPath(),g.arc(0,0,R,0,Math.PI*2),g.fill(),g.strokeStyle=rgba("#ffffff",.05),g.lineWidth=1;for(let r=R*.38;r<R*.98;r+=3)g.beginPath(),g.arc(0,0,r,0,Math.PI*2),g.stroke();g.fillStyle=p.label,g.beginPath(),g.arc(0,0,R*.34,0,Math.PI*2),g.fill(),g.fillStyle=p.labelInk,g.textAlign="center",g.textBaseline="middle",g.font=`900 ${R*.16}px ${SANS}`,g.fillText(ctx.copy.code,0,-R*.06),g.font=`700 ${R*.045}px ${SANS}`,g.fillText("NOT FOUND \xB7 33\u2153 RPM",0,R*.1),g.fillStyle="#ddd",g.beginPath(),g.arc(0,0,R*.025,0,Math.PI*2),g.fill(),g.restore();let sh=g.createLinearGradient(cx-R,cy-R,cx+R,cy+R);sh.addColorStop(.3,"rgba(255,255,255,0)"),sh.addColorStop(.5,"rgba(255,255,255,.12)"),sh.addColorStop(.7,"rgba(255,255,255,0)"),g.fillStyle=sh,g.beginPath(),g.arc(cx,cy,R,0,Math.PI*2),g.fill();let px=cx+R*1.15,py=cy-R*.85,armA=2.25+(jump?-.04:0)+Math.sin(t*40)*.002;g.fillStyle="#c9c9cc",g.beginPath(),g.arc(px,py,R*.11,0,Math.PI*2),g.fill(),g.strokeStyle="#d9d9dc",g.lineWidth=R*.035,g.lineCap="round";let ex=px+Math.cos(armA)*R*1.05,ey=py+Math.sin(armA)*R*1.05;g.beginPath(),g.moveTo(px,py),g.lineTo(ex,ey),g.stroke(),g.fillStyle="#3a3a3a",g.save(),g.translate(ex,ey),g.rotate(armA+.4),g.fillRect(-R*.04,-R*.07,R*.08,R*.16),g.restore(),skipT<.25&&(g.fillStyle=rgba(p.label,1-skipT*4),g.font=`700 ${R*.09}px ${SANS}`,g.fillText("*skip*",ex+R*.2,ey-R*.1))}}}};export{vinyl_default as default};

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

@@ -0,0 +1,13 @@
+interface Params {
+    top: string;
+    side: string;
+    side2: string;
+    bg: string;
+    bg2: string;
+    ground: string;
+    depth: number;
+    /** 0 earthy (grass/dirt), 1 solid tint, 2 neon edges */
+    look: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/voxel-404.js

@@ -0,0 +1,102 @@
+import{codeBitmap}from"../chunks/chunk-MNUNTC4L.js";import{shaderScene}from"../chunks/chunk-B4TY5M55.js";import{HASH,POST}from"../chunks/chunk-SH72TE6I.js";import{linear}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uGrid;
+uniform vec3 uDim;
+uniform vec3 uTop, uSide, uSide2, uBg, uBg2, uGround;
+uniform float uLook;
+${HASH}
+${POST}
+
+bool filled(ivec3 c) {
+  if (c.x < 0 || c.y < 0 || c.z < 0 || c.x >= int(uDim.x) || c.y >= int(uDim.y) || c.z >= int(uDim.z)) return false;
+  return texelFetch(uGrid, ivec2(c.x, int(uDim.y) - 1 - c.y), 0).r > 0.5;
+}
+
+vec2 boxHit(vec3 ro, vec3 rd, vec3 bmin, vec3 bmax) {
+  vec3 inv = 1.0 / rd;
+  vec3 t0 = (bmin - ro) * inv, t1 = (bmax - ro) * inv;
+  vec3 tn = min(t0, t1), tf = max(t0, t1);
+  return vec2(max(max(tn.x, tn.y), tn.z), min(min(tf.x, tf.y), tf.z));
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime;
+  vec3 col = mix(uBg2, uBg, smoothstep(-0.5, 0.6, uv.y));
+  float yaw = sin(t * 0.35) * 0.55 + uMouse.x * 0.6;
+  float pitch = 0.32 + sin(t * 0.27) * 0.08 - uMouse.y * 0.2;
+  float aspect = uRes.x / uRes.y;
+  float dist = max(uDim.x * 1.9 / (0.74 * min(aspect, 2.0)), uDim.y * 1.9 / 0.42);
+  vec3 target = vec3(0.0, uDim.y * 0.08, 0.0);
+  vec3 ro = target + dist * vec3(sin(yaw) * cos(pitch), sin(pitch), cos(yaw) * cos(pitch));
+  vec3 fw = normalize(target - ro);
+  vec3 rt = normalize(cross(fw, vec3(0, 1, 0)));
+  vec3 up = cross(rt, fw);
+  vec3 rd = normalize(fw * 1.9 + rt * uv.x + up * (uv.y - 0.22));
+  vec3 off = -uDim * 0.5;
+  // ground plane with a soft shadow of the blocks
+  float tg = (-uDim.y * 0.5 - 0.02 - ro.y) / rd.y;
+  if (tg > 0.0) {
+    vec3 gp = ro + rd * tg;
+    vec2 g = gp.xz;
+    float fade = exp(-length(g) / (uDim.x * 0.9));
+    vec3 gc = mix(col, uGround, fade);
+    // fake shadow: project the footprint straight down, blurred
+    vec2 sh = (gp.xz - off.xz) ;
+    float occ = 0.0;
+    for (int i = 0; i < 8; i++) {
+      vec2 o = vec2(cos(float(i) * 0.785), sin(float(i) * 0.785)) * 1.5;
+      ivec3 cc = ivec3(floor(vec3(sh.x + o.x + 2.0, 0.0, sh.y + o.y + 1.0)));
+      for (int y = 0; y < 64; y++) { if (float(y) >= uDim.y) break; if (filled(ivec3(cc.x, y, cc.z))) { occ += 1.0; break; } }
+    }
+    gc *= 1.0 - occ / 8.0 * 0.45 * fade;
+    col = gc;
+  }
+  vec2 bh = boxHit(ro, rd, off, off + uDim);
+  if (bh.x < bh.y && bh.y > 0.0) {
+    vec3 p = ro + rd * max(bh.x, 0.0) - off;
+    ivec3 c = ivec3(floor(clamp(p, vec3(0.0), uDim - 0.001)));
+    vec3 stepv = sign(rd);
+    vec3 tDelta = abs(1.0 / rd);
+    vec3 tMax = (vec3(c) + max(stepv, 0.0) - p) / rd;
+    vec3 n = vec3(0.0);
+    // which face we entered through
+    vec3 e = p - vec3(c);
+    if (bh.x > 0.0) {
+      vec3 d = min(e, 1.0 - e);
+      n = d.x < d.y && d.x < d.z ? vec3(-stepv.x, 0, 0) : d.y < d.z ? vec3(0, -stepv.y, 0) : vec3(0, 0, -stepv.z);
+    }
+    bool hit = false;
+    for (int i = 0; i < 220; i++) {
+      if (filled(c)) { hit = true; break; }
+      if (tMax.x < tMax.y && tMax.x < tMax.z) { c.x += int(stepv.x); tMax.x += tDelta.x; n = vec3(-stepv.x, 0, 0); }
+      else if (tMax.y < tMax.z) { c.y += int(stepv.y); tMax.y += tDelta.y; n = vec3(0, -stepv.y, 0); }
+      else { c.z += int(stepv.z); tMax.z += tDelta.z; n = vec3(0, 0, -stepv.z); }
+      if (c.x < -1 || c.y < -1 || c.z < -1 || c.x > int(uDim.x) || c.y > int(uDim.y) || c.z > int(uDim.z)) break;
+    }
+    if (hit) {
+      float th = max(max(max(tMax.x - tDelta.x, tMax.y - tDelta.y), tMax.z - tDelta.z), 0.0);
+      vec3 hp = p + rd * th;
+      vec3 f = fract(hp);
+      float rnd = hash13(vec3(c));
+      vec3 base;
+      if (uLook < 0.5) {
+        bool topFace = n.y > 0.5;
+        bool grassRim = !filled(c + ivec3(0, 1, 0)) && f.y > 0.82 && n.y < 0.5;
+        base = topFace || grassRim ? uTop : mix(uSide, uSide2, step(0.5, hash13(floor(hp * 4.0))));
+      } else base = mix(uSide, uSide2, rnd * 0.5) * (n.y > 0.5 ? 1.15 : 1.0);
+      vec3 L = normalize(vec3(0.5, 0.9, 0.4));
+      float dif = 0.45 + 0.55 * max(dot(n, L), 0.0);
+      // edge darkening for the chunky look
+      vec2 fe = n.x != 0.0 ? f.yz : n.y != 0.0 ? f.xz : f.xy;
+      float edge = smoothstep(0.0, 0.08, min(min(fe.x, 1.0 - fe.x), min(fe.y, 1.0 - fe.y)));
+      // occlusion from the neighbour above
+      float ao = filled(c + ivec3(0, 1, 0)) && n.y < 0.5 ? 0.85 : 1.0;
+      col = base * dif * ao * (0.75 + 0.25 * edge) * (0.92 + 0.08 * rnd);
+      if (uLook > 1.5) col = mix(uBg2 * 0.6, uTop * 1.6, 1.0 - edge) + base * 0.15;
+    }
+  }
+  col = toSRGB(col);
+  fragColor = vec4(col, 1.0);
+}
+`,voxel_404_default={id:"voxel-404",name:"Voxel Blocks",description:"The error built out of chunky 3D blocks, grass on top and dirt underneath, turning slowly on its own little patch of ground.",category:"Typography",kind:"3d",motion:"live",tags:["webgl","voxel","blocks","3d","pixel","game","playful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Chunk not loaded",title:"This part of the world isn't generated.",message:"You've wandered past the render distance. Respawn at the homepage.",actions:[{label:"Respawn",href:"/",variant:"primary"}]},params:{top:"#5fbf3a",side:"#8a5a32",side2:"#7a4e2a",bg:"#8fd0ff",bg2:"#d9f0ff",ground:"#c9e6b8",depth:4,look:0},theme:{bg:"#b9e2ff",fg:"#10202e",accent:"#10202e","accent-fg":"#fff","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Grassland",presets:{snow:{name:"Tundra",params:{top:"#ffffff",side:"#7a8a99",side2:"#6b7a88",bg:"#c9d8e6",bg2:"#f2f6fa",ground:"#ffffff"},theme:{bg:"#e6eef5"}},desert:{name:"Sandstone",params:{top:"#f2d9a0",side:"#d9b874",side2:"#c9a35a",bg:"#ffb38a",bg2:"#ffe6c7",ground:"#f2d9a0",look:1},theme:{bg:"#ffd8b8",fg:"#2a1405"}},candy:{name:"Candy Blocks",params:{top:"#ffc2d9",side:"#ff8fb1",side2:"#b9a6ff",bg:"#fff2f8",bg2:"#ffffff",ground:"#ffe6f0",look:1},theme:{bg:"#fff2f8",fg:"#3a0a22"}},nether:{name:"Netherrack",params:{top:"#ff5a1f",side:"#6b1a1a",side2:"#4a1010",bg:"#1a0505",bg2:"#3a0a08",ground:"#2a0808",look:1},theme:{bg:"#1a0505",fg:"#ffe0d6",accent:"#ff7a3d","accent-fg":"#1a0505"}},neon:{name:"Wireframe",params:{top:"#3bffe6",side:"#0a1a2a",side2:"#081420",bg:"#02060c",bg2:"#06101c",ground:"#02060c",look:2},theme:{bg:"#02060c",fg:"#e6fffb",accent:"#3bffe6","accent-fg":"#02060c"}}},setup(ctx){let p=ctx.params,cols=26,rows=9,bm=codeBitmap(ctx.copy.code||"404",cols,rows,900),data=new Uint8Array(cols*rows);for(let y=0;y<rows;y++)for(let x=0;x<cols;x++)data[y*cols+x]=bm[y*cols+x]?255:0;let tex;return shaderScene(ctx,{frag:FRAG,init(gl){tex=gl.createTexture(),gl.bindTexture(gl.TEXTURE_2D,tex),gl.pixelStorei(gl.UNPACK_ALIGNMENT,1),gl.texImage2D(gl.TEXTURE_2D,0,gl.R8,cols,rows,0,gl.RED,gl.UNSIGNED_BYTE,data),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST)},uniforms:()=>({uGrid:tex,uDim:[cols,rows,p.depth],uTop:linear(p.top),uSide:linear(p.side),uSide2:linear(p.side2),uBg:linear(p.bg),uBg2:linear(p.bg2),uGround:linear(p.ground),uLook:p.look})})}};export{voxel_404_default as default};

package/dist/scenes/wormhole.d.ts

@@ -0,0 +1,13 @@
+interface Params {
+    a: string;
+    b: string;
+    glow: string;
+    base: string;
+    speed: number;
+    /** 0 neon grid · 1 rings · 2 organic · 3 data hex */
+    style: number;
+    radius: number;
+    fog: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/wormhole.js

@@ -0,0 +1,113 @@
+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 uA, uB, uGlow, uBase;
+uniform float uSpeed, uStyle, uRadius, uFog;
+${HASH}
+${NOISE}
+${POST}
+
+vec2 path(float z) { return vec2(sin(z * 0.11) * 3.2 + sin(z * 0.047) * 2.0, cos(z * 0.09) * 2.4 + sin(z * 0.031) * 1.4); }
+
+float map(vec3 p) {
+  vec2 c = path(p.z);
+  float r = uRadius;
+  if (uStyle > 1.5 && uStyle < 2.5) {
+    vec2 dir = normalize(p.xy - c + 1e-4);
+    r += 0.22 * sin(p.z * 0.9 + uTime) + 0.16 * vnoise3(vec3(dir * 1.5, p.z * 0.6));
+  }
+  return (r - length(p.xy - c)) * 0.8;
+}
+
+vec3 wallColor(vec3 p, vec3 n, float dist) {
+  vec2 c = path(p.z);
+  float ang = atan(p.y - c.y, p.x - c.x);
+  float u = ang / 6.28318 + 0.5;
+  float z = p.z;
+  vec3 col = uBase;
+  if (uStyle < 0.5) {
+    // neon grid
+    float gx = abs(fract(u * 24.0) - 0.5);
+    float gz = abs(fract(z * 0.5) - 0.5);
+    float line = smoothstep(0.05, 0.0, min(gx, gz * 0.9) - 0.004);
+    vec3 lc = mix(uA, uB, 0.5 + 0.5 * sin(z * 0.08 + uTime * 0.4));
+    col += lc * line * 2.2;
+    col += lc * 0.1 * exp(-min(gx, gz) * 14.0);
+  } else if (uStyle < 1.5) {
+    // light rings
+    float rz = abs(fract(z * 0.12) - 0.5);
+    float ring = smoothstep(0.03, 0.0, rz - 0.005);
+    float halo = exp(-rz * 18.0);
+    vec3 lc = mix(uA, uB, 0.5 + 0.5 * sin(floor(z * 0.12) * 1.7));
+    float panel = smoothstep(0.02, 0.0, abs(fract(u * 16.0) - 0.5) - 0.47);
+    col = uBase * (0.6 + 0.4 * vnoise(vec2(u * 80.0, z * 3.0))) + uBase * panel * 0.5;
+    col += lc * (ring * 4.0 + halo * 0.35);
+  } else if (uStyle < 2.5) {
+    // organic: veins and wet highlights
+    vec2 dir = normalize(p.xy - c + 1e-4);
+    float v = fbm3(vec3(dir * 2.2, z * 0.45 - uTime * 0.1));
+    float vein = smoothstep(0.025, 0.0, abs(v - 0.5));
+    col = mix(uBase, uA, smoothstep(0.3, 0.8, v)) * 0.8;
+    col += uB * vein * 0.6;
+  } else {
+    // data hex
+    vec2 q = vec2(u * 32.0, z * 1.1);
+    vec2 id = floor(q);
+    float h = hash12(id);
+    float on = step(0.72, fract(h + uTime * 0.25 * hash12(id + 3.0)));
+    vec2 f = fract(q) - 0.5;
+    float cell = smoothstep(0.42, 0.36, max(abs(f.x), abs(f.y)));
+    col += mix(uA, uB, h) * on * cell * 1.6;
+    col += uA * 0.05 * cell;
+  }
+  return col;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime * uSpeed;
+  float z0 = t * 6.0;
+  vec3 ro = vec3(path(z0), z0);
+  vec3 ta = vec3(path(z0 + 6.0), z0 + 6.0);
+  ta.xy += uMouse * 1.2;
+  vec3 fw = normalize(ta - ro);
+  vec3 rt = normalize(cross(vec3(sin(t * 0.07) * 0.3, 1.0, 0.0), fw));
+  vec3 up = cross(fw, rt);
+  vec3 rd = normalize(fw * 1.3 + rt * uv.x + up * uv.y);
+
+  float d = 0.0;
+  vec3 p = ro;
+  for (int i = 0; i < 90; i++) {
+    p = ro + rd * d;
+    float h = map(p);
+    if (h < 0.002 * d + 0.001) break;
+    d += h * 0.7;
+    if (d > 80.0) break;
+  }
+  vec3 col;
+  float fogT = 1.0 - exp(-d * uFog);
+  if (d < 80.0) {
+    vec2 e = vec2(0.01, 0.0);
+    vec3 n = normalize(vec3(map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx)));
+    col = wallColor(p, n, d);
+    float head = max(dot(n, -rd), 0.0);
+    if (uStyle > 1.5 && uStyle < 2.5) col *= 0.35 + 0.9 * head;
+    float spec = pow(max(dot(reflect(rd, n), -rd), 0.0), 30.0);
+    col += uGlow * spec * 0.25;
+  } else {
+    col = uGlow;
+  }
+  // light at the end of the tunnel
+  vec3 far = vec3(path(z0 + 70.0), z0 + 70.0);
+  float g = max(dot(rd, normalize(far - ro)), 0.0);
+  vec3 fogCol = mix(uBase * 0.4, uGlow * 1.2, pow(g, 160.0));
+  col = mix(col, fogCol, fogT);
+  col += uGlow * (pow(g, 900.0) * 2.5 + pow(g, 90.0) * 0.12);
+
+  col = aces(col);
+  col = toSRGB(col);
+  col *= mix(0.6, 1.0, vignette(vUv, 0.3));
+  col += grain(fc, uTime) * 0.015;
+  fragColor = vec4(col, 1.0);
+}
+`,wormhole_default={id:"wormhole",name:"Wormhole",description:"An endless flight down a curving 3D tunnel toward the light at the end. Steer it with the pointer.",category:"Space",kind:"3d",motion:"live",tags:["webgl","raymarching","tunnel","neon","flight","synthwave","sci-fi"],layout:"center",copy:{eyebrow:"Wrong turn in spacetime",title:"This wormhole goes nowhere.",message:"We followed the link through the tunnel and came out at a page that doesn't exist.",actions:[{label:"Return to origin",href:"/",variant:"primary"}]},params:{a:"#ff2bd6",b:"#22d3ff",glow:"#fff1ff",base:"#07020f",speed:1,style:0,radius:2.4,fog:.035},theme:{bg:"#07020f","code-color":"rgba(255,255,255,.92)",accent:"#ffffff","accent-fg":"#12001f"},presetName:"Neon Grid",presets:{sunset:{name:"Sunset Grid",params:{a:"#ff7a1f",b:"#b026ff",glow:"#ffe2c2",base:"#12030f",style:0},theme:{bg:"#12030f",accent:"#ff9a4a","accent-fg":"#12030f"}},gold:{name:"Golden Rings",params:{a:"#ffd36b",b:"#fff2c9",glow:"#fff8e6",base:"#0d0802",style:1,radius:2.8},theme:{bg:"#0d0802",accent:"#ffd36b","accent-fg":"#0d0802"}},toxic:{name:"Toxic Gut",eyebrow:"Something's not right",title:"Swallowed by the internet.",params:{a:"#5ac83a",b:"#e6ff6b",glow:"#f0ffd0",base:"#0b1a05",style:2,fog:.05},theme:{bg:"#0b1a05",accent:"#e6ff6b","accent-fg":"#0b1a05"}},mono:{name:"Wireframe",params:{a:"#ffffff",b:"#9a9a9a",glow:"#ffffff",base:"#000000",style:0,speed:.7},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},rings:{name:"Light Rings",params:{a:"#ffb547",b:"#ff5a36",glow:"#fff4e0",base:"#0a0603",style:1,radius:2.6},theme:{bg:"#0a0603",accent:"#ffb547","accent-fg":"#1a0d00"}},organic:{name:"Organic",eyebrow:"Something swallowed it",title:"This page got eaten.",message:"We're deep inside something and the page isn't in here. Let's get out.",params:{a:"#b8324f",b:"#ffc2a8",glow:"#ffe0d4",base:"#2a060e",style:2,radius:2.2,fog:.05},theme:{bg:"#2a060e",accent:"#ffd2c2","accent-fg":"#2a060e"}},data:{name:"Data Stream",eyebrow:"Packet lost",title:"Lost in transit.",message:"Your request went down the pipe and never came back out.",params:{a:"#39ff88",b:"#00b3ff",glow:"#d9ffe9",base:"#010604",style:3,radius:2.3},theme:{bg:"#010604",accent:"#39ff88","accent-fg":"#00170a","font-display":"var(--lp-font-mono)"}},ice:{name:"Ice Cave",params:{a:"#bfe9ff",b:"#5fb7ff",glow:"#ffffff",base:"#0b2a44",style:1,radius:2.5,fog:.045,speed:.6},theme:{bg:"#0b2a44",accent:"#e6f6ff","accent-fg":"#0b2a44"}}},css:`& .lp-code{font-weight:700;letter-spacing:-.04em;text-shadow:0 0 40px rgba(255,255,255,.35)}
+& .lp-title{font-weight:600}`,setup(ctx){let p=ctx.params;return shaderScene(ctx,{frag:FRAG,uniforms:()=>({uA:linear(p.a),uB:linear(p.b),uGlow:linear(p.glow),uBase:linear(p.base),uSpeed:p.speed,uStyle:p.style,uRadius:p.radius,uFog:p.fog})})}};export{wormhole_default as default};

package/dist/scenes/zen-garden.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    sand: string;
+    groove: string;
+    stone: string;
+    moss: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/zen-garden.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 zen_garden_default={id:"zen-garden",name:"Zen Garden",description:"A raked sand garden with three stones, the error drawn into the gravel. Drag to rake new lines and breathe.",category:"Nature",kind:"2d",motion:"interactive",tags:["canvas","zen","calm","sand","draw","interactive","light","minimal"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Breathe",title:"Let go of this page.",message:"It isn't here, and that's alright. Rake the sand for a while, then return home.",actions:[{label:"Return, mindfully",href:"/",variant:"primary"}]},params:{sand:"#e8e1d3",groove:"#c9bfa9",stone:"#6b6760",moss:"#6b8a4a"},theme:{bg:"#e8e1d3",fg:"#3a352c",accent:"#3a352c","accent-fg":"#f4efe6","font-display":"var(--lp-font-serif)","title-weight":"400"},presetName:"Kyoto",presets:{moss:{name:"Moss Garden",params:{sand:"#d9dcc9",groove:"#b8bca5",stone:"#4a4a44",moss:"#3a6a2a"},theme:{bg:"#d9dcc9",fg:"#22281a"}},dark:{name:"Black Gravel",params:{sand:"#2a2a2c",groove:"#1b1b1d",stone:"#8a8a8f",moss:"#4a6a3a"},theme:{bg:"#2a2a2c",fg:"#ece8e0",accent:"#ece8e0","accent-fg":"#2a2a2c"}},rose:{name:"Rose Sand",params:{sand:"#efd9d2",groove:"#d8bdb3",stone:"#7a6a66",moss:"#7a8a5a"},theme:{bg:"#efd9d2",fg:"#3a2a28"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,rake,rg,stones=[],last=null,sc=()=>Math.min(2,ctx.dpr),tines=(x0,y0,x1,y1,width=46)=>{let ang=Math.atan2(y1-y0,x1-x0),nx=-Math.sin(ang),ny=Math.cos(ang);for(let k=-3;k<=3;k++){let o=k/3*width*.5;rg.strokeStyle=rgba(p.groove,.9),rg.lineWidth=3,rg.beginPath(),rg.moveTo(x0+nx*o,y0+ny*o),rg.lineTo(x1+nx*o,y1+ny*o),rg.stroke(),rg.strokeStyle=rgba("#ffffff",.35),rg.lineWidth=1.2,rg.beginPath(),rg.moveTo(x0+nx*(o-2),y0+ny*(o-2)),rg.lineTo(x1+nx*(o-2),y1+ny*(o-2)),rg.stroke()}},build=()=>{let s=sc();rake=document.createElement("canvas"),rake.width=c.w*s,rake.height=c.h*s,rg=rake.getContext("2d"),rg.scale(s,s),rg.fillStyle=p.sand,rg.fillRect(0,0,c.w,c.h);for(let i=0;i<c.w*c.h/18;i++)rg.fillStyle=`rgba(${rnd()>.5?"255,255,255":"0,0,0"},${rnd()*.07})`,rg.fillRect(rnd()*c.w,rnd()*c.h,1.2,1.2);for(let y=10;y<c.h;y+=14){rg.strokeStyle=rgba(p.groove,.7),rg.lineWidth=3,rg.beginPath();for(let x=0;x<=c.w;x+=20)rg.lineTo(x,y+Math.sin(x*.01+y)*1.5);rg.stroke()}stones=[{x:c.w*.16,y:c.h*.28,r:Math.min(c.w,c.h)*.07},{x:c.w*.84,y:c.h*.22,r:Math.min(c.w,c.h)*.05},{x:c.w*.78,y:c.h*.56,r:Math.min(c.w,c.h)*.035}];for(let st of stones)for(let k=1;k<=5;k++)rg.fillStyle=p.sand,rg.beginPath(),rg.ellipse(st.x,st.y,st.r*(1+k*.35)+6,st.r*(.7+k*.25)+6,0,0,Math.PI*2),rg.fill();for(let st of stones)for(let k=5;k>=1;k--)rg.strokeStyle=rgba(p.groove,.85),rg.lineWidth=3,rg.beginPath(),rg.ellipse(st.x,st.y,st.r*(1+k*.35),st.r*(.7+k*.25),0,0,Math.PI*2),rg.stroke();let size=Math.min(c.w*.26,c.h*.36);rg.font=`300 ${size}px ${SANS}`,rg.textAlign="center",rg.textBaseline="middle",rg.lineJoin="round",rg.strokeStyle=rgba(p.groove,1),rg.lineWidth=size*.05,rg.strokeText(ctx.copy.code||"404",c.w/2,c.h*.37),rg.strokeStyle=rgba("#ffffff",.35),rg.lineWidth=size*.012,rg.strokeText(ctx.copy.code||"404",c.w/2-2,c.h*.37-2)};build(),ctx.on("pointermove",e=>{if(!(e.buttons||e.pointerType==="touch"))return last=null;let q={x:ctx.pointer.x,y:ctx.pointer.y};last&&Math.hypot(q.x-last.x,q.y-last.y)>3&&tines(last.x,last.y,q.x,q.y),last=q}),ctx.on("pointerup",()=>last=null);let auto=0;return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;if(c.reset(),!ctx.pointer.engaged&&!ctx.reducedMotion&&dt>0&&auto<1){let a0=auto;auto=Math.min(1,auto+dt*.08);let f=k=>({x:c.w*(.05+k*.9),y:c.h*.66+Math.sin(k*12)*c.h*.03}),A=f(a0),B=f(auto);tines(A.x,A.y,B.x,B.y,40)}g.drawImage(rake,0,0,c.w,c.h);for(let st of stones){g.fillStyle=rgba(p.moss,.85),g.beginPath(),g.ellipse(st.x,st.y+st.r*.25,st.r*1.25,st.r*.55,0,0,Math.PI*2),g.fill();let grd=g.createRadialGradient(st.x-st.r*.3,st.y-st.r*.4,st.r*.1,st.x,st.y,st.r*1.1);grd.addColorStop(0,rgba("#ffffff",.35)),grd.addColorStop(.3,p.stone),grd.addColorStop(1,rgba("#000000",.6)),g.fillStyle=grd,g.beginPath(),g.ellipse(st.x,st.y,st.r,st.r*.78,-.2,0,Math.PI*2),g.fill()}let px=t*30%(c.w+100)-50,py=c.h*.1+t*18%(c.h*.7)+Math.sin(t*2)*10;g.fillStyle="#f4b6c2",g.beginPath(),g.ellipse(px,py,6,3,t*2,0,Math.PI*2),g.fill()}}}};export{zen_garden_default as default};

package/dist/svelte.d.ts

@@ -0,0 +1,17 @@
+import { type MountOptions, type SceneDef } from "lostpage";
+export interface LostPageActionOptions extends MountOptions {
+    scene: string | SceneDef;
+}
+/**
+ * Svelte action (Svelte 3, 4 and 5).
+ *
+ * ```svelte
+ * <script>import { lostpage } from "lostpage/svelte";</script>
+ * <div use:lostpage={{ scene: "lost-at-sea", preset: "storm" }} />
+ * ```
+ */
+export declare function lostpage(node: HTMLElement, options: LostPageActionOptions): {
+    update(next: LostPageActionOptions): void;
+    destroy(): void;
+};
+export default lostpage;

package/dist/svelte.js

@@ -0,0 +1 @@
+import{mount}from"lostpage";function lostpage(node,options){let current=options,handle=mount(node,options.scene,options);return{update(next){(typeof next.scene=="string"?next.scene:next.scene.id)===(typeof current.scene=="string"?current.scene:current.scene.id)?handle.update(next):(handle.destroy(),handle=mount(node,next.scene,next)),current=next},destroy(){handle.destroy()}}}var svelte_default=lostpage;export{svelte_default as default,lostpage};

package/dist/vue.d.ts

@@ -0,0 +1,66 @@
+import { type PropType } from "vue";
+import { type LostAction, type SceneDef } from "lostpage";
+/**
+ * ```vue
+ * <LostPage scene="lost-at-sea" preset="moonlit" title="Nothing but moonlight here." />
+ * ```
+ */
+export declare const LostPage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    scene: {
+        type: PropType<string | SceneDef>;
+        required: true;
+    };
+    preset: StringConstructor;
+    code: StringConstructor;
+    eyebrow: StringConstructor;
+    title: StringConstructor;
+    message: StringConstructor;
+    actions: PropType<LostAction[]>;
+    params: PropType<Record<string, unknown>>;
+    theme: PropType<Record<string, string>>;
+    overlay: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    motion: PropType<"auto" | "reduce" | "full">;
+    height: StringConstructor;
+    maxDpr: NumberConstructor;
+    seed: NumberConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "navigate"[], "navigate", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    scene: {
+        type: PropType<string | SceneDef>;
+        required: true;
+    };
+    preset: StringConstructor;
+    code: StringConstructor;
+    eyebrow: StringConstructor;
+    title: StringConstructor;
+    message: StringConstructor;
+    actions: PropType<LostAction[]>;
+    params: PropType<Record<string, unknown>>;
+    theme: PropType<Record<string, string>>;
+    overlay: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    motion: PropType<"auto" | "reduce" | "full">;
+    height: StringConstructor;
+    maxDpr: NumberConstructor;
+    seed: NumberConstructor;
+}>> & Readonly<{
+    onNavigate?: ((...args: any[]) => any) | undefined;
+}>, {
+    interactive: boolean;
+    overlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default LostPage;

package/dist/vue.js

@@ -0,0 +1 @@
+import{defineComponent,getCurrentInstance,h,onBeforeUnmount,onMounted,ref,watch}from"vue";import{mount}from"lostpage";var LostPage=defineComponent({name:"LostPage",props:{scene:{type:[String,Object],required:!0},preset:String,code:String,eyebrow:String,title:String,message:String,actions:Array,params:Object,theme:Object,overlay:{type:Boolean,default:void 0},interactive:{type:Boolean,default:void 0},motion:String,height:String,maxDpr:Number,seed:Number},emits:["navigate"],setup(props,{slots,emit}){let host=ref(null),instance=getCurrentInstance(),hasNavigateListener=()=>!!instance?.vnode.props?.onNavigate,handle=null,options=()=>{let{scene:_s,...rest}=props,o={};for(let[k,v]of Object.entries(rest))v!==void 0&&(o[k]=v);return slots.default&&(o.overlay=!1),hasNavigateListener()&&(o.onNavigate=(href,e)=>emit("navigate",href,e)),o},start=()=>{handle?.destroy(),host.value&&(handle=mount(host.value,props.scene,options()))};return onMounted(start),onBeforeUnmount(()=>handle?.destroy()),watch(()=>typeof props.scene=="string"?props.scene:props.scene.id,start),watch(()=>JSON.stringify(options()),()=>handle?.update(options())),()=>h("div",{ref:host,"data-lostpage-host":"",style:{position:"relative",minHeight:props.height??"100dvh"}},slots.default?[h("div",{class:"lp-custom"},slots.default())]:[])}}),vue_default=LostPage;export{LostPage,vue_default as default};

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "lostpage",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Immersive 404 pages for every framework: WebGL oceans, black holes, chrome 3D type, playable games, retro terminals, plus simple everyday 404s. 116 scenes, 650+ designs, zero dependencies.",
+  "keywords": [
+    "404",
+    "404-page",
+    "not-found",
+    "error-page",
+    "page-not-found",
+    "webgl",
+    "canvas",
+    "animation",
+    "react",
+    "nextjs",
+    "vue",
+    "nuxt",
+    "svelte",
+    "sveltekit",
+    "angular",
+    "astro",
+    "web-component",
+    "custom-element"
+  ],
+  "license": "MIT",
+  "author": "Satender Maurya",
+  "type": "module",
+  "sideEffects": [
+    "./dist/element.js",
+    "./dist/lostpage.global.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./catalog": {
+      "types": "./dist/catalog.d.ts",
+      "default": "./dist/catalog.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "default": "./dist/svelte.js"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "default": "./dist/element.js"
+    },
+    "./scenes/*": {
+      "types": "./dist/scenes/*.d.ts",
+      "default": "./dist/scenes/*.js"
+    },
+    "./global": "./dist/lostpage.global.js",
+    "./package.json": "./package.json",
+    "./cdn/*": "./dist/cdn/*"
+  },
+  "bin": {
+    "lostpage": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "gen": "node scripts/gen.mjs",
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/dev.mjs",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "node scripts/build.mjs",
+    "readme": "node scripts/readme.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "vue": ">=3.2"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "esbuild": "^0.25.0",
+    "react": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.0",
+    "@types/node": "^20"
+  },
+  "unpkg": "./dist/lostpage.global.js",
+  "jsdelivr": "./dist/lostpage.global.js",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}