Motion in practice

The vocabulary, in real dashboards

Three fully interactive product surfaces, built from the same terms. Each motion is labeled where it happens — toggle Annotate off for the clean product view, or hit Replay to watch it load again. Tap any label to jump to that term.

Interact with everything — hover, drag, swipe, play. See each term solo on the Vocabulary page.

01

Analytics dashboard

The home screen of a SaaS app. Watch it load: a skeleton shimmers, then cards stagger in while their numbers count up, the revenue line draws itself, and bars spring up from the baseline.

Overview

Welcome back — here's your month.

Live
02

Music player

Ambient, continuous motion that makes an app feel alive. The grid staggers in, album art floats, the equalizer yoyos, the title marquees, you can drag the scrubber, and the now-playing bar morphs into a full panel.

Made for you

Fresh picks based on your week.

Midnight DriveNeon CoastMidnight DriveNeon Coast
03

Mail client

Dense, list-driven UI where motion aids orientation. The list staggers in, swipe a message left to archive it, selecting one slides the reading pane in the right direction, and composing scales a dialog up before a toast slides in.

Inbox
Riya Mehta

Q3 launch plan

Stripe

Your payout is on the way

Dev Patel

Re: design tokens

Figma

3 new comments

Lena Ortiz

Lunch next week?

Q3 launch plan

Riya Mehta

to me · just now

Sharing the updated timeline — can you review the rollout section before Friday?