Design in motion.
Now with AI.

A fast and simple motion design tool on the web. Animate anything, export everywhere.

Try for free Browse templates
00:0000:04Spring · overshoot 1.5182
Square
Circle
Triangle
Components

Cards that change shape

Animate anything

Drop in a Figma frame and Jitter keeps every layer editable.

Templates

Hundreds of ready-made reels, ads and product loops.

Export everywhere

MP4, GIF, WebM, Lottie — sized for every placement.

Product launch · 9:16
Story ad · 9:16
Banner loop · 16:9
UI reveal · 1:1
Controls

Monochrome chrome

Primary 52px Primary hover Light Light hover Outline Outline hover Ghost Disabled
Field position · 52px control height · pill radius · 1px #e5e4e7 hairline — default and focus
⌘K
⌘K
Free plan Pro New · AI AllSocialAdsProduct

Chrome is strictly monochrome — the CTA is a 52px dark pill with a TWK Lausanne 18/18 label at 600/-0.36px, and the pigment palette never touches a button, nav item or hairline. Hover is a spring scale, and cards additionally animate border-radius alongside box-shadow at 0.5s, so they visibly change shape as they lift.

No text field is documented anywhere in the spec — section 4 lists only the CTA, nav link, feature card, template tile, rounded section, help bubble and hairline — and section 11 records “Focus: not captured”. The pair above is therefore composed, not measured. It borrows only captured values: the 52px control height and the pill radius of the primary CTA, the 1px #e5e4e7 hairline on the #ffffff canvas, Inter 16/24 at -0.32px for the value, #19171c ink for typed text and #d7d7db (faint-2), whose documented role is placeholder. The focus state is derived rather than observed: the captured hairline steps to the captured #19171c ink and the captured fractional-px ambient stack lifts the row, following the site’s shadow-over-border philosophy. Both states ease on the linear() spring at 0.3s.

Typography

Set below its own line

Hero h1 · TWK Lausanne · 115/103.5 (0.90) · 800 · -3.6pxDesign in motion. Now with AI.
Card h3 · TWK Lausanne · 24/22.8 (0.95) · 800 · -0.48pxAnimate anything
Button label · TWK Lausanne · 18/18 (1.00) · 600 · -0.36pxTry for free
Lead / h2 · Inter · 20/30 · 400 · -0.4pxA fast and simple motion design tool on the web.
Nav link · Inter · 16/24 · 600 · -0.352pxProduct · Customers · Templates · Pricing
Body · Inter · 16/24 · 400 · -0.32pxDrop in a Figma frame and Jitter keeps every layer editable.
Small / caption · Inter · 12/16.8 · 400 · normalProduct launch · 9:16

TWK Lausanne handles anything display or interactive; Inter handles anything read. Every Lausanne role sets a line-height below its own font size — 0.90 at the hero, 0.95 at card titles — which is what makes headlines stack tighter than they are tall. Tracking is negative on every role except the 12px caption, and nothing is uppercase.

Palette

Grey chrome, pigment artboards

Text
ink#19171c
muted#6e6e73
faint#97979b
faint-2#d7d7db
purple-ink#17082c
inverse#ffffff
Surfaces & borders
canvas#ffffff
surface-1#f2f1f3
surface-2#f3f3f5
surface-3 / border#e5e4e7
dark#19171c
lavender card#cab3f8
lavender pale#f2ecfd
blue pale#e6f4ff
Pigment — artboards and templates only
cyan#01b2fd
lavender-bright#a981ff
yellow#f5ff63
violet#7a40ed
Depth & motion

A spring in CSS

20px tile
40px card
50px section
375px mask
0 0 80px 80px
0 50px 50px 0
50% bubble
ambient · 5 layers, ink-tinted, top layer transparent
generated variant · fractional px
1px #e5e4e7 — used twice on the page
surface step — the usual separator

linear(0 0%, .255 1%, .4449 2%, .6018 3%, .7355 4%, .8513 5%, .9525 6%, 1.0413 7%, … 1.5182 20%, … 1.0012 95%, 1 99%, 1 100%)

The house easing is a spring published as a linear() stop list — roughly sixty stops that overshoot to 1.5182 around 20% before settling — applied to transform, color and border at 0.3s. Alongside it: transform 1.2s cubic-bezier(.19,1,.22,1) for section reveals, border-radius + box-shadow 0.5s cubic-bezier(.25,.46,.45,.94), and background-color 0.3s linear. Shadows are tinted with the ink, rgba(25,23,28,…), never black.