Skip to content
150
motion graphics
10
kinds of motion
14
easing curves
9
ways to take it away
What it does

What Motion Studio does.

Motion makes an interface feel alive: a spinner while something loads, a headline that types itself, a button that answers the pointer, a number that counts up on a dashboard. Writing that CSS by hand means keyframes, timing and easing curves, tried and changed many times.

Motion Studio gives you 150 motions already made and playing side by side, in ten kinds. Change the colours, size, speed, text and easing on a live stage, scrub to any moment, and copy clean HTML and CSS, a React, Vue or Svelte component, or a page that plays it.

Every motion is plain CSS with no library (pointer motions add a few lines of script), and stops by itself for people whose system asks for less motion. For slides, READMEs and social posts, save it as a GIF, an MP4 or WebM video, or an SVG that animates by itself. Everything is made in your browser.

Everything plays at once

The whole library moves, so you compare by watching. Hover and click motions are pressed for you, a pointer moves over the pointer ones, and motions that play once replay by themselves.

Shape it live

Colours with palettes that go together, size, thickness, speed, stagger, text and font. The stage follows as you drag, and keeps your settings for every motion.

A stage to study it

Pause, scrub to any moment, play at a quarter of the speed, and try it on a dark, light, see-through or any coloured background.

Easing you can see

Pick from 14 curves, springs and bounces included as CSS linear(), or drag the two handles of a cubic-bezier into your own and watch a dot run it.

Code for your stack

Formatted HTML and CSS, a React component, a Vue single-file component or a Svelte 5 component, with the few lines of script a click motion needs.

GIF, video and animated SVG

Record any motion as a GIF or an MP4 or WebM video at the size and frame rate you choose, or save an SVG that animates by itself in an img tag or a README.

One motion, every format

Code for your stack, or a file

Every motion is plain HTML and CSS you can read. Take it as it is, as a component for your framework, or record it as a picture that moves wherever pictures go.

In a minute

See Motion Studio in action.

A short video of Motion Studio doing its one job, from an empty screen to the finished result.

Nothing loads from YouTube until you press play. Then Google receives your IP address and may set its own storage. Narrated with an AI-generated voice. Privacy
How it works

How to use Motion Studio in three steps.

Best for: you want a loader, a text effect, an animated background or a lively button for a site or an app, or a GIF of one for slides, a README or a post, without writing keyframes from scratch.

01

Find a motion

Browse the ten kinds or search for spinner, glitch, wave or toggle. Everything plays, so pick by watching.

02

Make it yours

Change its colours, size, speed, text and easing on the stage, and scrub to check any moment.

03

Take it away

Copy HTML and CSS, React, Vue or Svelte, or save a GIF, a video, an animated SVG or a PNG.

Course

Learn Motion Studio, from 0 to 100.

A free course of 6 short lessons, from your first minute in Motion Studio to using all of it, with a picture of every step.

Motion Studio6 lessons

Motion Studio, from zero to pro

Learn to find the right CSS animation, shape its colours, timing and easing, and take it into a website, a React, Vue or Svelte app, or a GIF, a video or an animated SVG, all without an animation library.

  • 6 lessons
  • 21 min
  • 6 of 6 with video
  • Beginner to Advanced
0 · Start6 lessons100 · Pro
Start the courseCourse overview
  1. 01Add a CSS animation to your website in two minutesBeginner3 min
  2. 02Browse and search 150 CSS animationsBeginner3 min
  3. 03Customise a CSS animation and study it on the stageBeginner4 min
  4. 04CSS easing curves explained, with springs and bouncesIntermediate4 min
  5. 05Take the code for HTML, React, Vue or SvelteIntermediate4 min
  6. 06Turn a CSS animation into a GIF, a video or an animated SVGAdvanced3 min
From the blog

Read more about Motion Studio.

