Ten years, ten rings

A company's years as a half-cut log rising from the bottom edge: one ring per year from the founding, each moment pinned out to the side, and today's outer ring opening onto the team count.

The story take on Year in review: tree rings: same story, built for a different job on the page.

Drawn in Ink · follows any look See the matched set →

The cut end of a log rising from the bottom edge as a half circle, heartwood at the centre of the bottom edge and bark round the top. Rings grow outward one per year from the founding year, 2017, to today, 2026, and each year is written on its ring up the middle of the slice. As a ring finishes, a pin on it draws a leader out to the side and labels that year's moment, alternating left and right: founded in a spare room in Lisbon in 2017, the first paying customer in 2018, a $4M seed round in 2020, a second office in Toronto in 2021, a team of 60 in 2023 and customers in 30 countries in 2024. The outermost ring, 2026, is today: it flushes with the accent colour and a leader climbs from it to a card reading 140 people, in Lisbon, Toronto and remote.

Look Make your own look →

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "tree-rings--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 tree-rings--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": "Ten years, ten rings",
  "label": "The cut end of a log rising from the bottom edge as a half circle, heartwood at the centre of the bottom edge and bark round the top. Rings grow outward one per year from the founding year, 2017, to today, 2026, and each year is written on its ring up the middle of the slice. As a ring finishes, a pin on it draws a leader out to the side and labels that year's moment, alternating left and right: founded in a spare room in Lisbon in 2017, the first paying customer in 2018, a $4M seed round in 2020, a second office in Toronto in 2021, a team of 60 in 2023 and customers in 30 countries in 2024. The outermost ring, 2026, is today: it flushes with the accent colour and a leader climbs from it to a card reading 140 people, in Lisbon, Toronto and remote.",
  "eyebrow": "Our story",
  "heading": "Ten years,\none ring at a time.",
  "sub": "We started in a spare room in 2017. Each ring is a year, and these are the moments that shaped them.",
  "years": [
    {
      "year": 2017,
      "first": "Founded",
      "note": "Two engineers, one spare room in Lisbon."
    },
    {
      "year": 2018,
      "first": "First paying customer",
      "note": "A logistics team in Rotterdam."
    },
    {
      "year": 2019
    },
    {
      "year": 2020,
      "first": "Seed round",
      "note": "$4M for our first designer and support lead."
    },
    {
      "year": 2021,
      "first": "Toronto office",
      "note": "A second home for the team."
    },
    {
      "year": 2022
    },
    {
      "year": 2023,
      "first": "A team of 60",
      "note": "Half of us now work remotely."
    },
    {
      "year": 2024,
      "first": "Customers in 30 countries",
      "note": "Support now runs round the clock."
    },
    {
      "year": 2025
    },
    {
      "year": 2026
    }
  ],
  "today": {
    "label": "Today",
    "value": "140",
    "unit": "people",
    "note": "in Lisbon, Toronto and remote, still answering support ourselves on Fridays."
  },
  "seed": 23
}

Files

default theme

Rendered frame-exact. For your brand, run the command on the left.

MP4 · 1600×900 Poster PNG Preview WebM

embed snippet

<iframe src="/tree-rings--story.html" title="Ten years, ten rings" 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

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.

the concept

Related scenes

all scenes

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.

Money