Matter.js · automation · workflows

One trigger, every step

One trigger tips a chain of dominoes; each step lights as the wave reaches it.

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

A ball rolls down a ramp and tips a line of dominoes grouped into four automation steps; each step lights as the wave reaches it, until the whole chain has run.

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "domino-run" 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 domino-run --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 trigger, every step",
  "label": "A ball rolls down a ramp and tips a line of dominoes grouped into four automation steps; each step lights as the wave reaches it, until the whole chain has run.",
  "eyebrow": "Automation",
  "heading": "One trigger.\nEvery step fires,\nin order.",
  "sub": "Set it up once. Watch the whole chain run itself.",
  "run": "",
  "perStep": 4,
  "releaseAt": 0.6,
  "steps": [
    {
      "label": "Form submitted",
      "done": "lead created"
    },
    {
      "label": "Enrich",
      "done": "company found"
    },
    {
      "label": "Score & route",
      "done": "sent to sales"
    },
    {
      "label": "Notify",
      "done": "Slack + email"
    }
  ]
}

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="/domino-run.html" title="One trigger, every step" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>

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.

AI & agentsPro

Spend that sorts itself

Every card swipe drops its paperwork on the table, and a line of ants carries each crumb down its own pheromone trail to the right ledger slot.

MoneyPro

Workflow in bloom

An event runs through a workflow graph and each step blooms into generative flowers.

Workflows & integrations