Skip to content
Slow abstract light forms on a dark ground

Motion design, shipped as code

Ship the version that moves.

Design transitions, micro-interactions and page choreography in the browser, on your real components. Export tokens and code your engineers merge without a meeting.

Start freeSee it move
Trusted by teams at NorthbankLumenKestrelMeridianAuroraHollow PineFoundryHarbour
2,400+
Product teams
38%
Faster from design to merge
4
Platforms, one source
99.98%
Uptime, last twelve months

Motion is the last thing designed and the first thing cut.

Every product team has the same folder: a prototype that felt right, a spec that tried to describe it, and a shipped screen that does something else. Kinetic closes the gap. You design the motion on the real component, with the real data, in the browser. It becomes a token set and a pull request. The engineer reviews a diff, not a video.

  • Design on your components, not a copy of them: connect a repo or a design system and go.
  • One motion source for React, iOS, Android and Flutter, with the easing math done once.
  • A review step built for motion: play it, scrub it, comment on a frame, approve.
How it works
01What it does

Everything between the prototype and the merge

Featured

Timeline on real components

Choreograph enters, exits and state changes on the actual component tree. Scrub, ease, stagger; nothing is a mock.

Motion tokens

Durations, easings and springs as a token set that lives beside your colour and type tokens.

Code export

Framer Motion, SwiftUI, Compose and Flutter from one source. Idiomatic, reviewed, diffable.

Review

Play it, scrub it, comment on a frame. Approve from the pull request.

Performance budget

Every animation graded on the main thread before it ships. Jank is a failing check, not a Slack thread.

Reduced motion, built in

Every sequence carries its reduced-motion twin. Accessibility is a toggle in the editor, not a ticket.

02See it move

A checkout flow, choreographed in four steps

Click through a real session. Nothing here is a video.

Kinetic: Motion overview

Point it at the component

Connect the repo. Kinetic reads the component tree and renders it live with your data.

Start free
03The export

What the engineer merges

CheckoutTotal.tsxtsx
import { motion } from 'framer-motion';
import { tokens } from '@/motion/tokens';

export function CheckoutTotal({ amount }: { amount: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={tokens.enter.soft}   // 320ms, ease-out-quart
    >
      <Amount value={amount} spring={tokens.spring.settle} />
    </motion.div>
  );
}

Generated from the timeline above. Tokens resolve from the same file the design system reads.

04Why it matters

Three things that stop happening

  1. 1The video

    The handoff video

    A screen recording of a prototype is not a spec. Engineers guess the easing, the designer says it feels wrong, and the loop runs three times. With a token and a diff, it runs once.

    Kinetic: Timeline · Checkout flow
  2. 2The drift

    Four platforms, four feels

    iOS springs, Android tweens, the web does whatever the last engineer preferred. One motion source, compiled per platform, and the product feels like one product.

    Kinetic: Handoff · iOS
  3. 3The jank

    The animation that ships slow

    A transition that dropped frames on a mid-range phone used to be found in a review, or by a customer. Now it fails a check in the pull request.

    Kinetic: Motion analytics
05Who it is for

Built for the three people in the loop

Design

Product designers

Design motion where it will live, on the real component, and stop describing it in words.

Engineering

Front-end engineers

Review a diff, not a video. Tokens you can grep, code you would have written, a performance check in CI.

Platform

Design-system teams

Motion tokens beside the colour and type tokens, versioned, documented, and enforced across four platforms.

06Pricing

Free until it is not

Per editor, per month. Viewers and reviewers are always free.

Free

For a side project or a first team

$0
forever
  • Up to 3 editors
  • 1 project
  • Web export
  • Community support
  • iOS, Android, Flutter export
  • Performance checks in CI
Start free
Most teams

Team

For a product team shipping weekly

$24
per editor, per month
  • Unlimited editors and projects
  • All four platforms
  • Performance checks in CI
  • Review from the pull request
  • SSO
  • Audit log and SCIM
Start a 14-day trial

Enterprise

For the design-system team

Custom
billed annually
  • Everything in Team
  • SSO, SCIM, audit log
  • Private motion token registry
  • Dedicated support, 4-hour response
  • On-premise export runner
Talk to sales

Prices in USD. Non-profits and education get Team free; email us from the domain.

07Wall of love

What teams say

“Our handoff video folder has 212 files in it. Nothing has been added since March.”
P
Priya N.
Design lead · Northbank
“First tool where the engineer said "yes, I would have written this". Then merged it.”
T
Tom H.
Staff engineer · Lumen
“The performance check caught a 40fps transition on a Pixel 4a before a single customer saw it.”
D
Dana R.
Mobile lead · Kestrel
“Motion tokens next to colour tokens. Obvious in hindsight; nobody had done it.”
Y
Yusuf A.
Design systems · Meridian
“We went from four feels to one. Our iOS app finally moves like our web app.”
C
Claire V.
VP Product · Aurora
“Reduced-motion twins for free. Our accessibility audit went from a week to an afternoon.”
B
Ben O.
Accessibility · Foundry
Security

Boring, on purpose

  • SOC 2 Type II
  • GDPR
  • SSO and SCIM
  • Your code stays yours

Full security documentation and a pen-test summary are available under NDA.

08Start

Free for three editors, forever

No card needed

Free plan

  • No card, no trial clock
  • Web export included
  • Upgrade when the team does
Start freeBook a demo

The free plan does not expire. Team is a fourteen-day trial with no card, and we email before it ends.

09Questions

Before you connect a repo

Does it need access to our source code?+

Read access to the component files you point it at, through your own CI runner. Kinetic renders components in your environment and never stores source.

Which frameworks?+

React (Framer Motion, CSS and Web Animations), SwiftUI, Jetpack Compose and Flutter. Vue and Svelte are on the roadmap.

Can designers use it without engineers?+

Yes, against a connected design system or a hosted component library. The pull request step is optional; the tokens and the review are not.

What happens to our existing animations?+

Kinetic imports Framer Motion, CSS keyframes and Lottie, turns them into timelines and tokens, and flags the ones that fail the performance budget.

Free for small teams

Ship the version that moves.

Free for up to three editors and one project. No card, no trial clock, and the motion you make is yours in code from day one.

Start freeBook a demo
React, iOS, Android and Flutter. SOC 2 Type II.