Motion tokens for product teams

Your UI deserves to
move consistently

Define your animation vocabulary once. Every developer and every AI tool on your team uses it automatically - forever.

Start freeSee how it works
tokn.so/preview/acme - v1.2 - 12 tokens
enter.default
Enter
300ms - ease-out
enter.fast
Enter
150ms - ease-out
spring.bouncy
Spring
s:300 - d:20
feedback.success
Feedback
250ms - spring
The problem

Your team ships
inconsistent motion every day

Nobody agrees. Everyone guesses. Cursor invents different values on every prompt. The app feels incoherent and nobody can explain why.

Without tokn
-Dev A writes duration: 300ms on the modal
-Dev B writes transition: all 0.25s on the sidebar
-Cursor writes duration: 0.35s ease-out on the button
-Nobody decided any of this. It just accumulated.
-Rebrand takes 2 days hunting through code
-New developer joins and has no idea what to use
With tokn
+One token: enter.default used everywhere
+Cursor reads your tokens via MCP automatically
+Every AI-generated animation is on-brand
+Change one token, every component updates
+Rebrand takes 2 minutes, not 2 days
+New dev imports and uses correctly on day one
How it works

From token to code
in three steps

01
Define your tokens
Name your animations. Set duration, easing, spring values using visual sliders. Watch them animate live on real components. Save to your team workspace.
02
Publish and share
Publish a versioned snapshot. Share the preview URL with your PM. Download the npm package for your team. Every format - Framer Motion, CSS, JSON.
03
Every tool uses it
Developers import the package. Cursor reads tokens via MCP. The ESLint plugin flags anything hardcoded. Your motion system enforces itself.
Features

Everything your team
needs to move together

Visual token editor with live preview
Adjust sliders and watch your component animate in real time. Button, Card, Modal, Toast - preview every token on real UI before you ship it.
initial={{opacity:0, y:16}}
animate={{opacity:1, y:0}}
transition={{duration:0.3, ease:"easeOut"}}
Three export formats
Framer Motion props, CSS keyframes + variables, and raw JSON. Every format includes a reduced-motion fallback - automatically.
Token versioning
Publish named versions. Developers pin their npm package. Breaking changes are flagged - never silent surprises in production.
Token change history
Every value change is logged with who changed it and when. Animation behaving differently? Find out in one click.
npm package generation
Download a complete, typed TypeScript package. npm install @yourteam/motion and every component can import tokens by name.
Team roles and access
Owner, Editor, Viewer. Invite by email. Your motion system is shared but not uncontrolled - only the right people can publish.
Cursor + Claude Code

AI generates
on-brand motion
automatically

Connect Tokn as an MCP server. Every AI coding tool on your team reads your tokens and uses them - without you specifying a single value.

Connect Cursor →Connect Claude Code →
.cursor/mcp.json - connected
{
  "mcpServers": {
    "tokn": {
      "url": "https://tokn.so/mcp/acme",
      "apiKey": "tk_live_................................"
    }
  }
}
Cursor now uses your tokens automatically
Get started today

Your UI is ready to
move like it means it

Join teams who stopped guessing and started shipping consistent, intentional motion - in under 10 minutes.

Create your workspace free →View live demo

Free forever for solo - No credit card - tokn.so