Scenes / messy to structured / receipt-printer

DOM + SVG · messy to structured · ai

Messy in, structured out

Documents feed a slot and a receipt prints every extracted field with its confidence.

Drawn in Soft UI · follows any look See the matched set →

Four different documents feed into a printer one by one; it prints a receipt line by line with every extracted invoice field, its value and a confidence score, ending in a schema check and a barcode, then the receipt tears off.

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "receipt-printer" scene for our site, in our brand.
Read our design tokens from this project (or run `site-motion theme <our url>`), write the content JSON with our real product nouns and numbers, then render mp4, webm and a poster. Check the loop seam before you finish.

From the command line

Draft your tokens, then copy the scene into your project. The first scene you add sets your site's look; every scene after it follows.

node bin/site-motion.mjs theme https://yoursite.com --out brand.json
node bin/site-motion.mjs add receipt-printer --tokens brand.json

Your brand, as tokens

The theme playing above, as a token file the CLI and the skill accept.

content.json, the words in this scene

{
  "title": "Messy in, structured out",
  "label": "Four different documents feed into a printer one by one; it prints a receipt line by line with every extracted invoice field, its value and a confidence score, ending in a schema check and a barcode, then the receipt tears off.",
  "eyebrow": "Extraction",
  "heading": "Any file in.\nA record you can\ntrust out.",
  "sub": "Every field comes with its confidence, checked against your schema.",
  "printerLabel": "extract · v3",
  "inputs": [
    {
      "kind": "PDF",
      "name": "Invoice scan",
      "meta": "2 pages · skewed"
    },
    {
      "kind": "EML",
      "name": "Email thread",
      "meta": "Re: Re: Fwd: inv"
    },
    {
      "kind": "JPG",
      "name": "Phone photo",
      "meta": "blurry corner"
    },
    {
      "kind": "M4A",
      "name": "Voice note",
      "meta": "0:42 · noisy"
    }
  ],
  "receipt": {
    "title": "INVOICE · INV-2291",
    "date": "04 NOV 2026",
    "fields": [
      {
        "k": "Vendor",
        "v": "Northwind Ltd",
        "c": 0.99
      },
      {
        "k": "Issued",
        "v": "04 Nov 2026",
        "c": 0.97
      },
      {
        "k": "Due",
        "v": "04 Dec 2026",
        "c": 0.93
      },
      {
        "k": "Currency",
        "v": "GBP",
        "c": 1
      },
      {
        "k": "Subtotal",
        "v": "1,240.00",
        "c": 0.98
      },
      {
        "k": "VAT 20%",
        "v": "248.00",
        "c": 0.98
      },
      {
        "k": "Total",
        "v": "1,488.00",
        "c": 0.99,
        "total": true
      }
    ],
    "footer": [
      "SCHEMA  invoice.v3   ✓ valid",
      "ROUTED  → AP approvals"
    ],
    "serial": "0042 9118 2291"
  }
}

Files

default theme

Rendered frame-exact. For your brand, run the command on the left.

MP4 · 1600×900 Poster PNG Preview WebM

embed snippet

<iframe src="/receipt-printer.html" title="Messy in, structured out" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>

More ways to show this

the same story, one per job on the page

Tear off your first record

A small printer prints one short slip and its coloured stub, the call to action, tears off along the perforation and becomes the button.

cta

Related scenes

all scenes

An agent run, traced

One agent run as a vertical trace: thinking, tool calls and results on a shared time axis, resolving into the answer.

AI & agentsPro

Order where you see noise

A lens drifts over a dithered field of maybes; inside it, every blob is classified, outlined and labelled.

AI & agents

One message, turned into done work

A chat message's key phrases lift off and snap into a structured card, then the actions run and a reply comes back.

AI & agentsPro