Product demos / click-to-done
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.
Drawn in Soft UI · follows any look See the matched set →
With Claude Code
With the skill installed, paste this in your project.
Use the site-motion skill to make the "click-to-done" 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 click-to-done --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": "Invite your team in one step",
"label": "A members page in a browser window. The camera moves in on the invite form while a cursor types two email addresses, switches the role to Admin and clicks Send invites. The button confirms, the camera pulls back, two new members appear at the top of the list marked Invited, and a toast says 2 invites sent.",
"url": "app.northwind.co/members",
"workspace": {
"text": "N",
"name": "Northwind"
},
"nav": [
"Overview",
"Projects",
"Members",
"Billing",
"Settings"
],
"active": 2,
"heading": "Members",
"sub": "Invite your team to Northwind.",
"invite": {
"label": "Invite by email",
"placeholder": "name@company.com",
"value": "maya@northwind.co, leo@northwind.co",
"roles": [
"Member",
"Admin"
],
"pick": 1,
"send": "Send invites",
"sent": "Invites sent"
},
"columns": [
"Name",
"Role",
"Status"
],
"members": [
{
"name": "Ana Ruiz",
"email": "ana@northwind.co",
"role": "Owner",
"status": "Active"
},
{
"name": "Tom Okafor",
"email": "tom@northwind.co",
"role": "Admin",
"status": "Active"
},
{
"name": "Priya Shah",
"email": "priya@northwind.co",
"role": "Member",
"status": "Active"
},
{
"name": "Jonas Weber",
"email": "jonas@northwind.co",
"role": "Member",
"status": "Active"
},
{
"name": "Mei Tanaka",
"email": "mei@northwind.co",
"role": "Member",
"status": "Active"
}
],
"invited": [
{
"name": "Maya",
"email": "maya@northwind.co"
},
{
"name": "Leo",
"email": "leo@northwind.co"
}
],
"invitedStatus": "Invited",
"toast": "2 invites sent",
"toastAction": "Undo",
"cursor": [
{
"at": 1.15,
"to": "email",
"anchor": [
0.18,
0.5
],
"click": true
},
{
"at": 3.55,
"to": "role-1",
"click": true
},
{
"at": 4.35,
"to": "send",
"click": true
},
{
"at": 6.3,
"to": [
1250,
560
]
},
{
"at": 10.2,
"to": [
1000,
860
]
}
],
"camera": [
{
"at": 0.35,
"dur": 1.2,
"zoom": 1.5,
"focus": "invite",
"anchor": [
0.55,
0.62
]
},
{
"at": 5.15,
"dur": 1.3,
"zoom": 1
}
],
"times": {
"type": 1.4,
"sending": 4.45,
"sent": 5.05,
"reset": 8.9
}
}Files
default themeRendered frame-exact. For your brand, run the command on the left.
embed snippet
<iframe src="/click-to-done.html" title="Invite your team in one step" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>
More product demos
all demos
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.
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.
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.