moveset

On the entry page, a landing page scrolls down inside a small browser window, then back up: a Features heading over a grid of twelve feature cards, each with an icon, a title and one line of text. Cards already in view are simply there. Each card below fades in and rises 14px the first time it is 15% in view, cards entering together start a moment apart, and on the way back up every card stays where it is. The index card is a wireframe of the same page: grey tiles with two bars each, no text.

On the entry page, an article scrolls down and back up inside a small browser window: a title, a byline, two real opening sentences, bars for the rest of the body, and a captioned figure part way down. A thin bar across the top grows with the scroll position and shrinks again on the way up. The controls switch the effect to the figure, which fades or scales, and measure progress over the whole page or over the figure while it is in view. The index card is a wireframe of the same article: bars for every line, a blank figure, no text.

On the entry page, a product landing page scrolls down and back up inside a small browser window. The hero at the top, an image block with a headline and a line under it, drifts up at a fraction of the scroll speed while a card in front, with a title, three rows of icons and text and bars for the rest, scrolls at full speed and slides over it. The controls change how fast the hero moves and add a second, slower image block behind it. The index card is a wireframe of the same page: two solid blocks and a panel of bars.

On the entry page, a contact list scrolls inside a small browser window: letter headers A to E over rows of names from computing history, each with a round initials avatar. Each letter header pins to the top while its section passes underneath, then the next header pushes it away. With a top offset, a Contacts bar stays pinned above the headers. The index card is a wireframe of the same list: a dot and a bar for each row.

On the entry page, five onboarding screens of a mobile app inside a small browser window, each one screen tall with an icon, a title and one line of text, and a small 1 / 5 counter at the bottom: Welcome, Notifications, Invite your team, Privacy, All set. Each scroll starts as a small nudge, then the page settles exactly on the next screen, never between two. With proximity, one slow scroll stops halfway and stays. The controls switch between mandatory and proximity, and between aligning screens at the top or in the middle. The index card is a wireframe of the same page: five numbered panels.

On the entry page, an Options button is pressed and a user menu opens below it: Dashboard, Billing, Settings and Log out, each with an icon, the first row highlighted. The menu grows from 95% size and fades in from the corner next to the button, fast at first and then settling. It holds, then closes a little faster. With a comparison picked, a second menu opens beside it at the same instant with the CSS ease-out keyword, ease-in or linear, each under its curve name. The index card is a wireframe of the same button and menu: bars for the words, no text.

On the entry page, a row of three kanban cards, each a column tag over a title: Design, Write the brief; Build, Ship the sidebar; Review, Review the demos. The first card slides to the end while the other two shift over, slow at the start, fast in the middle and slow at the end. It holds, then moves back. With a comparison picked, a twin row below makes the same move at the same instant with the CSS ease-in-out keyword, ease-out or linear, each row under its curve name. The index card is a wireframe of the same three cards: a square and a bar each.

A card sits at the left end of a track. It springs toward the right end and, partway there, is sent back: it keeps its speed for a moment, slows, turns and settles at the start without stopping dead. On the entry page, holding the card sends it toward the other end, and letting go at any moment sends it back from wherever it is. With a comparison picked, a twin card below makes the same moves on a fixed ease-out curve and reverses at full speed.

On the entry page, a task app's sidebar: six rows with an icon and a label, Inbox, Today, Upcoming, Projects, Archive and Settings, the first one highlighted as the current one. The rows leave together, quickly, then come back one after another: each fades in, rises 8px and sharpens from a slight blur, a fixed step after the one before. They hold, then the loop repeats. The order can run top down, bottom up or from the middle out. With a comparison picked, a twin sidebar beside it enters all at once at the same instant. The index card is a wireframe of the same list: six small cards with a square and a bar each.

Three identical frames side by side, labelled 150ms, 300ms and 500ms. In each, on the entry page, the same user menu (Dashboard, Billing, Settings, Log out) opens under an Options button at the same instant on the same curve, so the 150ms one lands first and the 500ms one last; under each, a verdict says whether that duration suits the element. They hold, then close about 25% faster. Holding a frame opens that one element at its duration, and letting go closes it at its exit duration. With a mouse, the tooltip (Bold, ⌘B, over a toolbar button) opens when the pointer moves onto the button and closes when it moves away; on touch it is held like the others. Switching to the tooltip or to a share sheet (Copy link, Send to…) changes the element and the verdicts: 150ms is right for a tooltip and abrupt for a sheet. The index card is a wireframe of the same three frames and the same motion: bars for the words, no text.

A chip sits in an empty slot at the far end of a track. It slides back to the start, plain and quick, then slides into the slot again, travels slightly past it and settles back in place. The amount runs from none to 15%, from a back curve or a spring. With a comparison picked, a twin chip below makes the same move on plain ease-out and stops at the slot without passing it.

On the entry page, a message draft (To: Ada Lovelace, a line of text) sits over a Send button, and a Message sent toast with a check and a Dismiss button rests at the bottom edge of the frame. The toast fades out with a nudge of a few pixels toward the edge, quick and quiet; a beat later it enters again: it fades in while rising 16px into place over 200ms, then holds. Beside the frame, the two sets of numbers: the enter and the exit. Pressing Send plays the enter and the Dismiss button on the toast plays the exit. With the Mirrored exit the toast slides the full 16px back down at the enter duration; with None it disappears in one frame. The index card is a wireframe of the same frame: bars and a pill for the draft, a dot and a bar on the toast, no text.

On the entry page, a row holds the thing the button acts on and the icon button at its end: an install command (npm install motion) with a copy button, a podcast episode with a play button, or a post with a heart. The icon shrinks deep, fades and blurs away while the other grows into its place, sharp and settled within 300ms; it holds, then swaps back the same way. Beside the frame, the values of the swap. The button is real: pressing it swaps the icon and reports the state (the copy button announces Copied and reverts after 1.5 seconds). The pair can be copy to check, play to pause or an outline heart filling in; the depth runs from the house 0.3 to a timid 0.8 to no scale at all, and the blur can be switched off. The index card is a wireframe of the same row: two bars and the button, no text.

On the entry page, a pill-shaped Send button sits in a frame above a text editor's formatting toolbar, a pill of five round buttons: Bold, Italic, Underline, Strikethrough and Link. A caption under each says its rule: the button scales to 0.97, the toolbar changes colour only, never scale. The Send button is pressed: it scales down to 0.97 over 150ms on an ease-out curve, holds, and glides back when released; the toolbar never moves. Under the frame, the amount and the transition. The buttons are real: pressing and holding Send, with a mouse, a finger or Space, scales it, and letting go glides it back from wherever it has got to; pressing a toolbar button changes its colour and nothing else. The amount can be set to 0.95, the floor, or 0.90, which reads as cartoon, and the release can be made to snap, the common mistake. The index card is a wireframe of the same layout and motion: a bar for the label, a dot for each icon, no captions inside the frame.

On the entry page, a notification toast (a mail icon, New message from Ada, and a Dismiss button) rests at the bottom of a page frame. It is dragged slowly to a quarter of its width and let go: it springs back. Then it is flicked a short way, fast: it flies off the side on a spring that keeps the speed of the flick, and after a beat a new toast enters and rests. Beside the frame, the rule: past a third of the width or 0.1 pixels per millisecond, on a spring. The toast is real: drag it with a mouse or a finger and it follows 1:1, with the distance and speed read out under the frame; let go and it leaves or comes back; the Dismiss button on it does the same exit from the keyboard. With distance only, the flick springs back; with a fixed ease-out, the exit ignores the speed of the flick. The index card is a wireframe of the same frame: a dot and a bar on the toast, no text.