Contributions, counted
Contributions land on rows, points count up and the rows re-sort.
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 "leaderboard" 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 leaderboard --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": "Contributions, counted",
"label": "A contributor table for a community app. Contributions land one after another, points count up, and the rows re-sort themselves by total.",
"eyebrow": "Contributions",
"heading": "Contributions,\ncounted",
"body": "Propose changes, test ideas, join discussions and help make decisions. Your contributions earn points and build a record of what you’ve helped improve.",
"columns": [
"CONTRIBUTOR",
"CONTRIBUTIONS",
"POINTS ADDED",
"POINTS"
],
"people": [
{
"name": "Maya",
"chip": "Feature shipped",
"added": 320,
"points": 3200
},
{
"name": "Jon",
"chip": "14 proposals",
"added": 210,
"points": 2600
},
{
"name": "Ari",
"chip": "Early builder",
"added": 180,
"points": 2200
},
{
"name": "Yoku",
"chip": "2 new apps",
"added": 140,
"points": 1900
}
],
"events": [
{
"at": 2.2,
"who": "Ari",
"chip": "Proposal passed",
"add": 900
},
{
"at": 4.6,
"who": "Yoku",
"chip": "Tested 6 changes",
"add": 1500
},
{
"at": 7,
"who": "Jon",
"chip": "Feature shipped",
"add": 700
}
],
"note": "Every contributor is verified as one real human. Bots don’t get a seat at the table."
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/leaderboard.html" title="Contributions, counted" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>
Related scenes
all scenes
Account health
A health table replays the month: one account slips to at risk, a playbook fires at the low point, and it recovers.
An agent run, traced
One agent run as a vertical trace: thinking, tool calls and results on a shared time axis, resolving into the answer.
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.