Design · MotionAnimated gradient background in CSS: three ways that workA CSS gradient cannot be animated directly, so animate something around it. Move a large gradient, rotate its angle with @property, or drift blurred colours with transform, with the code and the cost of each.3 min readDesign · MotionCSS typewriter effect without JavaScriptA typing animation in pure CSS, with a blinking caret, using steps() and the ch unit. The full code, how it works line by line, its limits with long or multi-line text, and how to make it respect reduced motion and screen readers.2 min readDesign · MotionEase in vs ease out: which CSS easing to use whenThe difference between ease, ease-in, ease-out, ease-in-out and linear in CSS, which one to use for things arriving, leaving and moving, how cubic-bezier works, and how to write springs and bounces with linear().3 min readDesign · MotionHow to make a CSS loading spinner (no library, no image)A loading spinner in a few lines of HTML and CSS, explained line by line, then dots, bars and a progress sweep. With the accessibility parts most spinners forget, and when to use a spinner at all.3 min read

Every post

What's new

The latest release.

Latestv1.0.0First release

First release: 150 motion graphics, shaped live and taken away as code or a file

  • Motion Studio plays 150 ready-made motions at once, in ten kinds: loaders, text, backgrounds, buttons and hover, attention, entrances, UI feedback, shapes and SVG, charts and numbers, and pointer.
  • Open one to change its colours (with palettes that go together), size, speed, text and easing, and see the change as you drag.
  • Star the motions you like and find them under Favourites on the app bar, or copy a link that opens a motion with your settings; the motion travels in the part after #, which browsers do not send to the server.
  • Pause, drag to any moment, slow it down, and try it on a dark, light, see-through or any coloured stage. Hover and click motions are pressed for you, or you can try them yourself.
All release notes
Questions

Motion Studio questions, answered.

Do the animations need a JavaScript library?

No. Every motion is plain HTML and CSS: keyframes, transitions and a few CSS custom properties. Click motions, like the toggle switch, need three lines of script to switch a class, and pointer motions, like the 3D tilt card or the magnetic button, a short function that follows the pointer. Motion Studio writes those for you, in plain JavaScript or as a React effect, a Vue component or a Svelte action.

What happens for people who prefer reduced motion?

The CSS of every motion ends with a prefers-reduced-motion rule that turns its animation off and leaves it in its resting state: the spinner is drawn, the text is shown, the progress bar is full. That respects the setting in Windows, macOS, iOS and Android.

How do I add a loader or a text effect to my website?

Open the motion, copy the HTML where it should appear and the CSS into your stylesheet. For React, Vue or Svelte, copy the component instead. The class names start with the motion's name, so they will not clash with your own styles.

What is an easing curve?

It sets how the speed changes during a motion. Ease out starts fast and lands softly, which suits things arriving; ease in starts slowly, which suits things leaving; a spring overshoots and settles. In CSS it is a cubic-bezier() with two handles, or a linear() list of points for springs and bounces.

Can I turn a CSS animation into a GIF or a video?

Yes. The Export tab records the motion frame by frame in your browser and saves a GIF, or an MP4 or WebM video where your browser can record one, at the size and frame rate you pick. A loop is recorded for one, two or three cycles so it repeats without a jump.

Can I use these animations in commercial projects?

Yes. The motions are free to use, change and ship in personal and commercial work, with no credit needed.

Is Motion Studio made by one of the companies it names?

No. Motion Studio is independent: it is not made, endorsed or supported by Microsoft, Google, Meta or any other company whose products it works with. Product names on this page are their owners' trademarks, used only to say what it works with.

Free, no sign-up

Try Motion Studio now.

Motion Studio is a library of 150 motion graphics that all play at once: loaders, text effects, animated backgrounds, buttons, entrances, UI feedback, shapes, charts and cards that follow the pointer. Open one, make it yours, and take it away as code or as a GIF, a video or an animated SVG.

Open Motion Studio
From the same shelf

More Design tools.

Design

Icon Studio

Search nearly 50,000 free icons from eight open-source sets, style them with colour, backgrounds, shadows and motion, and export SVG, PNG, React, CSS or a Power BI measure.

About the toolOpen tool
Contact