NEWMulti-track timeline · Code exports · Live collab

Motion that
ships itself.

motioner is a motion design tool built for product teams. Animate in the browser, version it like code, render in the cloud, and ship to production without a handoff document.

No credit card Mac · Windows · Linux · Web Figma + After Effects import Free for teams under 5
onboarding-v4.jam
live · 3 editors120fpsmain

Layers +

Hero / accent2.4s
Headline → reveal0.6s
Avatar pulse
BG / gradient12s
Cursor parallax
Subhead → fade-up0.4s
CTA pill0.3s
Confetti burst1.8s
Frame guides
Hero / desktop1440×900
Build motion faster.
0s1s2s3s4s5s
headline · reveal
cta
Transform
X0 px
Y−24 px
Scale1.000
Rotate−1.2°
Easing — out / quint
Dur600 ms
Delay120 ms
Color
SHIP MOTION TO PRODUCTION120 FPS REAL-TIME PREVIEWFIGMA · AFTER EFFECTS · LOTTIEEXPORT REACT · SWIFTUI · CSS · GIF · MP4CLOUD RENDER IN UNDER 60sMULTIPLAYER BY DEFAULTSHIP MOTION TO PRODUCTION120 FPS REAL-TIME PREVIEWFIGMA · AFTER EFFECTS · LOTTIEEXPORT REACT · SWIFTUI · CSS · GIF · MP4CLOUD RENDER IN UNDER 60sMULTIPLAYER BY DEFAULT
One canvas

Prompt it. Design it. Publish it.

F+T
Wireframer
Design three landing pages for a modern motion design studio.
Motioner
I generated three dark-mode directions for your studio: a main landing page, a creative-led showcase, and a case-study spread. Each shares typography and easing tokens so you can mix layouts without breaking the system.
3 frames1440 × 900typography · Geisttokens · 14
Landing Page 01 · main
Modern studio
design.

Distinct visuals.
Lasting impact.

Get Started
Landing Page 02 · showcase
Design
Ideas
Grow.
Landing Page 03 · case
Case 04 —
heliograph

A rebrand told in 24 frames per second.

FT
Hero · Section
Build motion that ships.
Card · 01
Tokens, named.
Card · 02
Spec is the file.
CTA · pill
Start free →
Footer · Section
Shipped in 03.2 “Aurora”.
F
All postsPublished · 24Drafts · 6EN · DE · JP · FR
Title
Author
Status
Updated
Locale
Aurora — what shipped in v3.2
M. Vidal
published
2m ago
EN · DE
A motion budget for product teams
R. Okafor
published
1h ago
EN
Easing tokens, finally
J. Lee
draft
3h ago
EN · JP
Render queue, explained
S. Park
published
yesterday
EN · DE · FR
Designing for 120fps
A. Holmberg
draft
2d ago
EN
Why your fan keeps spinning
M. Vidal
published
5d ago
EN · JP
baseform.framer.website

Open in Framer
Click to edit · Changes are auto-saved
✓ Finish Editing
Used in production at —
The product

A timeline you'll actually finish.

Three things motion tools usually get wrong: keyframes that drift, easing you can't reuse, and renders that take a coffee break. We rebuilt all three from scratch.

01 / Keyframes

Snap to intent, not to grid.

Smart keyframes infer rhythm from neighbours and stay locked when you change duration. No more conforming a four-second sequence by hand.

02 / Easing

Curves you can name and reuse.

Save any bezier as a token, share it across files, version it with git. Designers and engineers reach for the same curve from a single source of truth.

03 / Render

Cloud renders in seconds.

A 30-second 4K MP4 renders in 12s on shared infra, 4s on dedicated. Queue is fair, transparent, and cancellable. No more local fans spinning.

hero-loop · 4K MP4100%
badge-pulse · WebM72%
empty-state · Lottie34%
cursor-parallax · GIF8%
Workflow · easing

Bezier as a design token.

Pick a curve, name it, and it follows your work everywhere — Figma plugin, codebase, render farm. No more screenshotting handles.

Reusable

Curves with names.

Stop nudging handles in every file. Promote any bezier to a token and reach for it by name from your timeline, your design system, or your code.

  • Library of 32 vetted presets
    Curated by motion engineers from Stripe, Linear, and Vercel — cleared for production.
  • One-line export to code
    Spit out CSS cubic-bezier(), Framer Motion configs, or SwiftUI .timingCurve().
  • Versioned with your design system
    Curves live in git. Diff them. PR them. Roll them back. They're tokens like everything else.
/easing/snap-out · committed 2m ago
VisualBezierSpring
Control points
0.221.000.320.92
Presets
linearsoftsnap-outoverspring
Code
cubic-bezier(.22,1,.32,.92)
Workflow · render

Stop waiting for renders.

Your laptop fan is not a render farm. Push to the cloud and reclaim about an hour a day. Free tier covers your first thousand seconds.

