Scenes / reconciliation / crate-discrepancy
Crate discrepancy
Trays lift out of a delivery crate one by one and tick off their line on the packing slip; the one that came up short glows amber and floats up with its note.
Drawn in Outline · 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 "crate-discrepancy" 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 crate-discrepancy --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": "Crate discrepancy",
"label": "An open wooden crate full of shredded paper stands beside an empty pallet, and a packing slip is clipped to a board on the right. Six trays of tableware lift out of the crate one at a time. While each tray is in the air its line on the slip is highlighted; when it lands on the pallet the line gets the received count and a tick. The tray of serving bowls comes out with two of its twelve places empty: it glows amber and floats up above the pallet with a note reading Short by 2, Ordered 12 · received 10, joined by a dashed line to its row on the slip, which turns amber with a warning mark. The slip's total lands on 48 units matched and 1 discrepancy.",
"eyebrow": "Receiving",
"heading": "Every delivery,\nchecked line by line.",
"sub": "Each item is matched to its purchase order as it comes out of the crate. Anything short, extra or wrong is flagged with a note for the supplier.",
"po": "PO-20418",
"crateNote": "Crate 1 of 1 · 6 lines",
"slipTitle": "Packing slip",
"supplier": "Harbor & Pine Supply",
"slipMeta": "Delivered 11 Nov · Dock 2",
"cols": [
"Item",
"Ord",
"Rec"
],
"matchedLabel": "units matched",
"flagLabel": "discrepancy",
"flagLabelPlural": "discrepancies",
"palletLabel": "Checked in",
"shortNote": "Short by {n}",
"overNote": "Over by {n}",
"countNote": "Ordered {ord} · received {rec}",
"lines": [
{
"sku": "MUG-104",
"name": "Stoneware mug",
"ordered": 12,
"received": 12
},
{
"sku": "NAP-220",
"name": "Linen napkin",
"ordered": 8,
"received": 8
},
{
"sku": "TMB-310",
"name": "Glass tumbler",
"ordered": 6,
"received": 6
},
{
"sku": "BWL-415",
"name": "Serving bowl",
"ordered": 12,
"received": 10
},
{
"sku": "PLT-118",
"name": "Dinner plate",
"ordered": 12,
"received": 12
},
{
"sku": "CST-502",
"name": "Oak coaster",
"ordered": 10,
"received": 10
}
],
"seed": 7
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/crate-discrepancy.html" title="Crate discrepancy" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>
Related scenes
all scenes
Spend that sorts itself
Every card swipe drops its paperwork on the table, and a line of ants carries each crumb down its own pheromone trail to the right ledger slot.
Ledger stamp
Payments are checked, stamped, signed and sealed on an indexed belt; one over the limit is held for a second approver.
Every request, checked in rings
Requests pass concentric control rings around the data; the unauthorised one is stopped as its ring closes, and every decision is logged.