lostpage 0.0.0-stage → 0.2.0

package/dist/react.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type MountOptions, type SceneDef, type SceneId } from "lostpage";
+export interface LostPageProps<P = Record<string, unknown>> extends MountOptions<P> {
+    /** A scene id ("lost-at-sea") — lazy-loaded — or a scene object imported from "lostpage/scenes/<id>". */
+    scene: SceneId | (string & {}) | SceneDef<P>;
+    /** Your own content, drawn above the scene. Replaces the built-in text layer. */
+    children?: ReactNode;
+    style?: CSSProperties;
+    /** Class on the host element (`className` in options goes on the scene root). */
+    hostClassName?: string;
+}
+/**
+ * Full-bleed 404 scene. Works in Next.js (app/not-found.tsx), Vite, Remix, Gatsby…
+ *
+ * ```tsx
+ * <LostPage scene="lost-at-sea" preset="storm" title="Rough waters." />
+ * ```
+ */
+export declare function LostPage<P = Record<string, unknown>>({ scene, children, style, hostClassName, ...opts }: LostPageProps<P>): import("react").JSX.Element;
+export default LostPage;
+export type { MountOptions, SceneDef, LostHandle } from "lostpage";

package/dist/react.js

@@ -0,0 +1,2 @@
+"use client";
+import{useEffect,useRef}from"react";import{mount}from"lostpage";import{jsx}from"react/jsx-runtime";var optionKey=o=>JSON.stringify(o,(_k,v)=>typeof v=="function"?void 0:v);function LostPage({scene,children,style,hostClassName,...opts}){let host=useRef(null),handle=useRef(null),latest=useRef(opts);latest.current=opts;let sceneKey=typeof scene=="string"?scene:scene.id,custom=children!=null&&children!==!1;useEffect(()=>{if(!host.current)return;let h=mount(host.current,scene,{...latest.current,overlay:custom?!1:latest.current.overlay});return handle.current=h,()=>{h.destroy(),handle.current=null}},[sceneKey,custom]);let key=optionKey(opts),first=useRef(!0);useEffect(()=>{if(first.current){first.current=!1;return}handle.current?.update({...latest.current,overlay:custom?!1:latest.current.overlay})},[key]);let bg=typeof scene=="string"?void 0:scene.presets?.[opts.preset??""]?.theme?.bg??scene.theme?.bg;return jsx("div",{ref:host,className:hostClassName,"data-lostpage-host":"",style:{position:"relative",minHeight:opts.height??"100dvh",background:bg,...style},children:custom?jsx("div",{className:"lp-custom",children}):null})}var react_default=LostPage;export{LostPage,react_default as default};

package/dist/scenes/_simple.d.ts

@@ -0,0 +1,10 @@
+import type { SceneContext } from "../core/types";
+export declare const esc: (s: string) => string;
+/** The current path, for "we couldn't find /x" lines. */
+export declare const path: () => string;
+/** Builds the preset/user action buttons wired to ctx.navigate. */
+export declare function actions(ctx: SceneContext<any>, className?: string): HTMLDivElement;
+/** Creates the scene's own content layer and removes it on destroy. */
+export declare function layer(ctx: SceneContext<any>, className: string, html: string, vars?: Record<string, string | number>): HTMLDivElement;
+/** Visually hidden "Error 404:" prefix so screen readers hear the status first. */
+export declare const sr: (code: string) => string;

package/dist/scenes/ascii-3d.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    ramp: string;
+    color: string;
+    bg: string;
+    /** Characters across the screen. */
+    cols: number;
+    depth: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/ascii-3d.js

@@ -0,0 +1,3 @@
+import{SANS,textPoints}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var ascii_3d_default={id:"ascii-3d",name:"ASCII Donut",description:"A 3D extruded 404 spinning in plain text. Every frame is ASCII characters lit by a moving light, like the famous donut.c.",category:"Retro Tech",kind:"3d",motion:"live",tags:["dom","ascii","3d","developer","retro","monospace","text"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"char *page = NULL;",title:"Segmentation fault: page not found.",message:"We rendered the error in glorious ASCII, but the page itself never compiled.",actions:[{label:"cd ~",href:"/",variant:"primary"}]},params:{ramp:" .,-~:;=!*#$@",color:"#d6ffe4",bg:"#050806",cols:120,depth:.22},theme:{bg:"#050806",fg:"#d6ffe4",accent:"#d6ffe4","accent-fg":"#050806","font-display":"var(--lp-font-mono)","title-weight":"600"},presetName:"Phosphor",presets:{red:{name:"Alert",params:{color:"#ff4d4d",bg:"#0a0202"},theme:{bg:"#0a0202",fg:"#ffd6d6",accent:"#ff4d4d","accent-fg":"#0a0202"}},ice:{name:"Ice",params:{color:"#9fe8ff",bg:"#020a12",ramp:" .:-=+*#%@"},theme:{bg:"#020a12",fg:"#e6f9ff",accent:"#9fe8ff","accent-fg":"#020a12"}},paper:{name:"Typewriter",params:{color:"#1b1b1b",bg:"#f3efe6",ramp:" .:-=+*#%@"},theme:{bg:"#f3efe6",fg:"#1b1b1b",accent:"#1b1b1b","accent-fg":"#f3efe6"}},amber:{name:"Amber",params:{color:"#ffbf47",bg:"#0b0700"},theme:{bg:"#0b0700",fg:"#ffdf9e",accent:"#ffbf47","accent-fg":"#0b0700"}},blocks:{name:"Blocks",params:{ramp:" \u2591\u2592\u2593\u2588",color:"#9ab8ff",bg:"#070a14",cols:96},theme:{bg:"#070a14",fg:"#dfe7ff",accent:"#9ab8ff","accent-fg":"#070a14"}}},css:`& .a3{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:3cqh;overflow:hidden}
+& .a3 pre{margin:0;font:600 var(--a3-size,10px)/1 var(--lp-font-mono);letter-spacing:0;white-space:pre;color:var(--a3-col)}`,setup(ctx){let p=ctx.params,wrap=document.createElement("div");wrap.className="a3",wrap.setAttribute("aria-hidden","true"),wrap.style.setProperty("--a3-col",p.color),wrap.style.background=p.bg;let pre=document.createElement("pre");wrap.append(pre),ctx.stage.append(wrap);let pts=[],cols=0,rows=0,build=()=>{let fs=Math.max(6,Math.min(14,ctx.width/p.cols/.6));cols=Math.floor(ctx.width/(fs*.6)),rows=Math.floor(ctx.height*.66/fs),wrap.style.setProperty("--a3-size",`${fs}px`);let tp=textPoints(ctx.copy.code||"404",{width:400,height:150,font:SANS,weight:900,fit:.95,step:2}),set=new Set;for(let i=0;i<tp.length;i+=2)set.add(`${Math.round(tp[i]/2)},${Math.round(tp[i+1]/2)}`);pts=[];let has=(x,y)=>set.has(`${x},${y}`);for(let k of set){let[gx,gy]=k.split(",").map(Number),x=(gx*2-200)/200,y=(gy*2-75)/200;pts.push(x,y,-p.depth,0,0,-1,x,y,p.depth,0,0,1);let edges=[[1,0],[-1,0],[0,1],[0,-1]];for(let[dx,dy]of edges)if(!has(gx+dx,gy+dy))for(let z=-p.depth;z<=p.depth;z+=.02)pts.push(x+dx*.005,y+dy*.005,z,dx,dy,0)}};return build(),{resize:build,frame(t){let A=Math.sin(t*.55)*.95+ctx.pointer.sx*.5,B=Math.sin(t*.4)*.35+ctx.pointer.sy*.4,ca=Math.cos(A),sa=Math.sin(A),cb=Math.cos(B),sb=Math.sin(B),zbuf=new Float32Array(cols*rows),out=new Array(cols*rows).fill(" "),ramp=p.ramp,L=[.5,-.6,-.62],scale=Math.min(cols*.42,rows*1.6);for(let i=0;i<pts.length;i+=6){let x=pts[i],y=pts[i+1],z=pts[i+2],nx=pts[i+3],ny=pts[i+4],nz=pts[i+5],x1=x*ca+z*sa,z1=-x*sa+z*ca,y1=y*cb-z1*sb,z2=y*sb+z1*cb,nx1=nx*ca+nz*sa,nz1=-nx*sa+nz*ca,ny1=ny*cb-nz1*sb,nz2=ny*sb+nz1*cb,ooz=1/(z2+2.6),sx=Math.floor(cols/2+x1*scale*ooz*2.6),sy=Math.floor(rows/2+y1*scale*.5*ooz*2.6);if(sx<0||sy<0||sx>=cols||sy>=rows)continue;let idx=sy*cols+sx;if(ooz>zbuf[idx]){zbuf[idx]=ooz;let lum=Math.max(0,nx1*L[0]+ny1*L[1]+nz2*L[2]);out[idx]=ramp[Math.min(ramp.length-1,1+Math.floor(lum*(ramp.length-1)))]}x1=x1,y1=y1}let s="";for(let r=0;r<rows;r++)s+=out.slice(r*cols,(r+1)*cols).join("")+`
+`;pre.textContent=s},destroy(){wrap.remove()}}}};export{ascii_3d_default as default};

