SVG · milestones · metrics · scale

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.

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

A cross-section of a log, seen face on, with dark heartwood at the centre and bark around the edge. Rings grow outward one per year from 2019 to 2026, each one as thick as that year's order volume, so busy years leave wide rings and quiet years thin ones. A callout rides outward along a measuring line with each year and its figure, coloured notches on three rings mark firsts such as the first enterprise customer, and a plaque pinned to the heartwood shows the running total, added up from the rings, landing on 48,210 orders.

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" 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 --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": "Year in review: tree rings",
  "label": "A cross-section of a log, seen face on, with dark heartwood at the centre and bark around the edge. Rings grow outward one per year from 2019 to 2026, each one as thick as that year's order volume, so busy years leave wide rings and quiet years thin ones. A callout rides outward along a measuring line with each year and its figure, coloured notches on three rings mark firsts such as the first enterprise customer, and a plaque pinned to the heartwood shows the running total, added up from the rings, landing on 48,210 orders.",
  "eyebrow": "Year in review",
  "heading": "Every year\nleaves a ring.",
  "sub": "Each ring is one year of orders, as wide as the year was busy. The notches mark the firsts.",
  "unit": "orders",
  "totalLabel": "orders since 2019",
  "firstsLabel": "Firsts",
  "years": [
    {
      "year": 2019,
      "value": 1240
    },
    {
      "year": 2020,
      "value": 2860,
      "first": "First enterprise customer"
    },
    {
      "year": 2021,
      "value": 4120
    },
    {
      "year": 2022,
      "value": 6480,
      "first": "Shipping to a new country"
    },
    {
      "year": 2023,
      "value": 5310
    },
    {
      "year": 2024,
      "value": 8950,
      "first": "First 1,000-order month"
    },
    {
      "year": 2025,
      "value": 11700
    },
    {
      "year": 2026,
      "value": 7550,
      "note": "so far"
    }
  ],
  "seed": 19
}

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.html" title="Year in review: tree 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

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.

story

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