A professional animation studio in your browser. Canvas, timeline, keyframes, bezier curves — and production-ready CSS, React, Vue or Tailwind out the other end.
Built for designers who think in canvases and engineers who ship CSS.
Infinite pan & zoom, marquee select, smart guides, snap-to-artboard, drag / resize / rotate handles.
Per-property tracks, keyframe diamonds, draggable playhead, loop, speed control and frame stepping.
Every easing from linear to spring. Drag bezier handles and watch the curve — and your animation — update live.
CSS, SCSS, Tailwind, React, Vue, Svelte, Angular, styled-components, Emotion, Web Component, HTML.
Bounce, Elastic, Glitch, Neon Flicker, Wipes, Iris, Draw Line, Orbit… applied at the playhead as real keyframes.
Groups hold groups, to any depth, and each one animates in its own right. They export as nested markup so transforms cascade exactly as designed.
Draw-on line animations via stroke-dashoffset, plus offset-path so any element can travel a curve.
Eight clip-path shapes and gradient masks with animatable parameters — wipes, irises and curtains in pure CSS.
Define design tokens, bind colours to them, and exports emit a :root block with var() references.
Run the generated CSS in a real sandboxed viewport at phone, tablet, laptop or custom size.
⌘K fuzzy-searches every layer, preset, property and command. Never hunt through a panel again.
Output leans on transform and opacity, adds will-change, and never animates layout when it can help it.
One-click prefers-reduced-motion guard and WCAG 2.3.1 flash warnings baked into the inspector.
Full layer tree with lock/hide, unlimited undo/redo, and autosave to your browser — nothing leaves your machine.
Every drag, every keyframe, every curve becomes clean @keyframes — with per-segment timing functions, baked spring physics, and an automatic reduced-motion guard. Copy it, or export straight to React, Vue, Svelte, Angular, Tailwind, styled-components and more.
.hero-card {
width: 260px;
height: 170px;
background: #1c1e2a;
border-radius: 20px;
animation: hero-card-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes hero-card-anim {
0% {
transform: translate3d(0, 46px, 0) scale(0.92, 0.92);
opacity: 0;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
58.33% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-card { animation: none; }
}Entrances, exits, attention-seekers and effects — applied to your element at the playhead, fully editable afterwards.
| MotionCraft | Hand-written CSS | JS animation libs | |
|---|---|---|---|
| Visual timeline editing | Some | ||
| Zero runtime dependency | |||
| Spring & bounce physics in CSS | By hand | ||
| Production-ready output | Depends | ||
| Reduced-motion handling | Manual | Manual | |
| Works without code | |||
| Free, local, no account | Varies |
“I stopped hand-tuning cubic-beziers in devtools. I drag the curve, copy the CSS, done.”
“The exports are actually clean. Keyframes I would happily merge without a second look.”
“Finally a motion tool where handing off means pressing one button, not writing a spec.”
Placeholder testimonials — MotionCraft is brand new.
Free, no account, no server. Everything runs and stays in your browser — your scenes autosave to localStorage. A future Pro tier may add cloud sharing and team features, but the editor stays free.
Nowhere. MotionCraft has no backend. Your work is saved locally in your browser and exported files download straight to your machine.
Yes. It favors transform/opacity, includes per-segment timing functions, bakes physics-based easings into keyframes, and can wrap everything in a prefers-reduced-motion guard.
CSS timing functions can’t express oscillation, so MotionCraft samples the physics curve and bakes it into intermediate keyframes — identical motion, zero JavaScript.
Absolutely. Everything you create and export is yours, no attribution required.
Every shape is built from interpolatable numbers — inset percentages, circle radii, polygon points — so the browser can tween between them. Masks are gradients whose stops move, which produces wipes and irises with no JavaScript.
The architecture was designed with these in mind — exporters are pluggable modules. They’re on the roadmap.