site-motion

Scenes / approvals / ledger-stamp / ledger-stamp--month

SVG · approvals · compliance · trust

A month, stamped

A month of approvals stamped onto a calendar page, busier days in denser ink, until every payment is signed and the month is sealed.

The metrics take on Ledger stamp: same story, built for a different job on the page.

Drawn in Ink · follows any look See the matched set →

A desk calendar page for October 2026. A rubber stamp moves across the grid and stamps each working day approved, and each cell shows that day's payment count; busier days collect more overlapping impressions, so their ink is denser. Four held payments are marked HELD in the warning colour on three days, and a second approver's stamp clears each one a day or two later. Beside the page, the total adds up the stamped days, held payments counted once cleared, and reaches 1,284 payments signed with 0 unsigned, 4 held and 4 cleared. The month is sealed, then the page tears off the pad and leaves the next, empty page. 00:00
00:00 / 00:00
Make your own look →

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "ledger-stamp--month" 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 ledger-stamp--month --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": "A month, stamped",
  "label": "A desk calendar page for October 2026. A rubber stamp moves across the grid and stamps each working day approved, and each cell shows that day's payment count; busier days collect more overlapping impressions, so their ink is denser. Four held payments are marked HELD in the warning colour on three days, and a second approver's stamp clears each one a day or two later. Beside the page, the total adds up the stamped days, held payments counted once cleared, and reaches 1,284 payments signed with 0 unsigned, 4 held and 4 cleared. The month is sealed, then the page tears off the pad and leaves the next, empty page.",
  "eyebrow": "Approvals · October close",
  "heading": "Every working\nday, signed off.",
  "sub": "Each stamp is one day's payments, checked and approved. Held ones wait for a second approver, then get theirs.",
  "signedLabel": "payments signed in October",
  "stats": [
    "Unsigned",
    "Held",
    "Cleared"
  ],
  "total": 1284,
  "month": "October",
  "year": "2026",
  "firstWeekday": 3,
  "days": 31,
  "weekdays": [
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat",
    "Sun"
  ],
  "pageLabel": "Payments approved per day",
  "stampOk": "APPROVED",
  "stampHeld": "HELD",
  "seal": "SEALED",
  "sealTitle": "Month sealed",
  "sealNote": "R. Okafor · 31 Oct",
  "counts": [
    54,
    61,
    64,
    48,
    55,
    58,
    66,
    62,
    51,
    56,
    47,
    63,
    63,
    57,
    52,
    49,
    60,
    68,
    55,
    59,
    62,
    74
  ],
  "held": [
    {
      "day": 8,
      "n": 1,
      "clearedAfter": 9
    },
    {
      "day": 20,
      "n": 2,
      "clearedAfter": 21
    },
    {
      "day": 28,
      "n": 1,
      "clearedAfter": 30
    }
  ]
}

Files

default theme

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

embed snippet
<iframe src="/ledger-stamp--month.html" title="A month, stamped" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>