package/dist/scenes/astronaut.d.ts

@@ -0,0 +1,10 @@
+interface Params {
+    bg: string;
+    bg2: string;
+    suit: string;
+    visor: string;
+    accent: string;
+    planet: string;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/astronaut.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 astronaut_default={id:"astronaut",name:"Drifting Astronaut",description:"An astronaut tumbles slowly through space, tether snapped, holding a little 404 sign. Stars stream past in parallax as you move the pointer.",category:"Space",kind:"2d",motion:"live",tags:["canvas","space","astronaut","illustration","parallax","calm","classic"],layout:"left",copy:{eyebrow:"Houston, we have a problem",title:"Lost in space.",message:"The page you're looking for drifted out of orbit. We'll send a rescue team. Meanwhile, head back to base.",actions:[{label:"Back to base",href:"/",variant:"primary"}]},params:{bg:"#0b0b2e",bg2:"#1e0b3a",suit:"#f2f4f8",visor:"#1a2a55",accent:"#ff7a3d",planet:"#ff9f6b"},theme:{bg:"#0b0b2e",fg:"#f2f4ff",accent:"#ff7a3d","accent-fg":"#fff"},presetName:"Nebula",presets:{pink:{name:"Cotton Candy",params:{bg:"#2a0b3a",bg2:"#7a2a6b",visor:"#3a1a5a",accent:"#ff6bd6",planet:"#ffb3e6"},theme:{bg:"#2a0b3a",accent:"#ff6bd6","accent-fg":"#fff"}},sunrise:{name:"Sunrise",params:{bg:"#1a1030",bg2:"#ff7a5a",visor:"#2a1a3a",accent:"#ffd23f",planet:"#ff9a6b"},theme:{bg:"#1a1030",accent:"#ffd23f","accent-fg":"#1a1030"}},mono:{name:"Monochrome",params:{bg:"#000000",bg2:"#141414",suit:"#ffffff",visor:"#111111",accent:"#ffffff",planet:"#777777"},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}},teal:{name:"Teal Void",params:{bg:"#021a1f",bg2:"#06303a",visor:"#0d4a5a",accent:"#ffd23f",planet:"#3bd6c6"},theme:{bg:"#021a1f",accent:"#ffd23f","accent-fg":"#021a1f"}}},css:`& .lp-overlay{padding-left:max(16px,calc(var(--lp-pad) * 1.5))}& .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),rnd=ctx.random,stars=[],build=()=>stars=Array.from({length:360},()=>({x:rnd()*c.w,y:rnd()*c.h,z:.2+rnd()*.8}));build();let suitPart=(g,fn,shade=1)=>{g.fillStyle=shade===1?p.suit:`rgba(0,0,0,${1-shade})`,fn(),g.fill()},astronaut=(g,S,t)=>{let limb=(x0,y0,x1,y1,w)=>{g.strokeStyle=p.suit,g.lineCap="round",g.lineWidth=w,g.beginPath(),g.moveTo(x0,y0),g.lineTo(x1,y1),g.stroke(),g.strokeStyle="rgba(0,0,0,.12)",g.lineWidth=w*.25,g.beginPath(),g.moveTo(x0+w*.2,y0+w*.15),g.lineTo(x1+w*.2,y1+w*.15),g.stroke()},sway=Math.sin(t*1.3)*.15;g.fillStyle="#c9ced8",g.beginPath(),g.roundRect(-S*.36,-S*.42,S*.72,S*.78,S*.12),g.fill(),limb(-S*.14,S*.3,-S*.3,S*.78+Math.sin(t)*S*.04,S*.2),limb(S*.14,S*.3,S*.32,S*.72-Math.sin(t)*S*.04,S*.2),g.fillStyle=p.accent,g.beginPath(),g.roundRect(-S*.42,S*.74,S*.24,S*.12,S*.05),g.roundRect(S*.2,S*.68,S*.24,S*.12,S*.05),g.fill(),suitPart(g,()=>{g.beginPath(),g.roundRect(-S*.3,-S*.32,S*.6,S*.7,S*.18)}),g.fillStyle=rgba(p.accent,.9),g.fillRect(-S*.14,-S*.08,S*.28,S*.14),g.fillStyle="#3bd6ff",g.fillRect(-S*.1,-S*.05,S*.05,S*.05),g.fillStyle="#3dff8a",g.fillRect(-S*.02,-S*.05,S*.05,S*.05),limb(-S*.26,-S*.18,-S*.62,-S*.5+sway*S,S*.17),limb(S*.26,-S*.18,S*.6,S*.02,S*.17),g.save(),g.translate(S*.62,S*0),g.rotate(-.2+sway*.4),g.fillStyle="#ffffff",g.beginPath(),g.roundRect(-S*.05,-S*.42,S*.6,S*.34,S*.04),g.fill(),g.fillStyle=p.accent,g.font=`900 ${S*.22}px Inter,Arial,sans-serif`,g.textAlign="center",g.textBaseline="middle",g.fillText(ctx.copy.code,S*.25,-S*.24),g.fillStyle="#c9ced8",g.fillRect(-S*.02,-S*.08,S*.04,S*.16),g.restore(),suitPart(g,()=>{g.beginPath(),g.arc(0,-S*.52,S*.32,0,Math.PI*2)});let visor=g.createLinearGradient(-S*.2,-S*.7,S*.2,-S*.36);visor.addColorStop(0,rgba("#9fd3ff",.9)),visor.addColorStop(.4,p.visor),visor.addColorStop(1,"#05070f"),g.fillStyle=visor,g.beginPath(),g.ellipse(S*.04,-S*.52,S*.24,S*.19,0,0,Math.PI*2),g.fill(),g.fillStyle="rgba(255,255,255,.6)",g.beginPath(),g.ellipse(-S*.06,-S*.6,S*.07,S*.035,-.5,0,Math.PI*2),g.fill(),g.strokeStyle=rgba(p.suit,.8),g.lineWidth=S*.025,g.beginPath(),g.moveTo(-S*.3,S*.1),g.bezierCurveTo(-S*.8,S*.3,-S*.9,S*.9+Math.sin(t*.8)*S*.1,-S*1.4,S*1),g.stroke()};return{resize(){c.reset(),build()},frame(t){let g=c.g;c.reset();let bg=g.createRadialGradient(c.w*.7,c.h*.4,0,c.w*.7,c.h*.4,Math.max(c.w,c.h)*.8);bg.addColorStop(0,p.bg2),bg.addColorStop(1,p.bg),g.fillStyle=bg,g.fillRect(0,0,c.w,c.h);for(let s of stars){let x=(s.x+t*6*s.z-ctx.pointer.sx*30*s.z+c.w*4)%c.w,y=(s.y+t*2*s.z+ctx.pointer.sy*20*s.z+c.h*4)%c.h;g.fillStyle=`rgba(255,255,255,${.3+s.z*.6})`,g.fillRect(x,y,s.z*1.8,s.z*1.8)}let px=c.w*.9,py=c.h*.88,pr=Math.min(c.w,c.h)*.26,pg=g.createRadialGradient(px-pr*.4,py-pr*.5,pr*.1,px,py,pr);pg.addColorStop(0,p.planet),pg.addColorStop(1,rgba(p.planet,.15)),g.fillStyle=pg,g.beginPath(),g.arc(px,py,pr,0,Math.PI*2),g.fill(),g.strokeStyle=rgba(p.planet,.6),g.lineWidth=6,g.beginPath(),g.ellipse(px,py,pr*1.6,pr*.35,-.3,Math.PI*1.05,Math.PI*1.95),g.stroke();let S=Math.min(c.w,c.h)*.22;g.save(),g.translate(c.w*(c.w<760?.5:.66)+Math.sin(t*.3)*20+ctx.pointer.sx*10,c.h*(c.w<760?.32:.44)+Math.sin(t*.5)*16),g.rotate(Math.sin(t*.25)*.5+t*.06),astronaut(g,S,t),g.restore()}}}};export{astronaut_default as default};

package/dist/scenes/aurora.d.ts

@@ -0,0 +1,14 @@
+interface Params {
+    low: string;
+    high: string;
+    skyTop: string;
+    skyBottom: string;
+    mountains: string;
+    intensity: number;
+    speed: number;
+    stars: number;
+    cabin: boolean;
+    snow: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/aurora.js

@@ -0,0 +1,129 @@
+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 uLow, uHigh, uSkyTop, uSkyBottom, uMount;
+uniform float uIntensity, uSpeed, uStars, uCabin, uSnow;
+${HASH}
+${NOISE}
+${POST}
+
+float shore = -0.05;
+
+// aurora: stacked curtains, each a wavy ribbon with vertical rays that come and go along x
+vec3 aurora(vec2 p, float t) {
+  vec3 acc = vec3(0.0);
+  for (int i = 0; i < 4; i++) {
+    float fi = float(i);
+    float x = p.x * (0.8 + fi * 0.15) + fi * 2.3;
+    float base = 0.1 + fi * 0.07 + 0.09 * sin(x * 1.1 + t * 0.17 + fi * 1.3) + 0.08 * (fbm(vec2(x * 0.7 - t * 0.04, fi * 4.0)) - 0.5);
+    float dy = p.y - base;
+    if (dy < -0.03) continue;
+    float env = smoothstep(0.4, 0.68, fbm(vec2(x * 0.45 + t * 0.025, fi * 9.0 + 3.0)));
+    float rays = 0.35 + 0.65 * pow(fbm(vec2(x * 18.0 + t * 0.35, fi * 3.0 + t * 0.07)), 1.5);
+    float fall = exp(-max(dy, 0.0) * (5.0 - fi * 0.5)) * smoothstep(-0.025, 0.01, dy);
+    vec3 c = mix(uLow, uHigh, smoothstep(0.02, 0.3, dy));
+    acc += c * fall * rays * env * (0.32 - fi * 0.05);
+  }
+  return acc * uIntensity;
+}
+
+float ridge(float x, float seed) {
+  float h = 0.0, a = 0.5, f = 1.0;
+  for (int i = 0; i < 6; i++) {
+    h += a * (1.0 - abs(vnoise(vec2(x * f + seed, seed * 1.7)) * 2.0 - 1.0));
+    a *= 0.5; f *= 2.03;
+  }
+  return h;
+}
+
+vec3 sky(vec2 p, float t) {
+  vec3 c = mix(uSkyBottom, uSkyTop, smoothstep(-0.15, 0.55, p.y));
+  vec2 g = p * 190.0;
+  vec2 id = floor(g);
+  float h = hash12(id);
+  vec2 lp = fract(g) - 0.5 - (hash22(id) - 0.5) * 0.7;
+  float tw = 0.6 + 0.4 * sin(uTime * (1.0 + h * 4.0) + h * 30.0);
+  c += vec3(0.85, 0.9, 1.0) * smoothstep(0.13, 0.0, length(lp)) * step(0.983, h) * tw * uStars * smoothstep(-0.1, 0.15, p.y);
+  c += aurora(p, t);
+  return c;
+}
+
+// everything above the waterline: sky, two mountain ranges, the forest banks and a cabin
+vec3 above(vec2 p, float t, float px) {
+  vec3 c = sky(p, t);
+  vec3 glow = aurora(vec2(p.x, 0.12), t);
+  // far range with snow, lit by the aurora
+  float fx = p.x * 1.2 + 4.0;
+  float far = shore + 0.01 + ridge(fx, 3.0) * 0.24;
+  if (p.y < far) {
+    float slope = ridge(fx + 0.02, 3.0) - ridge(fx - 0.02, 3.0);
+    float line = shore + 0.12 + fbm(vec2(p.x * 6.0, 2.0)) * 0.04;
+    float snow = smoothstep(line - 0.01, line + 0.01, p.y) * smoothstep(-0.04, 0.0, -abs(slope) * 0.3);
+    vec3 rock = mix(uMount * 1.6, uSkyBottom, 0.45);
+    float lit = slope < 0.0 ? 1.0 : 0.35;
+    vec3 snowCol = (vec3(0.07, 0.09, 0.13) + glow * 0.7) * lit;
+    c = mix(rock, snowCol, snow * uSnow);
+  }
+  // near hills
+  float nx = p.x * 2.4 + 17.0;
+  float near = shore + 0.004 + ridge(nx, 7.0) * 0.075;
+  if (p.y < near) c = uMount * 1.1;
+  // forest banks rising toward both edges
+  float side = abs(p.x);
+  float bankH = smoothstep(0.25, 0.95, side) * 0.04;
+  if (p.y < shore + bankH) c = uMount * 0.7;
+  float w = 0.016;
+  float cell = floor(p.x / w);
+  for (int k = -1; k <= 1; k++) {
+    float id = cell + float(k);
+    float cx = (id + 0.5 + (hash11(id) - 0.5) * 0.6) * w;
+    float density = smoothstep(0.28, 0.6, abs(cx));
+    if (hash11(id + 5.0) > density) continue;
+    float ground = shore + smoothstep(0.25, 0.95, abs(cx)) * 0.04;
+    float h = (0.05 + 0.08 * hash11(id + 9.0)) * (0.6 + smoothstep(0.3, 1.0, abs(cx)) * 1.2);
+    float yy = (p.y - ground) / h;
+    if (yy < 0.0 || yy > 1.0) continue;
+    float halfW = (1.0 - yy) * h * 0.34 * (0.78 + 0.22 * abs(sin(yy * 26.0)));
+    float tree = smoothstep(px, -px, abs(p.x - cx) - halfW);
+    c = mix(c, uMount * 0.45, tree);
+  }
+  // cabin with a warm window
+  if (uCabin > 0.5) {
+    vec2 q = p - vec2(0.56, shore + smoothstep(0.25, 0.95, 0.56) * 0.04);
+    float body = step(abs(q.x), 0.03) * step(0.0, q.y) * step(q.y, 0.026);
+    float roof = step(abs(q.x) * 0.8 + (q.y - 0.026), 0.028) * step(0.026, q.y);
+    float win = step(abs(q.x - 0.008), 0.007) * step(abs(q.y - 0.011), 0.006);
+    c = mix(c, uMount * 0.4, max(body, roof));
+    vec3 warm = vec3(1.0, 0.6, 0.22);
+    c = mix(c, warm * 2.2, win);
+    c += warm * 0.3 * exp(-length(q - vec2(0.008, 0.011)) * 55.0);
+  }
+  return c;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime * uSpeed;
+  float px = 1.5 / uRes.y;
+  vec2 p = uv + uMouse * vec2(0.02, 0.01);
+
+  vec3 col;
+  if (p.y > shore) col = above(p, t, px);
+  else {
+    float d = shore - p.y;
+    float rip = sin(p.y * 220.0 / (d * 6.0 + 0.3) + uTime * 1.4) * 0.5 + sin(p.x * 40.0 + p.y * 300.0 + uTime) * 0.5;
+    vec2 rp = vec2(p.x + rip * 0.0025 * (0.3 + d * 4.0), shore + d);
+    col = above(rp, t, px) * 0.62;
+    col = mix(col, uSkyBottom * 0.3, smoothstep(0.05, 0.45, d) * 0.6);
+    // the near shoreline: a thin dark band of rocks and snow
+    col = mix(col, uMount * 0.5, smoothstep(0.004, 0.0, d - 0.002));
+  }
+
+  col = aces(col * 1.15);
+  col = toSRGB(col);
+  col *= mix(0.78, 1.0, vignette(vUv, 0.2));
+  col += grain(fc, uTime) * 0.015;
+  fragColor = vec4(col, 1.0);
+}
+`,aurora_default={id:"aurora",name:"Northern Lights",description:"Aurora curtains over a frozen lake and mountains, a lone cabin glowing on the shore.",category:"Nature",kind:"2d",motion:"live",tags:["webgl","aurora","night","mountains","lake","calm","nature"],layout:"bottom",copy:{eyebrow:"Edge of the map",title:"Beautiful view. Wrong page.",message:"You've wandered somewhere the map doesn't cover. The lights are lovely, but the way home is this way.",actions:[{label:"Head back home",href:"/",variant:"primary"}]},params:{low:"#2bff9e",high:"#7a4dff",skyTop:"#01030a",skyBottom:"#06122a",mountains:"#03060d",intensity:1,speed:1,stars:1,cabin:!0,snow:1},theme:{bg:"#030814",accent:"#d8fff0","accent-fg":"#02130b","code-color":"rgba(220,255,240,.2)"},presetName:"Emerald",presets:{rainbow:{name:"Corona",params:{low:"#3bff9a",high:"#ff4fd8",intensity:1.15},theme:{accent:"#ffe6fb","accent-fg":"#1a0520"}},faint:{name:"Faint Glow",eyebrow:"Quiet night",params:{intensity:.55,stars:1.3,low:"#7bffc4",high:"#5a7bff"}},gold:{name:"Solar Gold",params:{low:"#ffe14d",high:"#6bff9a",skyBottom:"#0d1a12"},theme:{accent:"#fff3b0","accent-fg":"#1a1400"}},teal:{name:"Teal Fjord",params:{low:"#2bd4c9",high:"#2b8cff",skyBottom:"#031c24",mountains:"#010c10",cabin:!1},theme:{bg:"#031c24",accent:"#cffcff","accent-fg":"#031c24"}},violet:{name:"Violet",params:{low:"#b45cff",high:"#ff4fa0",skyBottom:"#0d0a26"},theme:{accent:"#f0dcff","accent-fg":"#12052a"}},crimson:{name:"Crimson Storm",eyebrow:"Solar storm",title:"A rare sky. A missing page.",params:{low:"#ff3b5c",high:"#ffb13b",skyBottom:"#1a0610",intensity:1.2},theme:{accent:"#ffd6dd","accent-fg":"#2a0610"}},ice:{name:"Glacier Blue",params:{low:"#3bd4ff",high:"#2b6bff",skyBottom:"#041a2e",mountains:"#02101c"},theme:{accent:"#dff6ff","accent-fg":"#031b2a"}},dusk:{name:"Polar Dusk",params:{low:"#3bffb1",high:"#ff8a5c",skyTop:"#0b1030",skyBottom:"#3a2a5c",mountains:"#0b0c1c",intensity:.7,stars:.5},theme:{bg:"#18163a",accent:"#ffe2d1","accent-fg":"#18163a"}}},css:`&{--lp-code-size:clamp(64px,9cqw,120px)}
+& .lp-code{font-weight:300;letter-spacing:.04em;margin-bottom:6px}
+& .lp-overlay{gap:0}`,setup(ctx){let p=ctx.params;return shaderScene(ctx,{frag:FRAG,uniforms:()=>({uLow:linear(p.low),uHigh:linear(p.high),uSkyTop:linear(p.skyTop),uSkyBottom:linear(p.skyBottom),uMount:linear(p.mountains),uIntensity:p.intensity,uSpeed:p.speed,uStars:p.stars,uCabin:p.cabin?1:0,uSnow:p.snow})})}};export{aurora_default as default};

package/dist/scenes/autumn.d.ts

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

package/dist/scenes/autumn.js

@@ -0,0 +1 @@
+import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{SANS,textPoints}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var autumn_default={id:"autumn",name:"Autumn Leaves",description:"Leaves drift down on the breeze and settle on the lawn in the shape of the error. Sweep through them with the cursor to scatter them.",category:"Nature",kind:"2d",motion:"live",tags:["canvas","leaves","autumn","fall","cozy","warm","interactive","particles"],layout:"top",codeInScene:!0,copy:{eyebrow:"Season's change",title:"This page fell off the tree.",message:"It's somewhere in the pile. We'll rake it up eventually. For now, head inside.",actions:[{label:"Head inside",href:"/",variant:"primary"}]},params:{bg:"#f6e7cf",bg2:"#e9c99a",leaves:["#d9541e","#e98a1f","#c23b22","#f2b33d","#8a3a1a"],count:520},theme:{bg:"#f6e7cf",fg:"#3a1d0a",accent:"#3a1d0a","accent-fg":"#fff3e0"},presetName:"Maple",presets:{cherry:{name:"Cherry Blossom",eyebrow:"Spring",title:"Swept away with the blossoms.",params:{bg:"#fff4f6",bg2:"#ffe0e8",leaves:["#ffb7c5","#ff8fab","#ffd1dc","#ffffff"]},theme:{bg:"#fff4f6",fg:"#4a1a2a",accent:"#4a1a2a"}},dusk:{name:"October Dusk",params:{bg:"#2a1f3a",bg2:"#5a3a3a",leaves:["#ff7a3d","#ffb347","#d94a2a","#ffd27a"]},theme:{bg:"#2a1f3a",fg:"#ffeedd",accent:"#ffb347","accent-fg":"#2a1f3a"}},ginkgo:{name:"Ginkgo",params:{bg:"#f2f0e6",bg2:"#dfe3cf",leaves:["#f2c11d","#e8b30f","#ffd84d","#c99a0a"]},theme:{bg:"#f2f0e6",fg:"#2a2a10",accent:"#2a2a10"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,leaves=[],build=()=>{let boxW=Math.min(c.w*.82,1100),boxH=Math.min(boxW*.38,c.h*.4),pts=textPoints(ctx.copy.code||"404",{width:boxW,height:boxH,font:SANS,weight:900,fit:.95,step:6,random:rnd}),n=Math.min(pts.length/2,Math.round(p.count*Math.min(1.3,c.w/1440)));leaves=[];for(let i=0;i<n;i++){let k=Math.floor(i/n*(pts.length/2)),tx=pts[k*2]+(c.w-boxW)/2+(rnd()-.5)*6,ty=pts[k*2+1]+c.h*.62-boxH/2+(rnd()-.5)*6;leaves.push({x:ctx.reducedMotion?tx:rnd()*c.w,y:ctx.reducedMotion?ty:-rnd()*c.h,tx,ty,vx:0,vy:0,a:rnd()*6,va:(rnd()-.5)*3,s:7+rnd()*7,col:p.leaves[Math.floor(rnd()*p.leaves.length)],landed:ctx.reducedMotion,delay:rnd()*2.2})}};build();let leaf=(g,l)=>{g.save(),g.translate(l.x,l.y),g.rotate(l.a),g.scale(1,l.landed?.75:.6+.4*Math.abs(Math.sin(l.a*1.7))),g.fillStyle=l.col,g.beginPath();for(let k=0;k<=10;k++){let ang=k/10*Math.PI*2-Math.PI/2,r=k%2?l.s*.45:l.s;g.lineTo(Math.cos(ang)*r,Math.sin(ang)*r)}g.closePath(),g.fill(),g.strokeStyle="rgba(0,0,0,.18)",g.lineWidth=.8,g.beginPath(),g.moveTo(0,l.s*.9),g.lineTo(0,-l.s*.6),g.stroke(),g.restore()};return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;c.reset();let grd=g.createLinearGradient(0,0,0,c.h);grd.addColorStop(0,p.bg),grd.addColorStop(1,p.bg2),g.fillStyle=grd,g.fillRect(0,0,c.w,c.h),g.fillStyle="rgba(90,110,40,.12)",g.fillRect(0,c.h*.42,c.w,c.h);let wind=Math.sin(t*.4)*30+20;for(let l of leaves){if(dt>0){if(!l.landed){if(t<l.delay){leaf(g,l);continue}let dx=l.tx-l.x,dy=l.ty-l.y,d=Math.hypot(dx,dy);l.vx+=(Math.sin(t*2+l.s)*40+wind*.5+dx*1.6)*dt,l.vy+=(60+dy*1.1)*dt,l.vx*=Math.exp(-2*dt),l.vy*=Math.exp(-2*dt),l.a+=l.va*dt,d<9&&(l.landed=!0,l.x=l.tx,l.y=l.ty)}if(ctx.pointer.inside){let ex=l.x-ctx.pointer.x,ey=l.y-ctx.pointer.y,d2=ex*ex+ey*ey;d2<5e3&&(l.landed=!1,l.vx+=ex/Math.sqrt(d2+1)*600*dt*10,l.vy-=400*dt*10,l.va=(rnd()-.5)*8)}l.landed||(l.x+=l.vx*dt,l.y+=l.vy*dt)}leaf(g,l)}}}}};export{autumn_default as default};

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

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

package/dist/scenes/balloon-404.js

@@ -0,0 +1 @@
+import{text3dScene}from"../chunks/chunk-6HZC24J2.js";import"../chunks/chunk-SH72TE6I.js";import"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var balloon_404_default={id:"balloon-404",name:"Foil Balloons",description:"Inflated foil-balloon numerals bobbing on their strings, crinkles catching the light.",category:"Playful",kind:"3d",motion:"live",tags:["webgl","raymarching","balloon","foil","party","metallic","playful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Surprise!",title:"The party's not on this page.",message:"We blew up the balloons, but the page never showed. The fun is back home.",actions:[{label:"Back to the party",href:"/",variant:"primary"}]},params:{c1:"#c9ced8",c2:"#c9ced8",c3:"#c9ced8",bgTop:"#fbe9ef",bgBottom:"#f3cfdc"},theme:{bg:"#f7dde6",fg:"#2d1320",accent:"#2d1320","accent-fg":"#fff"},presetName:"Silver",presets:{birthday:{name:"Birthday",title:"Happy 404th birthday.",message:"The cake is here. The page isn't. Party's at the homepage.",params:{c1:"#ff3b3b",c2:"#2f6bff",c3:"#ffc83b",bgTop:"#fff7ec",bgBottom:"#ffe6c9"},theme:{bg:"#fff0dc",fg:"#2a1405",accent:"#2a1405","accent-fg":"#fff"}},pastel:{name:"Baby Shower",params:{c1:"#ffc2d1",c2:"#bde0fe",c3:"#cdb4db",bgTop:"#fffafc",bgBottom:"#f4e8ff"},theme:{bg:"#f9f0fb",fg:"#3a2440",accent:"#3a2440","accent-fg":"#fff"}},lime:{name:"Lime",params:{c1:"#a3e635",c2:"#a3e635",c3:"#a3e635",bgTop:"#14210a",bgBottom:"#070c03"},theme:{bg:"#0d1606",fg:"#f2ffe0",accent:"#a3e635","accent-fg":"#0d1606"}},violet:{name:"Ultraviolet",params:{c1:"#9b5cff",c2:"#9b5cff",c3:"#9b5cff",bgTop:"#f2ecff",bgBottom:"#d9c9ff"},theme:{bg:"#e6dcff",fg:"#1f0b47",accent:"#5b21b6","accent-fg":"#fff"}},gold:{name:"Gold",params:{c1:"#f2c45a",c2:"#f2c45a",c3:"#f2c45a",bgTop:"#1d1a2e",bgBottom:"#0d0b16"},theme:{bg:"#151222",fg:"#fbf3e0",accent:"#f2c45a","accent-fg":"#151222"}},rainbow:{name:"Rainbow",params:{c1:"#ff5d8f",c2:"#ffd25d",c3:"#5dd6ff",bgTop:"#f2f6ff",bgBottom:"#d6e2ff"},theme:{bg:"#e4ecff",fg:"#121a33",accent:"#121a33","accent-fg":"#fff"}},"rose-gold":{name:"Rose Gold",params:{c1:"#f0a99a",c2:"#f0a99a",c3:"#f0a99a",bgTop:"#fff4ef",bgBottom:"#f5d9d0"},theme:{bg:"#f9e5df",fg:"#3a1b14",accent:"#3a1b14","accent-fg":"#fff"}},blue:{name:"Electric Blue",params:{c1:"#4f7dff",c2:"#4f7dff",c3:"#4f7dff",bgTop:"#e9f0ff",bgBottom:"#c8d8ff"},theme:{bg:"#d8e4ff",fg:"#0c1638",accent:"#2e5bff","accent-fg":"#fff"}}},css:"& .lp-title{font-weight:700}",setup(ctx){let p=ctx.params;return text3dScene(ctx,{material:"foil",colors:{a:p.c1,b:p.c2,c:p.c3,bg0:p.bgTop,bg1:p.bgBottom,light:"#ffffff"},depth:.3,inflate:.2,spin:.25,float:.08,weight:900,strings:!0,floor:!1,envSpeed:.1,y:.14})}};export{balloon_404_default as default};

package/dist/scenes/beach.d.ts

@@ -0,0 +1,14 @@
+interface Params {
+    sand: string;
+    wet: string;
+    shallow: string;
+    deep: string;
+    foam: string;
+    /** Seconds per wave cycle. */
+    cycle: number;
+    /** How far up the beach a wave reaches (0..1 of the screen). */
+    reach: number;
+    shells: boolean;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/beach.js

@@ -0,0 +1,95 @@
+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{drawFittedText}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uSand, uWet, uShallow, uDeep, uFoam;
+uniform float uCycle, uReach, uShells;
+${HASH}
+${NOISE}
+${POST}
+
+const float SHORE = 0.74;
+
+// wash cycle: 0 rest at shore, 1 = full reach
+float wash(float c) {
+  float up = smoothstep(0.0, 0.2, c);
+  float down = 1.0 - smoothstep(0.26, 0.5, c);
+  return up * down;
+}
+
+float edgeAt(float x, float w, float t) {
+  float n = fbm(vec2(x * 3.0, t * 0.15)) - 0.5;
+  return SHORE - w * uReach + n * 0.05 + sin(x * 6.0 + t * 0.6) * 0.008;
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = fc / uRes;
+  vec2 p = vec2(uv.x * uRes.x / uRes.y, uv.y);
+  float t = uTime;
+  float c = fract(t / uCycle);
+  float w = wash(c);
+  float edge = edgeAt(p.x, w, t);
+  float peakEdge = edgeAt(p.x, 1.0, t);
+
+  // sand: grains + wind ripples
+  float rip = sin(p.y * 90.0 + fbm(p * 6.0) * 9.0 + p.x * 4.0) * 0.5 + 0.5;
+  float grains = hash12(floor(fc * 0.7)) * 0.5 + vnoise(p * 300.0) * 0.5;
+  vec3 sand = uSand * (0.9 + 0.08 * rip + 0.1 * (grains - 0.5));
+  // wet band left by this cycle's wave, drying after it recedes
+  float washed = step(peakEdge, uv.y);
+  float dry = smoothstep(0.5, 0.95, c);
+  float wetness = washed * (c > 0.2 ? 1.0 - dry * 0.85 : step(edge, uv.y));
+  wetness = max(wetness, smoothstep(SHORE - 0.06, SHORE, uv.y));
+
+  // writing in the sand: erased where this wave reached, redrawn as the beach dries
+  float rewrite = 1.0;
+  if (washed > 0.5) rewrite = c < 0.2 ? step(uv.y, edge) : smoothstep(0.55, 0.75, c);
+  float a = textureLod(uText, uv, 0.0).a;
+  float ab = textureLod(uText, uv, 2.0).a;
+  vec2 e = vec2(2.0 / uRes.x, 2.0 / uRes.y);
+  float gx = textureLod(uText, uv + vec2(e.x, 0.0), 1.5).a - textureLod(uText, uv - vec2(e.x, 0.0), 1.5).a;
+  float gy = textureLod(uText, uv + vec2(0.0, e.y), 1.5).a - textureLod(uText, uv - vec2(0.0, e.y), 1.5).a;
+  float groove = ab * rewrite;
+  // light from the top-left: walls of the groove facing the light are bright, others shaded
+  float lit = clamp(-(gx * 0.6 - gy * 0.8) * 3.0, -1.0, 1.0) * rewrite;
+  sand *= 1.0 - groove * 0.28;
+  sand += uSand * lit * 0.22;
+
+  vec3 col = mix(sand, uWet * (0.9 + 0.1 * rip), wetness * 0.85);
+  // glossy sheen on wet sand
+  col += vec3(1.0) * wetness * 0.06 * smoothstep(0.6, 1.0, vnoise(p * vec2(4.0, 30.0) + t * 0.2));
+
+  // shells
+  if (uShells > 0.5) {
+    for (int i = 0; i < 5; i++) {
+      float fi = float(i);
+      vec2 sp = vec2(hash11(fi * 3.7) * uRes.x / uRes.y, 0.08 + hash11(fi * 9.1) * 0.5);
+      vec2 d = p - sp;
+      d = mat2(cos(fi), -sin(fi), sin(fi), cos(fi)) * d;
+      float r = length(d * vec2(1.0, 1.3));
+      float shell = smoothstep(0.016, 0.013, r);
+      float ridges = 0.85 + 0.15 * sin(atan(d.y, d.x) * 14.0);
+      col = mix(col, vec3(1.0, 0.93, 0.86) * ridges * (0.9 + 0.2 * (d.y / 0.016)), shell);
+      col *= 1.0 - smoothstep(0.022, 0.012, length(d - vec2(0.004, -0.004))) * 0.15 * (1.0 - shell);
+    }
+  }
+
+  // water above the edge: shallow turquoise turning deep, caustics and sparkle
+  float inWater = smoothstep(edge - 0.004, edge + 0.004, uv.y);
+  float depth = clamp((uv.y - edge) / 0.35, 0.0, 1.0);
+  vec3 water = mix(uShallow, uDeep, smoothstep(0.0, 1.0, depth + (uv.y - SHORE) * 1.4));
+  float caus = pow(abs(sin(fbm(p * 9.0 + t * 0.35) * 12.0)), 6.0);
+  water += vec3(1.0) * caus * 0.12 * (1.0 - depth);
+  vec3 under = col * mix(vec3(0.9, 0.97, 1.0), uShallow, 0.35);
+  water = mix(under, water, smoothstep(0.0, 0.25, depth));
+  float sparkle = step(0.997, hash12(floor(fc * 0.5) + floor(t * 6.0))) * depth;
+  water += sparkle * 0.8;
+  col = mix(col, water, inWater);
+  // foam line and lace
+  float fl = exp(-abs(uv.y - edge) * 140.0);
+  float lace = smoothstep(0.55, 0.75, fbm(p * vec2(14.0, 40.0) + vec2(t * 0.1, 0.0))) * smoothstep(0.08, 0.0, uv.y - edge) * step(edge, uv.y);
+  col = mix(col, uFoam, clamp(fl * 0.9 + lace * 0.7, 0.0, 1.0));
+
+  col = toSRGB(aces(col * 1.05));
+  fragColor = vec4(col, 1.0);
+}
+`,beach_default={id:"beach",name:"Written in Sand",description:"The code is written in the sand of a quiet beach. Waves wash it away, and it's redrawn as the sand dries.",category:"Nature",kind:"2d",motion:"live",tags:["webgl","beach","ocean","summer","calm","light","nature"],layout:"bottom",codeInScene:!0,stillTime:.9,copy:{eyebrow:"Washed away",title:"The tide took this page.",message:"It was written here a moment ago. Walk back up the beach to where things stay put.",actions:[{label:"Back to dry land",href:"/",variant:"primary"}]},params:{sand:"#e8d2a8",wet:"#b89c72",shallow:"#7fe3d6",deep:"#1f8fb3",foam:"#ffffff",cycle:12,reach:.34,shells:!0},theme:{bg:"#e8d2a8",fg:"#3a2a15",accent:"#3a2a15","accent-fg":"#f6ead2"},presetName:"Tropical",presets:{night:{name:"Moonlit Beach",params:{sand:"#8a8aa0",wet:"#5a5a74",shallow:"#3a6a8a",deep:"#0b1a3a",foam:"#dfe8ff",shells:!1},theme:{bg:"#6b6b88",fg:"#f2f2ff",accent:"#f2f2ff","accent-fg":"#1a1a2e"}},lagoon:{name:"Lagoon",params:{sand:"#fff2d9",wet:"#e6cfa8",shallow:"#9ff2e6",deep:"#00a3c9",foam:"#ffffff"},theme:{bg:"#fff2d9",fg:"#2a1a05",accent:"#00728f","accent-fg":"#fff"}},black:{name:"Black Sand",params:{sand:"#3a3936",wet:"#1f1e1c",shallow:"#6fa3b5",deep:"#1d3a4f",foam:"#e9f2f5"},theme:{bg:"#2c2b29",fg:"#f2efe8",accent:"#f2efe8","accent-fg":"#1f1e1c"}},sunset:{name:"Golden Hour",params:{sand:"#f2c38f",wet:"#c58c5c",shallow:"#ffb38a",deep:"#7a4a8c",foam:"#fff2e2"},theme:{bg:"#f2c38f",fg:"#3b1d0e",accent:"#3b1d0e","accent-fg":"#ffeedd"}},pink:{name:"Pink Sand",params:{sand:"#f4d6d0",wet:"#d6aaa2",shallow:"#a6eee6",deep:"#3bb4c9",foam:"#ffffff"},theme:{bg:"#f4d6d0",fg:"#4a2420",accent:"#4a2420","accent-fg":"#fff"}},nordic:{name:"Nordic",params:{sand:"#d9d6cf",wet:"#a9a59c",shallow:"#9fbcc4",deep:"#4a6670",foam:"#f4f7f8",shells:!1},theme:{bg:"#d9d6cf",fg:"#1f2a2e",accent:"#1f2a2e","accent-fg":"#fff"}}},css:"& .lp-body{background:radial-gradient(closest-side,color-mix(in srgb,var(--lp-bg) 70%,transparent),transparent);padding:20px 50px}",setup(ctx){let p=ctx.params,cv=document.createElement("canvas"),tex=null,gl,draw=()=>{let w=Math.min(2048,Math.round(ctx.width*Math.min(2,ctx.dpr))),h=Math.round(w*ctx.height/Math.max(1,ctx.width));cv.width=w,cv.height=h;let g=cv.getContext("2d");g.clearRect(0,0,w,h),g.save(),g.translate(0,h*.45-h*.18),g.rotate(-.03),drawFittedText(g,ctx.copy.code||"404",{width:w,height:h*.36,font:'"Marker Felt","Chalkboard SE","Comic Sans MS","Segoe Print",cursive',weight:700,fit:.7}),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,uSand:linear(p.sand),uWet:linear(p.wet),uShallow:linear(p.shallow),uDeep:linear(p.deep),uFoam:linear(p.foam),uCycle:p.cycle,uReach:p.reach,uShells:p.shells?1:0})}),resize:draw}}};export{beach_default as default};

package/dist/scenes/black-hole.d.ts

@@ -0,0 +1,15 @@
+interface Params {
+    hot: string;
+    warm: string;
+    cool: string;
+    textColor: string;
+    diskBrightness: number;
+    diskTilt: number;
+    spin: number;
+    doppler: number;
+    stars: number;
+    nebula: string;
+    exposure: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/black-hole.js

@@ -0,0 +1,124 @@
+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}from"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var FRAG=`
+uniform sampler2D uText;
+uniform vec3 uHot, uWarm, uCool, uTextCol, uNebula;
+uniform float uDiskB, uTilt, uSpin, uDoppler, uStars, uExposure, uTextAspect;
+${HASH}
+${NOISE}
+${POST}
+
+const float RS = 1.0;      // Schwarzschild radius
+const float DISK_IN = 2.6;
+const float DISK_OUT = 9.0;
+
+vec3 starfield(vec3 d) {
+  vec3 col = vec3(0.0);
+  for (int l = 0; l < 3; l++) {
+    float sc = 140.0 + float(l) * 160.0;
+    vec3 p = d * sc;
+    vec3 id = floor(p);
+    float h = hash13(id + float(l) * 31.0);
+    if (h > 0.985) {
+      vec3 c = id + 0.5 + (vec3(hash13(id + 1.0), hash13(id + 2.0), hash13(id + 3.0)) - 0.5) * 0.6;
+      float dd = length(p - c);
+      vec3 tint = mix(vec3(0.7, 0.8, 1.0), vec3(1.0, 0.85, 0.7), hash13(id + 9.0));
+      col += tint * smoothstep(0.3, 0.0, dd) * (h - 0.985) * 45.0 / (1.0 + float(l));
+    }
+  }
+  float n = fbm3(d * 2.2 + 5.0);
+  col += uNebula * pow(max(n - 0.35, 0.0), 2.0) * 1.6;
+  return col * uStars;
+}
+
+vec4 diskSample(vec3 p, vec3 rd) {
+  float r = length(p.xz);
+  if (r < DISK_IN || r > DISK_OUT) return vec4(0.0);
+  float ang = atan(p.z, p.x);
+  float omega = uSpin * 2.2 / pow(r, 1.5);
+  float a = ang + uTime * omega;
+  vec2 q = vec2(r * 1.7, a * 3.0);
+  float n = fbm(vec2(q.x, sin(a) * 3.0 + cos(a) * 1.5) + vec2(0.0, uTime * 0.05)) * 0.7 + 0.3 * vnoise(vec2(r * 9.0, a * 12.0));
+  float ring = smoothstep(DISK_IN, DISK_IN + 0.4, r) * smoothstep(DISK_OUT, DISK_OUT * 0.55, r);
+  float dens = ring * (0.35 + 0.95 * n);
+  // temperature falls with radius
+  float tcur = clamp((r - DISK_IN) / (DISK_OUT - DISK_IN), 0.0, 1.0);
+  vec3 c = mix(uHot, uWarm, smoothstep(0.0, 0.45, tcur));
+  c = mix(c, uCool, smoothstep(0.4, 1.0, tcur));
+  // relativistic beaming: the side moving toward us is brighter and bluer
+  vec3 vel = normalize(vec3(-p.z, 0.0, p.x)) * sqrt(0.5 / r);
+  float g = 1.0 / max(1.0 - dot(vel, -rd) * uDoppler * 1.6, 0.15);
+  c *= pow(g, 3.0);
+  c = mix(c, c * vec3(0.8, 0.95, 1.25), clamp(g - 1.0, 0.0, 1.0) * 0.6);
+  float inten = uDiskB * 4.0 / (r * 0.6);
+  return vec4(c * inten * dens, clamp(dens * 0.9, 0.0, 1.0));
+}
+
+void main() {
+  vec2 fc = gl_FragCoord.xy;
+  vec2 uv = (fc - 0.5 * uRes) / uRes.y;
+  float t = uTime;
+  float aspect = uRes.x / uRes.y;
+
+  // camera orbiting slightly above the disk plane
+  float dist = 46.0 / clamp(aspect, 0.6, 1.8);
+  float yaw = 0.25 * sin(t * 0.05) + uMouse.x * 0.35;
+  float pitch = uTilt + uMouse.y * 0.12;
+  vec3 ro = dist * vec3(sin(yaw) * cos(pitch), sin(pitch), cos(yaw) * cos(pitch));
+  vec3 fw = normalize(-ro);
+  vec3 rt = normalize(cross(fw, vec3(0.0, 1.0, 0.0)));
+  vec3 up = cross(rt, fw);
+  vec3 rd = normalize(fw * 2.0 + rt * uv.x + up * (uv.y - 0.1));
+
+  // text plane through the origin, facing the camera
+  vec3 pn = -fw;
+
+  vec3 pos = ro;
+  vec3 vel = rd;
+  vec3 col = vec3(0.0);
+  float trans = 1.0;
+  float h2 = dot(cross(pos, vel), cross(pos, vel));
+  bool captured = false;
+  for (int i = 0; i < 220; i++) {
+    float r = length(pos);
+    float dt = clamp(0.08 * r, 0.03, 1.6);
+    vec3 acc = -1.5 * h2 * pos / pow(max(r, 1e-3), 5.0);
+    vec3 prev = pos;
+    vel += acc * dt;
+    pos += vel * dt;
+    float nr = length(pos);
+    if (nr < RS) { captured = true; break; }
+    // disk crossing
+    if (prev.y * pos.y < 0.0) {
+      vec3 hit = mix(prev, pos, prev.y / (prev.y - pos.y));
+      vec4 d = diskSample(hit, normalize(vel));
+      col += trans * d.rgb * d.a;
+      trans *= 1.0 - d.a;
+    }
+    // text plane crossing
+    float s0 = dot(prev, pn), s1 = dot(pos, pn);
+    if (s0 * s1 < 0.0) {
+      vec3 hit = mix(prev, pos, s0 / (s0 - s1));
+      vec2 tp = vec2(dot(hit, rt), dot(hit, up));
+      vec2 tuv = vec2(tp.x / 17.0 + 0.5, tp.y / (17.0 / uTextAspect) + 0.5);
+      if (tuv.x > 0.0 && tuv.x < 1.0 && tuv.y > 0.0 && tuv.y < 1.0) {
+        float a = textureLod(uText, tuv, 0.6).a;
+        col += trans * uTextCol * a * 0.9;
+        trans *= 1.0 - a * 0.92;
+      }
+    }
+    if (trans < 0.01) break;
+    if (nr > dist * 1.6 && dot(pos, vel) > 0.0) break;
+  }
+  if (!captured) col += trans * starfield(normalize(vel));
+  // faint photon ring glow
+  float b = length(cross(ro, rd));
+  col += uHot * 0.06 * exp(-abs(b - 2.6) * 6.0) * uDiskB;
+
+  col *= uExposure;
+  col = aces(col);
+  col = toSRGB(col);
+  col *= mix(0.75, 1.0, vignette(vUv, 0.25));
+  col += grain(fc, t) * 0.015;
+  fragColor = vec4(col, 1.0);
+}
+`,black_hole_default={id:"black-hole",name:"Event Horizon",description:"The zero is a black hole. Light from its accretion disk and from the numerals around it bends in real time.",category:"Space",kind:"3d",motion:"live",tags:["webgl","space","black-hole","lensing","physics","cinematic","dark"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Singularity",title:"You crossed the event horizon.",message:"Nothing escapes a 404, not even this page. Light still finds its way home, and so can you.",actions:[{label:"Escape to home",href:"/",variant:"primary"},{label:"Report a lost page",href:"/contact",variant:"secondary"}]},params:{hot:"#fff3d6",warm:"#ffae4d",cool:"#c2402a",textColor:"#f4efe6",diskBrightness:1,diskTilt:.09,spin:1,doppler:1,stars:1,nebula:"#2a3a6b",exposure:1},theme:{bg:"#000000",accent:"#fff3df","accent-fg":"#140b02"},presetName:"Gargantua",presets:{emerald:{name:"Emerald Disk",params:{hot:"#e9fff3",warm:"#3bff9a",cool:"#0a6b4a",nebula:"#0a2a2a",textColor:"#e9fff3"},theme:{accent:"#9dffcf","accent-fg":"#02140b"}},violet:{name:"Violet",params:{hot:"#fbeaff",warm:"#b45cff",cool:"#3a0f7a",nebula:"#1a0b3a"},theme:{accent:"#e2c2ff","accent-fg":"#12052a"}},faint:{name:"Quiet Giant",eyebrow:"Dormant",title:"Even quiet black holes eat pages.",params:{diskBrightness:.45,hot:"#fff1d6",warm:"#d98a4a",cool:"#5a2a1a",stars:1.3,exposure:1.2}},ice:{name:"Ice Halo",params:{hot:"#ffffff",warm:"#9fd8ff",cool:"#2a4a8a",nebula:"#0a1a3a",doppler:1.4,textColor:"#dff2ff"},theme:{accent:"#dff2ff","accent-fg":"#04102a"}},quasar:{name:"Quasar",eyebrow:"Active nucleus",title:"Brightest thing in the universe. Still no page.",params:{hot:"#f2f7ff",warm:"#7fb2ff",cool:"#3b3fc4",nebula:"#40216b",diskBrightness:1.3},theme:{accent:"#e6f0ff","accent-fg":"#050b1f"}},crimson:{name:"Crimson",params:{hot:"#ffd8c2",warm:"#ff4f3a",cool:"#5a0b1a",nebula:"#3a0f1e",exposure:1.1},theme:{accent:"#ffcabb","accent-fg":"#1f0505"}},eclipse:{name:"Eclipse",eyebrow:"Total eclipse",title:"Lights out on this page.",params:{hot:"#ffffff",warm:"#d9d9d9",cool:"#4d4d4d",nebula:"#111111",textColor:"#ffffff",doppler:.6,stars:.6},theme:{accent:"#ffffff","accent-fg":"#000"}},edgeon:{name:"Edge-on",params:{diskTilt:.025,hot:"#fff6e0",warm:"#ffc06b",cool:"#b8562c"}},synth:{name:"Synthwave",params:{hot:"#ffe6ff",warm:"#ff4fd8",cool:"#3c1dff",nebula:"#1d0b3a",textColor:"#9ff3ff"},theme:{accent:"#ff4fd8","accent-fg":"#12001a"}}},css:`& .lp-title{font-weight:500}
+& .lp-body{padding-bottom:clamp(8px,2cqh,24px)}`,setup(ctx){let p=ctx.params,code=ctx.copy.code||"404",W=1700,H=560,cv=document.createElement("canvas");cv.width=W,cv.height=H;let g=cv.getContext("2d");g.fillStyle="#fff",g.textAlign="center",g.textBaseline="middle";let chars=[...code],hole=chars.length===3&&/[0oO]/.test(chars[1]);g.font=`600 ${H*.86}px ${SANS}`,hole?(g.fillText(chars[0],W*.19,H*.53),g.fillText(chars[2],W*.81,H*.53)):(g.font=`600 ${H*.5}px ${SANS}`,g.fillText(code,W/2,H*.12+H*.2));let tex;return shaderScene(ctx,{frag:FRAG,init(gl){tex=texture(gl,cv,{filter:"mipmap"})},uniforms:()=>({uText:tex,uTextAspect:W/H,uHot:linear(p.hot),uWarm:linear(p.warm),uCool:linear(p.cool),uTextCol:linear(p.textColor),uNebula:linear(p.nebula),uDiskB:p.diskBrightness,uTilt:p.diskTilt,uSpin:p.spin,uDoppler:p.doppler,uStars:p.stars,uExposure:p.exposure})})}};export{black_hole_default as default};

package/dist/scenes/block-drop.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    bg: string;
+    well: string;
+    colors: string[];
+    /** Blocks dropped per second. */
+    rate: number;
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;

package/dist/scenes/block-drop.js

@@ -0,0 +1 @@
+import{PIXEL_FONT,codeBitmap}from"../chunks/chunk-MNUNTC4L.js";import{canvas2d}from"../chunks/chunk-DAZOIOF7.js";import{rgba}from"../chunks/chunk-FVGCB66F.js";import"../chunks/chunk-3ISI6SOJ.js";import"../chunks/chunk-KIYSQVWX.js";import"../chunks/chunk-7XMDQMDO.js";var SHAPES=[[[0,0],[1,0],[2,0],[3,0]],[[0,0],[1,0],[0,1],[1,1]],[[0,0],[1,0],[2,0],[1,1]],[[0,0],[0,1],[1,1],[2,1]],[[2,0],[0,1],[1,1],[2,1]],[[1,0],[2,0],[0,1],[1,1]],[[0,0],[1,0],[1,1],[2,1]]],block_drop_default={id:"block-drop",name:"Block Drop",description:"Falling blocks stack themselves into the shape of the error, row by row, then clear with a flash and start again.",category:"Games",kind:"2d",motion:"live",tags:["canvas","blocks","puzzle","retro","satisfying","arcade","colorful"],layout:"bottom",codeInScene:!0,copy:{eyebrow:"Line clear",title:"Every piece fit, except this page.",message:"We stacked it perfectly and it still cleared itself away. Try the homepage.",actions:[{label:"New game at home",href:"/",variant:"primary"}]},params:{bg:"#0b0b1a",well:"#14142a",colors:["#3bd6ff","#ffd23f","#b45cff","#3dff8a","#ff4d4d","#ff9f1c","#4f7dff"],rate:26},theme:{bg:"#0b0b1a",fg:"#eef0ff",accent:"#3bd6ff","accent-fg":"#0b0b1a","font-display":"var(--lp-font-mono)","title-weight":"700"},presetName:"Arcade",presets:{pocket:{name:"Pocket",params:{bg:"#9bbc0f",well:"#8bac0f",colors:["#0f380f","#306230"]},theme:{bg:"#9bbc0f",fg:"#0f380f",accent:"#0f380f","accent-fg":"#9bbc0f"}},pastel:{name:"Pastel",params:{bg:"#fff8f2",well:"#f4ebe2",colors:["#ffb3c7","#a8d8ff","#ffe08a","#b8f0c8","#d6c2ff"]},theme:{bg:"#fff8f2",fg:"#2a1a33",accent:"#2a1a33","accent-fg":"#fff"}},mono:{name:"Monochrome",params:{bg:"#000000",well:"#0d0d0d",colors:["#ffffff","#bbbbbb","#888888"]},theme:{bg:"#000",accent:"#fff","accent-fg":"#000"}}},setup(ctx){let p=ctx.params,c=canvas2d(ctx),rnd=ctx.random,cols=0,rows=0,cell=0,ox=0,oy=0,target=[],order=[],placed=[],falling=[],k=0,clearT=-1,build=()=>{cols=34,rows=14,cell=Math.floor(Math.min(c.w*.8/cols,c.h*.6/rows)),ox=Math.floor((c.w-cols*cell)/2),oy=Math.floor(c.h*.05),target=codeBitmap(ctx.copy.code||"404",cols,rows,900),order=[];for(let y=rows-1;y>=0;y--)for(let x=0;x<cols;x++)target[y*cols+x]&&order.push(y*cols+x);reset()},reset=()=>{if(placed=new Array(cols*rows).fill(null),falling=[],k=0,clearT=-1,ctx.reducedMotion)for(let i of order)placed[i]=p.colors[i%p.colors.length]};build();let acc=0;return{resize(){c.reset(),build()},frame(t,dt){let g=c.g;if(c.reset(),dt>0){for(acc+=dt*p.rate;acc>1&&k<order.length;){acc-=1;let shape=Math.floor(rnd()*SHAPES.length);falling.push({i:order[k++],y:-2-rnd()*3,col:p.colors[shape%p.colors.length],shape})}for(let f of falling){let ty=Math.floor(f.i/cols);f.y+=dt*22,f.y>=ty&&(placed[f.i]=f.col,f.y=1/0)}falling=falling.filter(f=>f.y!==1/0),k>=order.length&&!falling.length&&(clearT<0&&(clearT=t),t-clearT>2.4&&reset())}g.fillStyle=p.bg,g.fillRect(0,0,c.w,c.h),g.fillStyle=p.well,g.fillRect(ox-6,oy-6,cols*cell+12,rows*cell+12);let block=(x,y,col,a=1)=>{g.fillStyle=rgba(col,a),g.fillRect(ox+x*cell+1,oy+y*cell+1,cell-2,cell-2),g.fillStyle=rgba("#ffffff",.25*a),g.fillRect(ox+x*cell+1,oy+y*cell+1,cell-2,Math.max(2,cell*.15)),g.fillStyle=rgba("#000000",.2*a),g.fillRect(ox+x*cell+1,oy+y*cell+cell-1-Math.max(2,cell*.15),cell-2,Math.max(2,cell*.15))};for(let i of order)placed[i]||block(i%cols,Math.floor(i/cols),"#ffffff",.04);let flash=clearT>0&&t-clearT>1.2?.5+.5*Math.sin((t-clearT)*30):1;placed.forEach((col,i)=>col&&block(i%cols,Math.floor(i/cols),clearT>0&&t-clearT>1.2?"#ffffff":col,flash));for(let f of falling){let x=f.i%cols;for(let[dx,dy]of SHAPES[f.shape].slice(0,1))block(x+dx,f.y+dy,f.col)}g.font=`700 ${Math.max(10,cell*.5)}px ${PIXEL_FONT}`,g.fillStyle=rgba("#ffffff",.6),g.textAlign="left",g.fillText(`LINES ${Math.floor(k/Math.max(1,order.length)*rows)}`,ox,oy+rows*cell+22)}}}};export{block_drop_default as default};

package/dist/scenes/blue-screen.d.ts

@@ -0,0 +1,5 @@
+interface Params {
+    style: "modern" | "classic" | "kernel" | "restart" | "guru" | "bios";
+}
+declare const _default: import("..").SceneDef<Params>;
+export default _default;