Scenes / orchestration / score-sheet / score-sheet--hero
One run, one phrase
One agent run plays across three staves as a single phrase of notes and resolves into a chord: the approved result.
The hero take on A run, as a score: same story, built for a different job on the page.
Drawn in Ink · 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 "score-sheet--hero" 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 score-sheet--hero --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": "One run, one phrase",
"label": "A homepage hero for multi-agent orchestration. Under a large headline, three quiet musical staves run across the stage, named Planner, Coder and Reviewer. One agent run plays across them as a single phrase: a line travels note to note, and each note lands on the stave of the agent doing that step, with a short label such as split the task, implement retries or review diff. After seven steps the line comes to rest on a chord, three dark noteheads stacked on one stem across all three staves, and a tag beside it reads Approved, run #1842, 7 steps, 38s.",
"eyebrow": "Orchestration",
"heading": "Plan, build, review.\nOne run, in time.",
"sub": "Your agents hand work to each other like a phrase of music, and every run resolves into one approved result.",
"beats": 14,
"staves": [
"Planner",
"Coder",
"Reviewer"
],
"notes": [
{
"id": "plan",
"stave": 0,
"at": 0,
"pitch": 5,
"label": "split the task"
},
{
"id": "impl",
"stave": 1,
"at": 2,
"pitch": 3,
"label": "implement retries",
"after": [
"plan"
]
},
{
"id": "review1",
"stave": 2,
"at": 4,
"pitch": 6,
"label": "review diff",
"after": [
"impl"
]
},
{
"id": "replan",
"stave": 0,
"at": 6,
"pitch": 3,
"label": "adjust plan",
"after": [
"review1"
]
},
{
"id": "fix",
"stave": 1,
"at": 8,
"pitch": 6,
"label": "fix edge case",
"after": [
"replan"
]
},
{
"id": "tests",
"stave": 1,
"at": 10,
"pitch": 2,
"label": "write tests",
"after": [
"fix"
]
},
{
"id": "approve",
"stave": 2,
"at": 12,
"pitch": 4,
"label": "approve PR",
"after": [
"tests"
]
}
],
"result": {
"label": "Approved",
"summary": "{run} · {steps} steps · {seconds}s",
"chord": [
4,
4,
4
]
},
"run": {
"name": "run #1842",
"seconds": 38
}
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/score-sheet--hero.html" title="One run, one phrase" 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
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.
Order where you see noise
A lens drifts over a dithered field of maybes; inside it, every blob is classified, outlined and labelled.
One message, turned into done work
A chat message's key phrases lift off and snap into a structured card, then the actions run and a reply comes back.