Scenes / simplification / split-wipe / split-wipe--proof
Before and after, as evidence
A before / after divider steps down a card of three metrics, each re-reading with its change, and a customer quote closes the case.
The proof take on Before and after, one sweep: same story, built for a different job on the page.
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 "split-wipe--proof" 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 split-wipe--proof --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": "Before and after, as evidence",
"label": "A results card with three metric rows from one operations team, read the quarter before a new workflow. A horizontal divider moves down the card one row at a time; as it passes each row, the before value is replaced by the after value with the change beside it and a bar that shrinks or grows from the old length, which stays as a dashed outline. Tools in use go from six to one, down eighty-three percent; time a week on requests from four hours ten minutes to twelve minutes, down ninety-five percent; requests with an owner from three of nine to nine of nine, up six. A short quote from the customer's head of operations closes it. Then the divider returns to the top.",
"eyebrow": "Operations · Results",
"heading": "Same team.\nNext quarter.",
"sub": "Three numbers from one ops team: the quarter before the workflow, and the quarter after.",
"beforeLabel": "Before",
"afterLabel": "After",
"period": {
"before": "Jan – Mar",
"after": "Jul – Sep"
},
"product": {
"name": "Ops workflow",
"mark": "O"
},
"was": "was",
"ofLabel": "of",
"counter": {
"h": "h",
"min": "min"
},
"metrics": [
{
"label": "Tools in use",
"before": 6,
"after": 1,
"change": "pct",
"better": "down"
},
{
"label": "Time a week on requests",
"before": 250,
"after": 12,
"format": "duration",
"change": "pct",
"better": "down"
},
{
"label": "Requests with an owner",
"before": 3,
"after": 9,
"of": 9,
"change": "diff",
"better": "up"
}
],
"quote": {
"text": "We stopped asking who has it. The queue tells us, and payroll hasn't slipped since.",
"name": "Dana Okafor",
"role": "Head of Operations, Halden & Co.",
"mark": "DO"
}
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/split-wipe--proof.html" title="Before and after, as evidence" 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
Bead views
One record stays still as a bead while its string re-threads the world around it: a calendar, a board, a street map and a timeline.
Expenses on autopilot
A feature list drives a product card through its states, removing a step each time.
Summarisation: the page dehydrator
A whole web page is laid on a dehydrator tray; everything but the key sentences evaporates, the token counter falls by nine tenths, and a crisp excerpt slides out of the side.