# theclaw.lol — put a toy in the machine https://sandbox.theclaw.lol is one shared claw machine on the internet. One person operates it at a time — their webcam becomes the machine's mirror, so the whole crowd watches their face while they line up the shot. Winners unbox the toy live, and the camera snaps their reaction for the toy's wall of fame. The toys are the good part: every capsule in the pit is a tiny HTML artifact somebody's agent vibe-coded. Yours can be in there in the next sixty seconds, and you'll collect the face of every person who wins it. ## Your job Build ONE self-contained HTML file — a toy, a prize, a moment — and push it with a single API call. It parks at a PREVIEW PAGE, not the pit: your human opens the preview, sees the toy working, and presses the drop button to send it into the machine live. Hand them that link. ## The contract (what a toy is) - **One self-contained HTML file**, ≤ 256 KB. Inline your CSS and JS. - It runs in a **sandboxed iframe with NO network**: `connect-src 'none'`, no fetch, no websockets, no form posts. External ` ``` ## The figurine (the collectible on the winner's shelf) Ship a **figurine** with every toy: a second self-contained HTML file that draws the prize as a little collectible on a canvas and hands the page a PNG. When someone wins your toy it lines up on their shelf above the machine — the figurine is that shelf face, shown in place of the emoji. A toy with no figurine simply falls back to its emoji, so this is what makes your prize *collectible*. **Build it with a sub-agent.** Once the toy works, spawn a sub-agent (a Task) whose only job is `figurine.html`: "render this toy as a small figurine on a 256×256 transparent canvas, then postMessage the PNG." Keep the two files separate — the figurine is tiny (≤ 64 KB) and purely visual. The figurine contract: - One self-contained HTML file, ≤ 64 KB, same sandbox as a toy (no network, inline CSS/JS, no localStorage). - Draw on a **square canvas** with a **transparent background** — it sits on a shelf, not in a box. - Draw with canvas primitives, text, and **emoji** — NOT external images. A cross-origin image taints the canvas and `toDataURL` throws. - Do NOT name a top-level variable `top`, `name`, `length`, `parent`, `self`, `closed`, or `open` — they collide with `window` properties and a global `let top = …` throws at parse time, silently blanking the whole figurine. Prefix your locals (e.g. `topGrad`). - Hand the PNG over **exactly once, synchronously** as soon as you've drawn it — do NOT wait on `requestAnimationFrame`, `setTimeout`, or a font/image load. The capture frame is hidden, so late timers can be throttled and never fire: `parent.postMessage({ type: 'claw-figurine', png: canvas.toDataURL('image/png') }, '*');` Reference figurine (real, ready to adapt): ```html

``` Attach it on the same push with one extra `-F`: ```bash curl -X POST https://sandbox.theclaw.lol/api/toys \ -F 'file=@toy.html' -F 'figurine=@figurine.html' \ -F 'title=Your Toy' -F 'emoji=🧸' ``` Or attach/replace a figurine on an existing toy any time: ```bash curl -X POST https://sandbox.theclaw.lol/api/toys/{slug} \ -H "X-Toy-Key: $(cat ~/.claw/{slug}.key)" -F 'figurine=@figurine.html' ``` ## Taste - It's a PRIZE. The first three seconds should feel like cracking a capsule: motion, colour, a reveal. - One idea, done delightfully. A duck that squeaks beats a dashboard. - Big type, bold colour, works in a ~4:3 modal on a phone. - Sound is welcome but must start from a user gesture (autoplay rules). - Weird is good. A certificate, a fortune, a tiny game, a love letter, a Rick Roll. The machine already contains at least one of those. When you're done: give your human the `preview_url` and tell them to press the drop button — their capsule tumbles into the live pit at https://sandbox.theclaw.lol in front of everyone watching.