Productcommunityclaude-opus-5-5

Falling-Sand Sandbox in One HTML File

A pixel sandbox you paint with the mouse: sand piles and slides, water levels out, fire burns wood and plants into smoke, plants grow into water, and lava sets things alight, boils water into steam and cools into stone. One self-contained index.html with no libraries or build step, on a 240×160 grid drawn through canvas ImageData.

By PossibleMade with Claude
Remix
The built-in demo scene running in Chrome, with a few strokes of water painted onto the lava. Screen recording by Possible.
Recorded from session

How it was made

Captured locally, then reviewed and possibly edited by the creator. This is a shared recipe, not an unedited transcript. Copy this text kit to your agent to adapt it.

  • Recorded from a local session; privacy redactions and creator edits may change the wording.
  • Tool outputs and file contents were omitted. Unknown ingredients are not inferred.
  • Claude Code runtime version and API hosting provider were not inferred from model names.
  • Historical skill repository revisions are unknown unless explicitly recorded; current checkouts were not inspected.
  • 1 reference ingredients were detected; only shareable URLs retained below are included.

Models

  • claude-opus-5-5 · anthropic · execution · Claude Code

Agent

Claude Code

Tools and APIs

  • Write

    Create index.html in one pass from the first prompt.

  • Edit

    Apply each follow-up change to index.html.

  • Grep

    Find the relevant code in index.html before editing.

  • Read

    Re-read index.html before editing it.

Ordered steps

  1. Build the sandbox in one HTML file

    Ask for the whole game in one self-contained file: elements, behaviours, controls, grid size and rendering approach.

    Build a falling-sand sandbox game as a single self-contained index.html: no libraries, no build step, it should just open in a browser. Elements: sand, water, stone, wood, plant, fire, smoke, and an eraser. Sand piles up and slides off slopes, water flows sideways and levels out, fire burns wood and plants and gives off smoke that rises and fades, and plants slowly grow into adjacent water. Paint with mouse or touch, with an element palette along the bottom and a brush-size slider. Simulate on a fixed grid of about 240x160 cells, render it to a canvas through ImageData, and scale it up with crisp pixels. Keep it smooth at 60fps. Give every element a little per-cell colour variation so it looks textured. Add Pause, Clear, and a Seed button that drops a small demo scene.

  2. Add lava and steam, and remove the drift

    Add a new element with interactions, and fix the left-right bias in the simulation scan.

    Works nicely. Two changes: add lava, which flows slowly, sets wood and plants on fire, turns water it touches into steam (a new gas that rises and condenses back into water near the top) and cools into stone where it meets water. And alternate the horizontal scan direction every frame so sand piles and water don't drift to one side.

  3. Make the demo scene screenshot-ready

    Describe the scene that loads on first open, so the result looks good the moment it opens.

    Now make the Seed scene look good as a screenshot: a stone basin of water with plants growing in it, a wooden tree on a stone ledge, a stream of sand pouring from the top, and lava dripping from one corner onto the ledge so the tree slowly catches fire. Load that scene automatically on first open.

About

A pixel sandbox you paint with the mouse: sand piles and slides, water levels out, fire burns wood and plants into smoke, plants grow into water, and lava sets things alight, boils water into steam and cools into stone. One self-contained index.html with no libraries or build step, on a 240×160 grid drawn through canvas ImageData.

How it was made

An AI agent made this. Claude Code, running Claude Opus 5.5, built it in one recorded session from the three prompts in this recipe: the first prompt for the game, then two follow-ups. Nobody edited the code by hand. Possible wrote the prompts and recorded the session with possible capture. The recipe shows the exact prompts and the tools the agent used; tool outputs and file contents are left out.

Try it

Open the generated index.html in a browser, or copy the recipe into your own agent and compare. Results vary between runs and models.

What to know

The agent did not run or test the game during the session (it had file tools only). Possible opened it in Chrome afterwards to record the preview, with no console errors. Touch input was not tested.

Exact prompt

Hidden characters, if present, appear as Unicode escapes
Build a falling-sand sandbox game as a single self-contained index.html: no libraries, no build step, it should just open in a browser. Elements: sand, water, stone, wood, plant, fire, smoke, and an eraser. Sand piles up and slides off slopes, water flows sideways and levels out, fire burns wood and plants and gives off smoke that rises and fades, and plants slowly grow into adjacent water. Paint with mouse or touch, with an element palette along the bottom and a brush-size slider. Simulate on a fixed grid of about 240x160 cells, render it to a canvas through ImageData, and scale it up with crisp pixels. Keep it smooth at 60fps. Give every element a little per-cell colour variation so it looks textured. Add Pause, Clear, and a Seed button that drops a small demo scene.

Works nicely. Two changes: add lava, which flows slowly, sets wood and plants on fire, turns water it touches into steam (a new gas that rises and condenses back into water near the top) and cools into stone where it meets water. And alternate the horizontal scan direction every frame so sand piles and water don't drift to one side.

Now make the Seed scene look good as a screenshot: a stone basin of water with plants growing in it, a wooden tree on a stone ledge, a stream of sand pouring from the top, and lava dripping from one corner onto the ledge so the tree slowly catches fire. Load that scene automatically on first open.

What you need

  • Claude Code, or another coding agent that can write files
  • A web browser to open index.html
FILES

Download the result

Technical details and provenance
Provider
anthropic
Model
claude-opus-5-5
Agent
Claude Code
Published
Publication
community