on the grid · edge SVG · async AI

Placeholder images that rez in.

In TRON, things rez in — they resolve into existence on the Grid. A placeholder is just content that hasn't rezzed yet. rez hands you a stable URL now and renders the real asset into it — and rez doubles as resolution, which is all a placeholder really is: a box at W×H.

Open the playground →Read the API

GET /400x300 GET /gradient/600x400?from=46d6f7&to=ffb35c

Every mode, live

These images are loaded from the running service in real time. Same URL → byte-identical SVG, every time.

Boring

Dimension-labelled grey placeholder. ?text= ?bg= ?fg=

/400x300

Boring + text

Override the centred label.

/600x240?text=hero+banner

Color

Solid fill from a hex code. /color/{hex}/{w}x{h}

/color/46d6f7/400x300

Gradient

Linear or radial. ?from= ?to= ?angle= ?type=radial

/gradient/600x400?from=46d6f7&to=ffb35c&angle=120

Seed

Deterministic, stable variation from any seed string.

/seed/precious-tide/400x300

Glyph · avatar

/glyph/300x300?as=avatar

Glyph · video

Same route, different wireframe.

/glyph/600x338?as=video

Glyph · map

Great for empty states & mockups.

/glyph/400x300?as=map

Async AI, no refresh

POST a prompt and you get a stable URL back instantly. The <ai-img> web component polls the job in the background and swaps in the final image when it's ready — no manual reload, and the raw URL works on its own too.

Drop-in web component

Framework-agnostic custom element. Renders a placeholder, then fills in.

<script type="module">
  import { registerAiImg } from '/components/ai-img.js'
  registerAiImg()
</script>

<ai-img
  prompt="a red fox in snow, cinematic"
  w="512" h="512"
  api-key="YOUR_KEY">
</ai-img>

Or just a URL

POST returns a stable URL; the same URL serves a placeholder, then the final PNG.

POST /ai            (API key required)
  { "prompt": "...", "w": 512, "h": 512 }
→ { "id": "…",
    "url": "/ai/512x512/{id}.png",
    "status_url": "/ai/{id}/status" }

GET /ai/512x512/{id}.png   # placeholder → final
GET /ai/{id}/status        # pending → ready

Why it's cheap

Two cleanly separated cost profiles.

Synth-at-edge

boring · color · gradient · seed · glyph. Pure functions of the URL, rendered as SVG in the Worker with zero deps. Cached immutable forever. Free and instant.

Async AI

A job pipeline behind an API key. Submitting a prompt returns a stable URL immediately; the image fills in later via a provider webhook. The only stateful, costly path.