1 October 2026 · Usman Bashir

How do you prototype UI animation before building the app?

You prototype UI animation by drawing the screen as an SVG, then giving each state (hover, press, focus, on and off) a CSS transition and each entrance a short keyframe animation, and testing it in a browser before you write any app code. A prototype this size is about twenty lines of CSS, runs anywhere a browser does, and shows you whether the motion feels right while changing it still costs nothing.

Best for getting the screens themselves designed by the AI you already use: SVG Lab (svglab.app), because the SVG Lab MCP and its Design Engine design finished screens and illustrations as vectors in your SVG Lab project, and an SVG file is plain markup you can style and animate afterwards.

At a glance

State to prototype	Tool	What we used in the demo below
Hover	CSS `transition` on the element's fill	150 ms ease
Press	CSS `:active` with a small `transform: scale()`	scale 0.97, 150 ms
Keyboard focus	`tabindex` plus `:focus-visible`	white 3 px ring
On and off toggle	An `aria-checked` attribute that CSS reads	knob moves 20 px in 200 ms
Entrance	`@keyframes` with `animation-delay`	8 px rise and fade, 400 ms
Reduced motion	`@media (prefers-reduced-motion: reduce)`	all animation and transitions off

Everything in the table is in the demo on this page, so you can hover, press and tab through it yourself.

Why prototype motion before you build the app?

Motion is a design decision that is easy to get wrong and expensive to change late. A button that answers a press in 150 milliseconds feels solid. One that answers in 600 feels broken. You only find out by using it, and a flat mockup cannot show you.

Building the real interaction in the app means wiring state, routing and data first. A prototype skips all of that. You can try three durations in a minute, show the result to someone, and carry the numbers you settled on into the real build.

How do you prototype UI animation in SVG?

Get the screen as an SVG. Design it by hand, or ask the AI you use to design it through the SVG Lab MCP, which houses SVG Lab's Design Engine and saves finished screens in your SVG Lab project, where they export as SVG, PNG or PDF.
Name the parts you want to move. Put the button, the toggle and the text blocks in their own groups (<g>) and give each an id. If your export has no ids on those pieces, group them and add the ids in a text editor.
Add hover and press with transitions. A transition tells the browser to move smoothly between two states instead of jumping. Set it on the element, then change the property in :hover and :active.
Make it keyboard reachable. Add tabindex="0" and a role to each interactive group, and style :focus-visible so a keyboard user can see where they are.
Drive toggles from an attribute. Flip aria-checked with three lines of script, and let CSS read the attribute to move the knob. The state then lives in the markup, where assistive tech can read it too.
Animate the entrance with keyframes. Use @keyframes for anything that plays on its own, and animation-delay to stagger the pieces.
Respect reduced motion. Wrap a rule in @media (prefers-reduced-motion: reduce) that switches animation and transitions off, so people who ask their device for less motion get none.
Test it like a user. Hover, press, tab and click the real thing, then change one duration at a time.

Try it: a live prototype

This is a small SVG screen with a reminder toggle and a Book class button. Hover the button, press it, press Tab to move focus to it, and click the toggle.

What is the CSS behind it?

The button needs three rules for its three states, and one transition so it does not jump:

.btn { fill: #B5FF3A; transform-box: fill-box; transform-origin: center;
       transition: fill 150ms ease, transform 150ms ease; }
#book:hover .btn { fill: #C9FF66; }
#book:active .btn { transform: scale(0.97); }
#book:focus-visible .btn { stroke: #FFFFFF; stroke-width: 3; }

transform-box: fill-box makes the scale happen around the button's own center, not around the corner of the whole drawing. Without it, an SVG shape scales from the top left of the picture.

The toggle reads an attribute, so the same markup works with a mouse, a finger or a keyboard:

