Scenes / milestones / roadmap-rail / roadmap-rail--story
From a spare room to today
A company's history on a vertical rail: a marker climbs from the founding year, each milestone lights as it passes, and today's card opens at the top.
The story take on The year on one rail: 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 "roadmap-rail--story" 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 roadmap-rail--story --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": "From a spare room to today",
"label": "A company history on a vertical timeline running from 2019 at the bottom to 2026 at the top. A marker climbs the rail, its flag showing the year, and stops at each milestone: founded in February 2019, the first paying customer in May 2020, a $4M seed round in September 2021, and a team of 40 in June 2023. Each milestone fills in with one short line beside it. At the top the marker reaches today, November 2026, and a card opens: 2,400 teams use the product every week, built by 140 people in Lisbon, Toronto and remote.",
"eyebrow": "Our story",
"heading": "How a spare room\nbecame a company.",
"sub": "The moments that shaped the company, from the first commit in 2019 to the people who rely on us today.",
"axis": {
"periods": [
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
"2026"
]
},
"milestones": [
{
"title": "Founded",
"date": "Feb 2019",
"at": 0.1,
"note": "Two engineers, one spare room, a spreadsheet that kept breaking."
},
{
"title": "First paying customer",
"date": "May 2020",
"at": 1.35,
"note": "A 12-person logistics team in Rotterdam. They are still with us."
},
{
"title": "Seed round",
"date": "Sep 2021",
"at": 2.7,
"note": "$4M to hire our first designer and a support lead."
},
{
"title": "A team of 40",
"date": "Jun 2023",
"at": 4.45,
"note": "A second office opens in Toronto."
},
{
"title": "Today",
"date": "Nov 2026",
"at": 7,
"highlight": true,
"status": "Today",
"value": "2,400",
"unit": "teams every week",
"note": "Built by 140 people in Lisbon, Toronto and remote. We still answer support ourselves on Fridays."
}
]
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/roadmap-rail--story.html" title="From a spare room to today" 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
Changelog scroll
A parchment scroll unrolls from its roller one release at a time; each row is inked wet, settles, and ages as newer releases arrive.
How it works, step by step
A token travels a rail of numbered steps; each card opens on what its step produced, and the last one lands the result.
Year in review: tree rings
A log slice grows one ring per year, each as thick as that year's orders; notches mark the firsts and the plaque at the heart adds them up.