mosAIc

Moon over still water Cutting the stones in your browser.

The stones follow the picture.

mosAIc is an open engine for mosaic art. It cuts thousands of individual stones along the contours of a drawing, sets them in mortar, and lights each one. The same engine runs in a browser studio, on the command line, and in a skill for coding agents.

Open the studio Set up the agent skill

How a drawing becomes a wall

There is no grid underneath. The courses come from the drawing's own edges, the way a mosaicist sets them by hand.

One frame of the heron mosaic in four vertical bands: a flat painting, then the heron drawn as lines that follow its outline, then flat cut stones on dark mortar, then the finished, lit stones around the gold moon.

  1. I Draw

    A scene is a few flat regions in code. Each region names its material, its stone size, and how its courses run.

  2. II Flow

    A field follows every edge, and courses are laid through it at an even spacing. Mosaicists call this flow andamento.

  3. III Cut

    Each course is cut into stones a little smaller than their cells, so mortar shows between them.

  4. IV Light

    Each stone gets thickness, a bevel, and a slight tilt of its own, so one light catches them one at a time.

One frame of Moon over still water, in four bands. The flow and cut bands are drawn from the same tessellation the renderer uses.

Eight materials

Each region of a drawing picks its own. Gold appears only where a scene asks for it.

Made with mosAIc

A short film from the examples, and two pieces made by agents with the skill.

From moon to morning

A ten-second film in two scenes. The night's stones lift off the wall and resettle as a coastal dawn. Scrub it in the studio.

Made by agents

Two pieces from the first skill trials. Each agent got a copy of the skill, wrote its scene as code, rendered it from the command line, and inspected the result.

A copper leaf with a gold midrib on deep teal glass.
Copper leaf, by Codex. 5,250 stones.
A gold crescent moon above three green waves on blue glass.
Gold crescent over jade waves, by Claude Code. 7,340 stones.

Use it

The browser, the command line, and the agent skill share one renderer, so a picture looks the same wherever it is made.

In the browser

Move over the stones, change the light, or bring an image of your own and choose glass, stone, or gold. Your images stay in your browser.

Open the studio

With your coding agent

Build the skill and copy it into Claude Code, then install the capture browser once. Ask for a mosaic, and the agent writes the scene as code, renders it, and checks the picture before showing you.

git clone https://github.com/Audiofool934/mosaic
cd mosaic && npm run build
mkdir -p ~/.claude/skills
cp -R dist/mosaic ~/.claude/skills/
cd ~/.claude/skills/mosaic/assets/runtime
npm ci && npx playwright-core install chromium

For Codex, copy it into ~/.codex/skills/ instead.

On the command line

Start a scene, preview it, and export a still or a silent H.264 film. Every export is a fresh render with a receipt of its inputs.

git clone https://github.com/Audiofool934/mosaic
cd mosaic && npm ci
npx playwright-core install chromium
node tools/cli.mjs init art
node tools/cli.mjs preview art/project.json
node tools/cli.mjs still art/project.json
node tools/cli.mjs render art/project.json

Exports land in output/. Films also need FFmpeg on your PATH.