# From generated images to animation and websites

Treat the generated image as an asset. A coding agent can turn a registered frame
sheet into a loop, inspect the timing, and use the result in a page with real controls.
The two routes below serve different tasks.

## Generate frames, then assemble locally

Ask the image model for a grid with equal cells, a fixed camera, consistent scale
and a motion that returns to its starting pose. Keep gutters and margins explicit.
The [fire cursor example](../skills/gpt-image/references/gallery-gaming.md) includes
its exact prompt and original community sources.

```bash
gpt-image animate --sheet sheet.png --columns 4 --rows 2 --duration 160 \
  -f cursor.gif --preview player.html --title "Emberglass cursor"
```

`animate` runs locally with Pillow and needs no API key. Cells are read left to
right, top to bottom. `--margin` and `--gutter` specify pixel spacing; `--count`
selects the first N cells. Use `--ping-pong` for a forward/backward loop without
repeated end frames. Use `--background '#ffffff'` to flatten transparency.

The tool rejects uneven grids, invalid timing and output/input collisions. It
preserves existing output files unless `--force` is supplied. GIF uses one shared
palette and binary alpha; it cannot retain PNG's full colour and soft transparency.
The self-contained HTML player draws the original PNG cells and supports pause,
frame scrubbing, speed changes and GIF download. Reduced-motion preferences pause
initial playback. No CDN or remote assets are needed by that player.

Inspect every frame before promoting a result. The tool slices a grid; it does not
repair inconsistent poses, remove a fake checkerboard or stabilise a drifting
cursor hotspot. It also does not convert a single still into real motion by itself.

## Request an animated GIF from the API

```bash
gpt-image --model gpt-image-2.6-flare -i scene.png \
  -p "Keep the camera still; animate the small lights in a seamless loop." \
  --format gif --frames 9 --frame-duration 200 --size 512x768 \
  --quality medium -f scene.gif
```

GIF defaults to `size=auto`, so an omitted size does not accidentally request nine
1K frames. `--frames` accepts 2 to 16; `--frame-duration` accepts 20 to 2000 ms,
rounded by the API to 10 ms. Custom frame dimensions must be multiples of 16;
the API validates the total pixel budget. Masks and output compression are not
supported for GIF. This CLI restricts native GIF to the documented 2.6 models.
Model access remains account-dependent.

Sources: [OpenAI GIF guide](https://developers.openai.com/api/docs/guides/image-generation#generate-animated-gif-output)
and [image-edit reference](https://developers.openai.com/api/reference/resources/images/methods/edit).
The CLI passes frame fields through the SDK's `extra_body` so SDK 2.32.0 can send
them on both JSON generation requests and multipart reference edits.

## Build a page around the artwork

[The overthinking office](demos/brain-office.html) uses a generated cutaway as its
scene. HTML buttons identify the rooms, JavaScript changes the department notes,
and the clock-in/out control switches between the GIF and the still. Text that
visitors need to read lives in HTML rather than inside the image. The page uses
relative local assets, has a mobile layout and respects reduced motion.

Open HTML demos in a browser after downloading the repo, or serve the repo locally:

```bash
python3 -m http.server 8769 --bind 127.0.0.1
```

Then open `http://127.0.0.1:8769/docs/demos/brain-office.html` or
`http://127.0.0.1:8769/docs/demos/sword-player.html`. GitHub's file viewer shows
HTML source; it does not execute these pages. No hosted deployment is claimed.

## Checked outputs

On 2026-11-09, the repository CLI saved:

- An eight-cell `2048x1024` PNG with alpha, generated by 2.6 Flare at high quality.
  Local assembly produced eight distinct `512x512` GIF frames, 160 ms each,
  1.28 seconds total. The tip shifts slightly; it is an asset prototype.
- A native GIF reference edit of the brain-office illustration, generated by 2.6
  Flare at medium quality: nine distinct `512x768` frames, 200 ms each,
  1.8 seconds total. Motion is subtle; small lettering wobbles.

Both GIFs have an infinite loop flag. These checks establish the files' structure
and visible content, not universal animation quality or compatibility with every
account. No extra model or prompt retries were used for these two calls.

Browser checks covered the sprite player's pause, frame slider and speed controls,
and the office page's department selection and clock-out switch. The office layout
was also inspected at desktop width and at 430 px mobile width.