Scenes / messy to structured / receipt-printer / receipt-printer--cta
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.
The cta take on Messy in, structured out: same story, built for a different job on the page.
Drawn in Soft UI · follows any look See the matched set →
With Claude Code
With the skill installed, paste this in your project.
Use the site-motion skill to make the "receipt-printer--cta" 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--cta --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": "Tear off your first record",
"label": "A call to action built from a small receipt printer. Under the heading the printer's light blinks and it prints one short slip: a header, four lines of the offer (Starter plan, 500 documents a month, no card needed, total 0.00) and a line saying you can cancel any time. The last part to come out is a coloured stub that reads Start extracting free. The printer's cutter runs along the perforation, the stub tears off, drops and settles at a slight tilt as the button, and its arrow nudges once. Then the slip clears and the printer waits again.",
"eyebrow": "Extraction",
"heading": "Send us your messiest file.\nKeep the record.",
"sub": "Start free with 500 documents a month. Every field is checked against your schema.",
"printerLabel": "extract · v3",
"receipt": {
"title": "YOUR FIRST SLIP",
"date": "TODAY",
"fields": [
{
"k": "Plan",
"v": "Starter"
},
{
"k": "Documents",
"v": "500 / month"
},
{
"k": "Card",
"v": "not needed"
},
{
"k": "Total",
"v": "0.00",
"total": true
}
],
"footer": [
"CANCEL ANY TIME"
]
},
"button": "Start extracting free",
"fine": "Set up in about five minutes",
"seed": 8
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/receipt-printer--cta.html" title="Tear off your first record" 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
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.
Order where you see noise
A lens drifts over a dithered field of maybes; inside it, every blob is classified, outlined and labelled.
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.