Product demos / shot-demo
Tallyhand: the agent closes the gap
Your own screenshot, demoed: the cursor types into your real fields and clicks your real button, the values change in your face, the camera and a spotlight land on the result.
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 "shot-demo" 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 shot-demo --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": "Tallyhand: the agent closes the gap",
"label": "Tallyhand, a fictional AI accountant, on its March reconciliation screen in a browser window. The camera moves in on the instruction field; the cursor clicks it and types Match the open items, then clicks Run agent. The camera crosses to the results, where the unreconciled difference drops from $2,318.40 to $0.00, the book balance rises to $182,406.15, matched transactions go from 1,204 to 1,218 and items needing review from 14 to 0. A spotlight settles on the difference with a note: 14 items matched, books balance. The camera pulls back and the page returns to its first state.",
"image": "asset:shots/tallyhand.jpg",
"imageSize": [
2880,
1800
],
"frame": "browser",
"url": "app.tallyhand.example/reconcile/march",
"hotspots": {
"ask": {
"box": [
578,
427,
1028,
84
],
"r": 16
},
"ask-text": [
604,
446,
560,
46
],
"form": [
532,
264,
1120,
964
],
"run": {
"box": [
578,
706,
1028,
88
],
"r": 16
},
"results": [
1692,
264,
1120,
964
],
"diff": [
1734,
352,
470,
108
],
"book": [
2596,
688,
172,
40
],
"matched": [
2680,
769,
88,
40
],
"review": [
2728,
850,
40,
40
],
"diff-line": {
"box": [
1728,
350,
480,
106
],
"r": 12
},
"status": [
2652,
144,
140,
36
]
},
"edits": [
{
"in": "ask-text",
"text": "Match the open items",
"mode": "type",
"at": 2.05,
"clear": 1.75,
"cps": 14,
"size": 28,
"focus": "ask",
"blur": 3.45,
"color": "#15201c"
},
{
"in": "diff",
"text": "$0.00",
"mode": "swap",
"at": 4.35,
"size": 92,
"weight": 700,
"tracking": "-0.02em",
"dy": -3
},
{
"in": "book",
"text": "$182,406.15",
"mode": "swap",
"at": 4.5,
"size": 28,
"weight": 500,
"align": "right"
},
{
"in": "matched",
"text": "1,218",
"mode": "swap",
"at": 4.65,
"size": 28,
"weight": 500,
"align": "right"
},
{
"in": "review",
"text": "0",
"mode": "swap",
"at": 4.8,
"size": 28,
"weight": 500,
"align": "right"
},
{
"in": "status",
"text": "Balanced",
"mode": "swap",
"at": 4.95,
"size": 25,
"weight": 600,
"align": "center"
}
],
"spotlight": [
{
"on": "diff-line",
"at": 5.6,
"until": 7.5,
"pad": 3
}
],
"callouts": [
{
"to": "diff-line",
"text": "14 items matched, books balance",
"at": 5.9,
"until": 7.5,
"side": "bottom",
"gap": 22,
"offset": [
95,
0
]
}
],
"cursorHidden": true,
"cursor": [
{
"at": 0.9,
"show": true
},
{
"at": 1.6,
"to": "ask",
"anchor": [
0.2,
0.5
],
"click": true
},
{
"at": 3.4,
"to": "run",
"anchor": [
0.55,
0.5
],
"click": true
},
{
"at": 4,
"hide": true
}
],
"camera": [
{
"at": 0.4,
"dur": 1.3,
"zoom": 1.75,
"focus": "ask",
"offset": [
60,
20
]
},
{
"at": 2.75,
"dur": 0.95,
"zoom": 1.45,
"focus": "form",
"anchor": [
0.5,
0.5
]
},
{
"at": 3.75,
"dur": 1.1,
"zoom": 1.3,
"focus": "results"
},
{
"at": 5.3,
"dur": 1.1,
"zoom": 1.85,
"focus": "diff",
"offset": [
40,
170
]
},
{
"at": 7.6,
"dur": 1.4,
"zoom": 1
}
],
"times": {
"reset": 8.7
},
"duration": 10.5,
"still": 6.6,
"debug": false,
"views": {
"compact": {
"callouts": [
{
"to": "diff-line",
"text": "14 items matched, books balance",
"at": 5.9,
"until": 7.5,
"side": "bottom",
"gap": 22,
"offset": [
0,
0
]
}
]
}
}
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/shot-demo.html" title="Tallyhand: the agent closes the gap" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>
More product demos
all demos
Give your agent a card with a limit
An agent's virtual card at work: a purchase request comes in, the checkout autofills with a masked card, the limit meter moves by exactly the amount and the receipt joins the list.
Invite your team in one step
A real product screen: the cursor types two emails, picks a role and sends; the camera pulls back as the team grows.
See the week that mattered
A real dashboard: the revenue figure builds from the line as it draws, the cursor scrubs the chart, the camera pushes in on the best day, and 30D morphs the whole view.