site-motion
Animated website scenes in your own design system, without a motion designer.
Watch every scene · Product demos · Style Studio · Docs
Give it your brand's tokens (colours, type, radius) and a few lines of copy, and it gives you a scene that tells your product's story: a payment stamped, signed and sealed; tools woven into one fabric; a storm your users never notice. Every scene is one HTML file:
- Live: it plays on your site, scales to its container, pauses offscreen, and shows a still frame under reduced motion.
- Files: it renders frame-exact to MP4, WebM, animated WebP, GIF and a poster, because every scene is a pure function of time.
It is also a Claude Code skill: ask for "a hero animation for our approvals feature in our brand" and Claude picks the scene, writes the content and renders it.
Quickstart
Needs Node 22+, Chrome and ffmpeg. No npm install.
git clone https://github.com/Shivraj97/site-motion
cd site-motion
node bin/site-motion.mjs make ledger-stamp --tokens ledger --formats mp4,webp,png
Your files land in out/ledger-stamp-ledger/ (scene, then brand). To use your own brand, copy tokens/default.json, change the colours and fonts, and pass --tokens your-brand.json. To change the words, pass --content your-copy.json with only the keys you change.
Add a scene to your project
Copy a scene's source into your site so you own it, the way shadcn/ui copies components. Run this from your project:
npx github:Shivraj97/site-motion add ledger-stamp --tokens mint
(Or node path/to/site-motion/bin/site-motion.mjs add … from a clone.) It writes public/motion/ if your project has a public/ folder, otherwise motion/:
ledger-stamp/scene.js, scene.css: the motion. Edit freely.ledger-stamp/content.json: the copy. ledger-stamp/tokens.json: the brand.ledger-stamp/index.html: a dev page that re-reads the JSON on refresh. Open it through your dev server, not file://.ledger-stamp.html: one self-contained file to embed, for example <iframe src="/motion/ledger-stamp.html" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>.runtime/: the player and any library the scene needs, shared by every scene you add.
After editing, rebuild the embed with the command add prints. build, render and make all take the copied folder as their scene, so you can still export video from your own version. Pass --content copy.json to start from your own words, --dir to choose the folder, and --force to overwrite a scene you added before.
One look for the whole site
Tokens give every scene your colours and fonts. A style pack goes further: line weight, shadows, corners, texture, label voice, type scale, motion curves and tempo, and a recurring motif. So your hero, feature and CTA animations look like they came from the same studio.
The first add locks the look. It writes site-motion.json with the pack that scene belongs to, and every scene you add after it follows that pack:
npx github:Shivraj97/site-motion add card-story # locked style "soft-ui" (from card-story)
npx github:Shivraj97/site-motion add drop-pile # matches it
npx github:Shivraj97/site-motion style set ink # change the look for the whole site…
npx github:Shivraj97/site-motion sync # …and restyle every scene already added
npx github:Shivraj97/site-motion style set outline --only motion,label # or take just some knobs from another pack
| Pack | The look |
|---|
ink | flat shapes, crisp ink outlines, no shadows, ruled paper, mono labels |
soft-ui | interface cards on soft shadows with a hairline ring, accent on ink, cascading entrances |
outline | ink outline on everything, hard offset shadows, round corners, a little bounce |
dimensional | deep shadows, tonal ramps, soft glow, an unhurried pace |
field | hairlines, sharp corners, a dithered surface, slow ambient motion |
Every pack has a short code (site-motion style list), such as sm1.0020000000001. Pass it as --style or add ?style=<code> to any built embed to try a look live. native keeps each scene's own look.
Every public scene follows style packs. A scene only takes the parts of a look it was built for (its meta.json directable list), so anything it draws on purpose, like a painted landscape, stays as drawn.
Or try looks in the browser: the Style Studio puts one scene side by side, before and after, as you turn each knob, then gives you the code, a CLI line or a prompt for your coding agent.
Plan the whole site at once
Instead of picking scenes one by one, give site-motion the site and approve one sheet:
npx github:Shivraj97/site-motion theme https://yoursite.com --out brand.json # your brand first (check its notes, fix by eye)
npx github:Shivraj97/site-motion plan --brief brief.md # one "## page" heading, one "- slot: copy" line per section (below)
npx github:Shivraj97/site-motion plan --url https://yoursite.com # or read your live pages' own headings (--depth 3 adds h3 cards)
npx github:Shivraj97/site-motion plan swap home.feature-2 galton-router # change a pick, then: plan sheet
npx github:Shivraj97/site-motion plan apply # adds every scene, in one look, and prints each section's embed
npx github:Shivraj97/site-motion plan apply --bare # the same, for a page that already sets each section's heading: scenes leave theirs out
A brief is your real copy, one heading per page and one line per section:
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
