Skip to content
UI Kit
Accent color

Micro animations

Icons that move with meaning, status symbols that draw themselves, confetti for good moments and drawings that follow the scroll.

4 components · 21 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

animated-icon

Animated icons

Sixteen icons that move with meaning when you point at them or their button. Same grid and stroke as the kit icons.

Props and details · Animated icons

Bell

The bell swings, the clapper follows a beat later. Plays on hover and on keyboard focus of the button.

Upload and download

The arrow leaves the tray and comes back from the other side. In a drop zone it runs on its own until you act.

Send

The plane leans back, takes off to the top right and lands again from the bottom left.

Like and save

Toggle buttons with a filled state. The heart beats, the star turns a fifth and settles.

All icons

The whole set as buttons. Point at one or move through them with Tab, each plays its own motion.

In a list

Icons that play on their own, with a long rest, staggered so the list never moves all at once.

status-animation

Status animations

Checks that draw themselves, an error that shakes once, three spinners, a filling ring and a live pulse. SVG and CSS only.

Props and details · Status animations

Success

The circle draws, the check follows, a small burst closes it. Plays once when it scrolls in.

Error and warning

The cross draws in two strokes and shakes once. The warning sign drops its mark in with a soft bounce.

Loading

A ring with an eased turn, three breathing dots and four bars. They stand still with reduced motion.

Progress ring

Rings fill to their value when they appear, the number counts along.

Live pulse

A dot with two soft rings for things that run right now. Calm, never in step with the next one.

Button states

A real button that walks through loading and success, then returns. The text changes are announced.

celebrate

Celebrate

Moments of joy for your page, from confetti bursts and a rain over a card to fireworks, side cannons and twinkling sparkles. One fixed layer that never widens the page, theme colors, calm with reduced motion. Fire it from code, on click or when it scrolls into view.

Props and details · Celebrate

Publish button

The button works, turns into a check and confetti bursts from it. The way to end a long task.

Open in Studio

Success card

An order confirmation that gets a gentle rain of confetti over its own box as it scrolls into view.

Open in Studio

Milestone

A number counts up to the milestone, then three shells of fireworks open above it.

Open in Studio

Launch cannons

Confetti shoots in from both lower corners of the window when the launch banner comes into view, the button fires again.

Open in Studio

Sparkles

Small stars twinkle around a word and a badge, faster on hover. The button pops a small burst of its own.

Open in Studio

scroll-drawing

Scroll drawing

A line drawing that draws itself while you scroll and undraws when you scroll back. Four drawings included, any SVG paths work.

Props and details · Scroll drawing

Blueprint

Ground line, walls, roof, door, windows and finally the dimensions, in that order.

Route

Contour lines and a river first, then the path from the start pin to the summit.

Growth line

Axes and grid, then the line, then the milestones with their labels.

Workspace

Still life of a desk, drawn object by object.

Similar components

More from Visuals, the same area of the kit.

Often combined with

Sections that usually sit next to Micro animations on a page.

Often searched

Jump to

Copied to the clipboard