Scenes / approvals / ledger-stamp / ledger-stamp--trail

SVG + DOM · approvals · compliance · trust

A hash-chained audit trail

An audit trail written as sentences and chained seal to seal; editing one past amount breaks the chain from there down, so the edit is refused and logged.

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

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

One large ledger page. Five entries are written one at a time as sentences, such as R. Okafor approved PX-2041 for $12,480.00 at 09:41, each with a rubber stamp in the margin and a round seal holding a short hash, joined to the seal above by a chain link. K. Doyle edits the amount of the second entry to $21,480.00. Its hash no longer matches, and from that row down the links snap open and the seals turn to the warning colour with the words hash mismatch. The edit is rejected and struck out, the original amount returns, the chain re-links, and the attempt is written as a new entry stamped rejected at the foot of the page.

Look 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--trail" 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--trail --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 hash-chained audit trail",
  "label": "One large ledger page. Five entries are written one at a time as sentences, such as R. Okafor approved PX-2041 for $12,480.00 at 09:41, each with a rubber stamp in the margin and a round seal holding a short hash, joined to the seal above by a chain link. K. Doyle edits the amount of the second entry to $21,480.00. Its hash no longer matches, and from that row down the links snap open and the seals turn to the warning colour with the words hash mismatch. The edit is rejected and struck out, the original amount returns, the chain re-links, and the attempt is written as a new entry stamped rejected at the foot of the page.",
  "eyebrow": "Audit trail",
  "heading": "Every entry sealed\nto the one before it.",
  "sub": "Each approval is hashed with the entry above it. Change one past number and the chain breaks from there down, so the edit is refused and written into the log.",
  "pageLabel": "Ledger · 05 Nov · page 14",
  "prevPage": "page 13",
  "statusOk": "{n} entries · every link intact",
  "statusBad": "Hash mismatch at {ref} · {b} of {links} links broken",
  "footnote": "Append-only. A change is a new entry, never an overwrite.",
  "headLabel": "head",
  "sealed": "sealed",
  "mismatch": "hash mismatch",
  "prev": "prev",
  "was": "was",
  "pending": "pending",
  "pendingNote": "not chained yet",
  "entryNo": "ENTRY",
  "firstEntry": 418,
  "for": "for",
  "to": "to",
  "rejectedNote": "edit rejected",
  "entries": [
    {
      "actor": "A. Mensah",
      "verb": "filed",
      "ref": "INV-1187",
      "amount": "$3,920.50",
      "time": "09:38",
      "stamp": "FILED"
    },
    {
      "actor": "R. Okafor",
      "verb": "approved",
      "ref": "PX-2041",
      "amount": "$12,480.00",
      "time": "09:41",
      "stamp": "APPROVED"
    },
    {
      "actor": "J. Patel",
      "verb": "refunded",
      "ref": "RF-0932",
      "amount": "$86.40",
      "time": "09:43",
      "stamp": "REFUNDED"
    },
    {
      "actor": "L. Chen",
      "verb": "signed",
      "ref": "PR-0011",
      "amount": "$96,350.00",
      "time": "09:46",
      "stamp": "SIGNED"
    },
    {
      "actor": "M. Ruiz",
      "verb": "approved",
      "ref": "INV-1188",
      "amount": "$15,600.00",
      "time": "09:48",
      "stamp": "APPROVED"
    }
  ],
  "tamper": {
    "row": 1,
    "actor": "K. Doyle",
    "verb": "tried to change",
    "amount": "$21,480.00",
    "time": "09:52",
    "stamp": "REJECTED"
  }
}

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="/ledger-stamp--trail.html" title="A hash-chained audit trail" 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

Ledger stamp

Payments are checked, stamped, signed and sealed on an indexed belt; one over the limit is held for a second approver.

the concept

One payment, stamped

One payment close up: its checks tick, a press slams APPROVED onto it, it is signed and sealed, then the next rises from the pile.

hero

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.

metrics

Related scenes

all scenes