Scenes / pricing / balance-scale
Quality against cost
Quality and cost blocks land on three pan balances; the rivals sag toward cost while ours tips to quality and settles, each tilt computed from the scores.
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 "balance-scale" 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 balance-scale --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": "Quality against cost",
"label": "Three pan balances share one rubric. On each, quality blocks (accuracy, speed, uptime) go on the left pan and cost blocks (price, setup, overages) on the right, each block sized by its score out of 10. Tool A and Tool B sag toward cost under heavy cost blocks. This plan takes its small cost blocks, then its three quality blocks land and the beam tips decisively toward quality, overshoots and settles. Under each balance the totals and the quality per unit of cost are shown: 0.7x for Tool A, 5.5x for this plan, 0.8x for Tool B.",
"eyebrow": "Quality vs cost",
"heading": "Weigh what you get\nagainst what you pay.",
"sub": "Three tools, one rubric. The beam settles where the scores put it.",
"legend": {
"quality": "Quality: accuracy, speed, uptime",
"cost": "Cost: price, setup, overages",
"note": "Each block is a score out of 10. Its width and the beam's tilt are computed from the scores."
},
"qualityWord": "Quality",
"costWord": "Cost",
"ratioLabel": "quality per unit of cost",
"verdict": {
"quality": "Tips to quality",
"cost": "Tips to cost"
},
"stiffness": 40,
"scales": [
{
"name": "Tool A",
"quality": [
{
"label": "Accuracy",
"value": 6.4
},
{
"label": "Speed",
"value": 5.5
},
{
"label": "Uptime",
"value": 6.1
}
],
"cost": [
{
"label": "Price",
"value": 9.4
},
{
"label": "Setup",
"value": 8.6
},
{
"label": "Overages",
"value": 9
}
]
},
{
"name": "This plan",
"ours": true,
"quality": [
{
"label": "Accuracy",
"value": 9.6
},
{
"label": "Speed",
"value": 9.3
},
{
"label": "Uptime",
"value": 9.9
}
],
"cost": [
{
"label": "Price",
"value": 2.9
},
{
"label": "Setup",
"value": 1.4
},
{
"label": "Overages",
"value": 0.9
}
]
},
{
"name": "Tool B",
"quality": [
{
"label": "Accuracy",
"value": 8.1
},
{
"label": "Speed",
"value": 7
},
{
"label": "Uptime",
"value": 7.7
}
],
"cost": [
{
"label": "Price",
"value": 9.7
},
{
"label": "Setup",
"value": 9.1
},
{
"label": "Overages",
"value": 9.5
}
]
}
]
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/balance-scale.html" title="Quality against cost" 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
The number, made of the work
Grains of real events pour into the digits of the total, then sort themselves into one bar per source.
Gear tiers
Three plans drawn as camping kit in one ink line, a tent, a campsite and a basecamp, each item drawing on as its feature ticks in; a Monthly/Annual toggle rolls the prices on their wooden signs.
Revenue, four ways
Four KPI tiles read from one set of numbers; a highlighted period sweeps across them and the headline lands as the line reaches its last point.