Render queue
5 rendering · avg 8.4s
hero-loop / 1440×900
4K MP4 · H.265 · 30s
12.0s
done
empty-state / mobile
Lottie · 60fps · 4s
2.1s
rendering
cursor-parallax / web
WebM · 120fps · 6s
4.4s
rendering
badge-pulse / icon-set
SVG sprite · 16-state
7.8s
queued
onboarding / steps 1–4
React export · 24s
11.0s
queued
Cloud render

Push it. Walk away.

Renders run on shared GPU infra by default and dedicated nodes on Pro. The queue is fair, transparent, and cancellable — no more checking on a fan that won't stop spinning.

  • 10× faster than local
    Median render is 8.4s for a 30s 4K clip — including upload.
  • Every format you'll ship
    MP4, WebM, GIF, Lottie JSON, SVG sprite, PNG sequence, React/SwiftUI/CSS.
  • 1,000 free seconds / month
    After that, $0.04 / render-second on shared, $0.12 on dedicated.

motioner.

Built for

The work that used to stall.

Motion isn't a polish phase. It's the difference between a competent product and one that feels alive. We built the tool we wished we'd had.

For designers

→ 01
Animate real components, not symbols.

Drop in a React, Vue, or Figma component and animate its props directly. No stub, no mocking layer.

→ 02
Multiplayer like a doc.

Cursors, comments, suggested keyframes — all live. PRs not required for a tweak.

→ 03
Spec is the file.

Engineers don't read your handoff. They consume your timeline directly through our SDK.

→ 04
Import what you have.

After Effects, Lottie, Rive, ProtoPie. We open them all, in seconds, with surprising fidelity.

For engineers

→ 01
Export to your stack.

React, Framer Motion, SwiftUI, Compose, CSS, Lottie. Output is idiomatic — like a teammate wrote it.

→ 02
Diffable in git.

Files are plain JSON. Reviewable, mergeable, blameable. CI can lint motion the same as code.

→ 03
Performance budgets.

Set a paint-time ceiling per component. The editor warns when a designer blows it.

→ 04
SDK, CLI, REST.

Render in CI. Pull approved tokens at build time. Treat motion like config.

By the numbers

A tiny team.
A serious tool.

Twenty-two people in three time zones. We ship every Friday and answer support before lunch the next day.

Median render
8.4s
For a 30-second 4K MP4, including upload, on shared infra.
Frames / second
120
Real-time preview on any laptop made in the last four years.
Time-to-first-export
3min
From new account to a working MP4 in your inbox. Median, not average.
Studios shipping daily
1,200+
Including teams at Linear, Notion, Replit, and a polite chunk of YC.
Pricing

Honest tiers. No seat games.

Start free, forever. Upgrade when you need cloud render minutes or SSO. No per-collaborator gotchas.

Free
$0/ forever
For solo designers, students, and weekends.
  • Unlimited local files
  • 1,000 cloud render seconds / mo
  • Real-time preview at 120fps
  • Export to MP4, GIF, Lottie
  • Community support
Get started
Most loved
Pro
$18/ editor / mo
For product teams shipping motion in production.
  • Everything in Free
  • 10,000 render seconds / mo
  • Multiplayer + comments
  • Code export (React, SwiftUI, Compose)
  • Figma + AE + Lottie import
  • Priority support · 4h SLA
Start 14-day trial
Studio
Custom
For larger orgs, agencies, regulated industries.
  • Everything in Pro
  • Dedicated render nodes
  • SSO · SCIM · audit log
  • EU-hosted infrastructure
  • Solutions engineer + Slack channel
  • SOC 2 Type II + DPA
Talk to sales
FAQ

Things people always ask.

If we missed something, our docs are searchable and our team replies within four hours during weekdays.

01Is motioner a Figma plugin or its own app?+
It's its own app — Mac, Windows, Linux, and a web build that's frame-for-frame the same. We do ship a Figma plugin that imports component trees and exports back motion tokens, but the editor stands alone.
02Can I import After Effects projects?+
Yes. We open .aep directly and convert most expressions, masks, and shape layers. Anything we can't translate is flagged with a non-blocking warning so you can fix it by hand or skip the layer.
03How does code export actually work?+
Each timeline compiles to your target framework. Pick React + Framer Motion, SwiftUI, Jetpack Compose, or vanilla CSS keyframes; we generate idiomatic, formatted code with named tokens. A CLI lets you re-export on every commit.
04What about offline editing?+
Fully offline. Files are local-first JSON; multiplayer kicks in when you're online and merges cleanly. You can ship motion from a plane.
05Do you support self-hosted render?+
On Studio, yes — we ship a Helm chart and a Terraform module. Render nodes run on your cluster, your VPC, your spend.
06What if I want to stop using motioner?+
Files are plain JSON — yours, forever. Export everything to Lottie or raw frames with one command. We don't lock motion behind our format.

Make motion.
Make noise.

Free for teams under five, forever. Pull the trigger; you can decide on pricing later.