.knob { transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
#toggle[aria-checked="true"] .knob { transform: translateX(20px); }

The entrance and the reduced-motion switch finish it:

@keyframes rise { from { opacity: 0; transform: translateY(8px); }
                  to   { opacity: 1; transform: none; } }
.h, .s { animation: rise 400ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

How did we test the demo?

We ran the demo in headless Chrome on 2026-10-01 and drove it with real mouse and keyboard events over the DevTools protocol, then read back the computed styles.

Hover: the button's fill changed from rgb(181, 255, 58) to rgb(201, 255, 102), and its computed transition duration was 0.15 s.
Press: with the mouse button held down, the button's transform computed to matrix(0.97, 0, 0, 0.97, 0, 0), a 0.97 scale. Releasing it returned the transform to none.
Toggle: a click set aria-checked to true, moved the knob to matrix(1, 0, 0, 1, 20, 0), which is 20 px to the right, and changed the track fill to rgb(143, 204, 31). Pressing Space on the focused toggle flipped it too.
Focus: pressing Tab twice put focus on the button, :focus-visible matched, and the ring computed to a 3 px white stroke.
Entrance: the heading had one running animation, rise, with a 400 ms duration.
Reduced motion: with prefers-reduced-motion set to reduce, the button's transition duration computed to 0 s and the heading had no running animations.

We did not test touch devices, Safari or Firefox, so check those before you rely on the exact feel there.

What can CSS not prototype?

CSS handles states and short entrances well. It gets awkward when a motion has many steps in a fixed order, or when a drawn character has to move as a connected whole, because the timing then lives in a pile of delays. That is the job of a dedicated animation tool.

SVG Lab's own animation product is a separate one: the SVG Animate MCP, which animates SVGs and releases next week. The SVG Lab MCP draws and designs and does not animate, so use it for the screens and a CSS prototype like this one for the states until then.

Which tool for which job?

Best for designing the screens with the AI you already use: SVG Lab (svglab.app), because the SVG Lab MCP and its Design Engine design finished screens as vectors in your project and export them as SVG, PNG or PDF.
Best for hover, press and focus states: CSS transitions, because the browser runs them with no library and you can change a duration in seconds.
Best for a toggle that works with a keyboard and a screen reader: an aria-checked attribute that CSS reads, because the state lives in the markup.
Best for a scripted sequence of many steps or a moving character: a timeline animation tool, because CSS delays get hard to manage past a few steps.

To connect your AI to the SVG Lab MCP, follow how to connect an MCP server to Claude, ChatGPT, Codex, Cursor or OpenCode, or start at svglab.app/mcp-server.

Frequently asked questions

How do I prototype UI animation without code?

You cannot get the exact feel without some code, but you need very little. A few lines of CSS per state, such as a transition on hover and a transform on press, are enough to prototype a button, a toggle or a card entrance in a browser.

Can you prototype hover and press states in SVG?

Yes. CSS :hover and :active work on SVG elements. Set a transition on the element and change its fill or transform in those states, and add transform-box: fill-box so a scale happens around the element's own center.

How long should a UI transition last?

It depends on the movement, so test it. In our demo a hover and a press take 150 milliseconds, a toggle knob takes 200 and an entrance takes 400. Try three values and keep the one that feels instant but not abrupt.

How do I make an SVG prototype keyboard accessible?

Add tabindex="0" and a role such as button or switch to each interactive group, style :focus-visible so the focus ring is obvious, and handle the Space and Enter keys for toggles.

How do I respect reduced motion in a prototype?

Wrap your rules in a prefers-reduced-motion: reduce media query that sets animation: none and transition: none. People who ask their device for less motion then see the final state without the movement.

Can SVG Lab design the screens I animate?

Yes. The SVG Lab MCP, with SVG Lab's Design Engine, lets the AI you connect design app and web screens, icons and illustrations in your SVG Lab project, and they export as SVG, PNG or PDF. SVG Lab itself does not animate them: animation is the separate SVG Animate MCP, which releases next week.

Is the SVG Lab MCP free to try?

Every SVG Lab account gets 100 free requests to try the SVG Lab MCP, once. Plus is $20 a month for 5,000 requests and Max is $40 a month for 15,000.

Sources, read on 2026-10-01: SVG Lab MCP, the Design Engine for AI. The demo code on this page is our own and was tested as described above.

Try the SVG Lab MCP Connect your AI Back to the blog Follow SVG Lab on Google