Open source
Open source

Motion. Production-grade animation for the web.

A tiny, fast, hybrid-engine animation library for React, JavaScript and Vue.

Get startedExamples
React
JavaScript
Vue
Motion 12.42.2
01 · The library

Animations that move.

01 / Free

Completely free

Open source and MIT licensed — used by Framer and Figma in production.

03 / Hybrid engine

Hardware accelerated

JavaScript and hardware-accelerated animations from one hybrid engine.

05 / Tiny footprint

Up to 90% smaller

APIs up to 90% smaller than their nearest alternative.

index.tsxCopy
import { animate } from "motion"

animate(".box", { x: 100 }, {
  type: "spring", stiffness: 300
})  // springs, layout, scroll, gestures
02 · Controls

Copy, paste, ship.

Motion+ Get started Docs Disabled React Vue
S A B C D F
SEARCH DOCS FOCUSED FIELD

Controls are strictly SQUARE (0px radius), 48px tall, set in Geist Mono 11px uppercase: primary is black #080b08, the pop is yellow #fbd509. Saturated colour lives only in the tier-grade chips and the focus ring is mint #8df0cc.

03 · Type

Two voices, nothing between.

Hero · TASA Orbiter · 44/46 · 700 · -0.04emProduction-grade
Section · TASA Orbiter · 40 · 700 · -1.4pxAnimations that move.
Feature · TASA Orbiter · 23 · 700Spring physics
Kicker · Geist Mono · 11 · +.14em · UPPER01 / Production ready
Button / nav · Geist Mono · 11 · UPPERDocs · Examples · AI Kit
Code · Geist Mono · 11/22 · 400animate(".box")
Body · TASA Orbiter · 16/24 · 400A tiny, fast, hybrid-engine animation library.
04 · Palette

Yellow act, dark act.

Hero band
yellow#fbd509
yellow-hi#ffdb2a
ink#080b08
Dark body
background#0d1111
background-2#0e1312
layer#13181a
layer-alt#141a18
deep#060607
border#1e2427
code-bg#111112
code-border#1e1e20
Text & accents
fg#ededec
fg-alt#edebe5
feint#7a8180
accent#e8eeee
mint#8df0cc
periwinkle#a5b4fc
Tier grades
tier-S#ffd60a
tier-A#34d399
tier-B#60a5fa
tier-C#a78bfa
tier-D#e879f9
tier-F#f43f5e
05 · Depth & motion

Square. Striped. Animated.

0px button
0px card
0px chip

Radius is 0 everywhere. Depth is surface-colour steps (#0d1111 → #13181a → #080b08), the 119deg diagonal dossier stripe and 1px #1e2427 hairlines — no drop shadows. The page animates itself with Motion: springs, layout, scroll and gesture demos on load and hover.