00:00:00:00 · 66 scenes · open source + Pro
Motion for your site, in your brand.
Animated scenes that tell your product's story, drawn from your own colours and type. Paste your URL and watch them change.
Find a scene
66 scenes
Account health
A health table replays the month: one account slips to at risk, a playbook fires at the low point, and it recovers.
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.
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.
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.
Deploy liftoff
Each build-log line inflates a hot-air balloon by its share; when the health check passes it lifts off flying an online pennant.
Bead views
One record stays still as a bead while its string re-threads the world around it: a calendar, a board, a street map and a timeline.
One trigger, every step
One trigger tips a chain of dominoes; each step lights as the wave reaches it.
Smart routing
Payments drop through a pegboard; a rule flips the switch and the flow moves to the processors that say yes.
Everything lands in one place
Work items from everywhere fall into one tray with real physics while a counter tallies them.
Workflow in bloom
An event runs through a workflow graph and each step blooms into generative flowers.
Edge inference
Isometric blocks with live data on their faces rise over a tiled floor.
The stack, in 2.5D
Real HTML layers lift apart in 2.5D while a request drops through the stack.
Expenses on autopilot
A feature list drives a product card through its states, removing a step each time.
The number, made of the work
Grains of real events pour into the digits of the total, then sort themselves into one bar per source.
Order where you see noise
A lens drifts over a dithered field of maybes; inside it, every blob is classified, outlined and labelled.
Branch your database like a cell
A database cell called main buds two branch cells; one is changed and fuses back, the other dissolves, and main carries the change.
One message, turned into done work
A chat message's key phrases lift off and snap into a structured card, then the actions run and a reply comes back.
Coverage map
A dot-matrix world map where every region glows with live traffic, and a new region comes online with a ripple across the continents.
Crate discrepancy
Trays lift out of a delivery crate one by one and tick off their line on the packing slip; the one that came up short glows amber and floats up with its note.
Where every email lands
A broadcast blown like a dandelion clock: each seed is a batch of emails that drifts to the meadow, the bounce fence or the spam puddle, and every tally is counted from where the seeds land.
Summarisation: the page dehydrator
A whole web page is laid on a dehydrator tray; everything but the key sentences evaporates, the token counter falls by nine tenths, and a crisp excerpt slides out of the side.
Gear tiers
Three plans drawn as camping kit in one ink line, a tent, a campsite and a basecamp, each item drawing on as its feature ticks in; a Monthly/Annual toggle rolls the prices on their wooden signs.
Search as you type
Every keystroke swirls a prospector's pan and washes part of the catalogue over the rim, until three results are left glinting.
Inbox triage
Incoming requests are tagged and routed into team queues with SLA timers, and one urgent item jumps to the front of its line.
Your brand, everywhere at once
A paint chip is lifted from a fan and pressed onto a line-drawn app and phone; a circular wave from the touch point repaints everything in that brand's colours.
Every tool, one keystroke away
Every integration is a key on one isometric macro pad; a workflow is played as a chord, keys pressing in turn while a run log types each step.
Type it, and it runs
Each phrase of a prompt drops a part instead of a letter; the parts settle into a small machine, and on Run a ball rolls through it and lights the output.
Revenue, four ways
Four KPI tiles read from one set of numbers; a highlighted period sweeps across them and the headline lands as the line reaches its last point.
One string, every language
Speech bubbles in eight scripts float up and pack under a ceiling, then each locale's words glide into a greeting card as one sentence, right to left for Arabic.
Ledger stamp
Payments are checked, stamped, signed and sealed on an indexed belt; one over the limit is held for a second approver.
Contributions, counted
Contributions land on rows, points count up and the rows re-sort.
Woven together
Each tool is a band of warp threads, woven into one fabric that rolls onto your product's beam.
Live room
Named cursors, a proposal, a vote that passes and a change that ships, live.
Margin rails
A memo writes itself on pleading paper while passages carried forward from past matters slide in on margin rails that name their source; every § commits from pending to verified.
Migration: moving boxes
A hand truck moves labelled boxes from a cramped old office into a clean new building, where each one is unpacked into the right room.
Where users actually stop
Visitors walk a gallery of product features and stop where they care; their dwell warms a heatmap and ranks the features beside it.
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.
Permission chessboard
Role pieces take turns on a board of resources by actions; the squares each role may use glow in accent, the rest lock, and a sentence spells out what it can do.
Messy in, structured out
Documents feed a slot and a receipt prints every extracted field with its confidence.
Pigeonhole wall
Documents travel from an intake tray into labelled pigeonholes; a request pulls the three it needs, each source mark commits from pending to verified, and they return to the wall.
Pipeline board
Cards advance column by column on a kanban board while counts and totals follow them, until one lands in the final stage.
Plan ladder
A real pricing table that fills itself in: ticks climb plan by plan so each tier carries the last one's features, the recommended plan lifts with its full set, and billing flips to yearly once.
Press QA
Builds roll off a press and under an inspector; an arm flicks the one with a failing test down a chute, back to the plate, and it passes on the second run.
PII redaction: pebbles
A squeegee sweeps down a support email and every personal detail it passes sets into a grey pebble the width of the words, while the sentences stay readable.
Projector sheets
Production, staging and a pull request stack as acetate sheets on a projector; lift the PR sheet off and the wall snaps back to staging.
Autoscaling pufferfish
Traffic rolls in as waves on the sea's surface; a pufferfish inflates to match each one while a rigid boxfish with fixed capacity gets tossed and throws a 502.
Every run on the scope
Every running job is a blip on a radar scope; one starts failing, and a cursor reaches in and pauses it until its retry.
Redline front
A review front sweeps down a contract; clauses commit as tracked changes, margin comments and verified authorities, and the file returns as a finished redline.
Traffic, by channel
Traffic is a river on a contour map, split into one branch per channel as wide as its share; a campaign surge widens one branch while its neighbours narrow.
The year on one rail
A Today marker walks a roadmap's time axis; shipped milestones fill in and the key launch opens into a card.
Before and after
A receipt marble crawls through five contraptions of the old process and jams after four days, then drops down one smooth chute into Done in a second.
A run, as a score
A multi-agent run written as a musical score; each stave vibrates while its agent works.
Know the delay first
A coin scratches the foil off a boarding pass to reveal the predicted delay, long before the airport board prints the same time.
Signal from noise
Noisy strands pass a gate and leave as clean, ordered lanes.
Early detection
A shaking sieve lets a panel of markers fall through to a calm normal pile, while the few too big for the mesh catch, glow amber and lift out into a flagged-early list.
Before and after, one sweep
A before / after divider sweeps across scattered manual work, and every fragment snaps into its row in one product surface.
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.
Payroll that follows the sun
A sunrise sweeps along one long office facade in UTC order; each city's windows light at its 9 am and a payslip slides to every person inside.
Weathering the storm
A storm builds over one region of a status map; traffic reroutes and nothing fails.
Agent in every tool
App windows over a painted backdrop while an agent does the steps in every tool.
Tennis correction
Seen from above, a wrong answer is lobbed back over the accent net with the fix written on it, and the next serve on that topic lands in.
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.
Every request, checked in rings
Requests pass concentric control rings around the data; the unauthorised one is stopped as its ring closes, and every decision is logged.
Conversion funnel
Riders slide down one ramp per funnel stage; at each lip some splash into that stage's pool, and the last pool fills with paying customers.
The one number that matters
A crowded dashboard dissolves upward into rising fog bands that settle into the page, leaving one sentence and the one number that survived.
Zip merge
Two cursors pull a zip closed from opposite ends; every tooth is one person's keystroke, and the seam reads as one line with no conflicts.
Close the month from one message
An AI agent closes the month in a chat: the reply streams, three tool calls open one at a time, and the books beside it roll to the reconciled total.
Give your agent a card with a limit
An agent's virtual card at work: a purchase request comes in, the checkout autofills with a masked card, the limit meter moves by exactly the amount and the receipt joins the list.
One failed agent, found and back in seconds
A live fleet of agents: one fails and lifts out of the grid, a person opens it, retries the failing step, and fleet health returns to what the tiles add up to.
Invite your team in one step
A real product screen: the cursor types two emails, picks a role and sends; the camera pulls back as the team grows.
See the week that mattered
A real dashboard: the revenue figure builds from the line as it draws, the cursor scrubs the chart, the camera pushes in on the best day, and 30D morphs the whole view.
Your oldest software, operated for you
An agent's cursor works a dated desktop form field by field while a run log ticks off every step and stops the clock when the record posts.
Connect a service without leaving the keyboard
A workspace dims under a command palette: each key filters the list, Enter runs the right action and the result lands in the screen behind, no mouse needed.
A late checkout, reshuffled in one click
A room-by-hour board: a late checkout collides with the next block, the agent proposes a reshuffle, and one click slides the blocks clear and brings every room back inside the deadline.
From a dropped document to an approved claim
A real claims screen: a document drops in, each field is read, wired to a structured form and summed into an approved payout, every value traced to its source.
From finding to fix in one click
A code review screen: a security agent marks a vulnerable line and traces the input to the sink, then a person clicks Open fix and the diff writes itself in.
Move one card, see the quarter change
A priority list: the agent writes a reason on one card, a person drags it up, the rows make way, and the projected outcome recomputes from the new order.
An agent's edit, accepted with its source
A shared document with two named cursors: a person selects a vague sentence, an agent redlines it with a citation, and one Accept settles the text and resolves the comment.
Connect an app, grant only what the agent needs
An integrations screen: pick an app, grant only the scopes the agent needs, leave the risky one off, and the access summary counts exactly what was given.
One case through the whole platform
A bento of live product tiles where one customer case travels from permission to answer to run log to chart to the booked figure, one tile in focus at a time.
Know the moment money moves
A real phone: notifications land on the lock screen with a ring of signal behind each, a tap opens the newest into the app, a swipe home clears it.
Tallyhand: the agent closes the gap
Your own screenshot, demoed: the cursor types into your real fields and clicks your real button, the values change in your face, the camera and a spotlight land on the result.
Every flagged order, fixed in place
A dense orders table: one click and the agent corrects every flagged row in place, old value to new, while the recovered total adds up from the rows.
Swipe once. The agent applies.
A swipe right stamps a matched card and sends it off the phone into the agent's queue; the applications go out one by one until an interview lands back in the deck.
Approve the plan, watch it run
An ops agent posts its plan in a team chat; one click on Approve runs every step in turn and a summary reports the time saved.
From failing tests to a ready change
A coding agent in a terminal: a task is typed, it reads, runs the tests, fixes a failure and reruns until they go green, then a progress rail and diff summary land.
The agent books it while you watch
A voice agent on a live call: the waveform and transcript run on the phone, and the moment the caller agrees a time the appointment flies into the desktop schedule.
Nothing matches yet.
Product demos
all 21 demos →A product screen rebuilt in the browser: a cursor does one job, the camera follows it, and every name and number comes from one content file. These are for made-up AI-agent companies; swap in your own screens and copy.
Close the month from one message
An AI agent closes the month in a chat: the reply streams, three tool calls open one at a time, and the books beside it roll to the reconciled total.
Approve the plan, watch it run
An ops agent posts its plan in a team chat; one click on Approve runs every step in turn and a summary reports the time saved.
From a dropped document to an approved claim
A real claims screen: a document drops in, each field is read, wired to a structured form and summed into an approved payout, every value traced to its source.
Connect a service without leaving the keyboard
A workspace dims under a command palette: each key filters the list, Enter runs the right action and the result lands in the screen behind, no mouse needed.
One failed agent, found and back in seconds
A live fleet of agents: one fails and lifts out of the grid, a person opens it, retries the failing step, and fleet health returns to what the tiles add up to.
From failing tests to a ready change
A coding agent in a terminal: a task is typed, it reads, runs the tests, fixes a failure and reruns until they go green, then a progress rail and diff summary land.
One look across every scene
open the studio →The first scene you add sets your site's look: line weight, elevation, corners, texture, easing and motif. 66 scenes follow it, so your hero, features and pricing animations look like they came from one studio. Here is The stack, in 2.5D in each look.
Your tokens in. A scene out.
How it works
node 22 · chrome · ffmpegAdd the skill
Clone it into Claude Code's skills, or use the CLI on its own. No npm install.
git clone https://github.com/Shivraj97/site-motion.git ~/.claude/skills/site-motion
Draft your tokens
Read colours and type from your live site, then correct anything by eye.
node bin/site-motion.mjs theme https://yoursite.com
Pick a scene, ship it
Embed the live HTML, or export frame-exact MP4, WebM, WebP and a poster.
node bin/site-motion.mjs make ledger-stamp --tokens brand.json
Open source, with a Pro library
MIT + ProThe whole engine, plus 33 scenes, 20 variants and 5 product demos, MIT
The engine, the product-demo kit, the CLI, the Claude Code skill and every scene without a Pro tag. Commercial projects included. Read the code, change it, send a scene back.
Star on GitHub →33 scenes, 8 variants and 16 product demos, Pro
The scenes tagged Pro, most of the AI-agent product demos among them, plus new drops every week. Watch them all here for free. One email when Pro opens.
This page is the demo
Every animation here is a scene, playing live and re-themed by the bar at the top.