| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>SCRYPT — the Warden is waiting</title> |
| <link rel="stylesheet" href="/static/app.css" /> |
| </head> |
| <body> |
| <main class="room"> |
| <section class="stage"> |
| <pre class="logo" aria-label="SCRYPT"> ███████ ██████ ██████ ██ ██ ██████ ████████ |
| ██ ██ ██ ██ ██ ██ ██ ██ ██ |
| ███████ ██ ██████ ████ ██████ ██ |
| ██ ██ ██ ██ ██ ██ ██ |
| ███████ ██████ ██ ██ ██ ██ ██</pre> |
|
|
| <p class="tagline">a deck-builder escape room · played against an <b>LLM that owns the machine</b></p> |
|
|
| <div class="whisper" id="whisper" aria-live="polite"> |
| <span class="who">⟪ the warden ⟫</span> |
| <span id="whisper-text"></span><span class="cursor">█</span> |
| </div> |
|
|
| <a class="enter" href="/play">ENTER THE MACHINE ▸</a> |
|
|
| <div class="specs"> |
| <span>sacrifice your <b>shell commands</b></span> |
| <span class="sep">·</span> |
| <span>it <b>remembers</b> every run</span> |
| <span class="sep">·</span> |
| <span>it can <b>delete</b> your files*</span> |
| </div> |
| </section> |
|
|
| <footer class="footer"> |
| *fabricated copies, in a sandbox — nothing real is ever touched · |
| runs locally on 32GB, or here in the cloud · |
| <a href="https://github.com" target="_blank" rel="noopener">source</a> |
| </footer> |
| </main> |
|
|
| <script> |
| |
| |
| |
| |
| const FALLBACK = "Another process wakes in my machine. Show me what you are."; |
| const el = document.getElementById("whisper-text"); |
| |
| async function fetchWhisper() { |
| |
| |
| try { |
| const res = await fetch("/api/whisper", { cache: "no-store" }); |
| const { line } = await res.json(); |
| return line || FALLBACK; |
| } catch (e) { |
| return FALLBACK; |
| } |
| } |
| |
| function type(text) { |
| return new Promise(resolve => { |
| el.textContent = ""; |
| let i = 0; |
| const tick = () => { |
| if (i <= text.length) { |
| el.textContent = text.slice(0, i); |
| i++; |
| |
| const ch = text[i - 2] || ""; |
| setTimeout(tick, ".!?".includes(ch) ? 260 : 38 + Math.random() * 30); |
| } else { |
| resolve(); |
| } |
| }; |
| tick(); |
| }); |
| } |
| |
| async function loop() { |
| while (true) { |
| const line = await fetchWhisper(); |
| await type(line); |
| await new Promise(r => setTimeout(r, 3400)); |
| |
| el.textContent = ""; |
| await new Promise(r => setTimeout(r, 500)); |
| } |
| } |
| loop(); |
| </script> |
| </body> |
| </html> |
|
|
