compose-preview Material 3 Design Kit

Motion

Every recorded interaction and animation this catalog publishes, grouped by component and set side by side — so a transition that is shaped differently from its neighbours is visible without opening each component in turn. 5 recordings across 5 components.

report a catalog issue
Applied as a parity: label, so the catalog’s issue index can tell a difference that is ours from one that is not. Leave it on needs investigating if you are not sure — that is what it is for.Files against yschimke/m3-catalog — the project whose code declares this motion browser, not the preview server. The rest of the report — what you were looking at, which build, the links — is filled in for you on GitHub.
Theme Nothing plays until you ask it to. Press a card to run one recording, or open a component to scrub it frame by frame.

Actions

Icon Button Filled

Press and hold. Expressive animates the container into its pressed shape and holds it there for the duration of the press; Baseline leaves the container static.

Press and hold Interaction

Toggle Button Filled

Toggle repeatedly. The container morphs between its unchecked and checked shapes through the theme's spatial animation — Baseline swaps the shape, Expressive travels between them.

Toggle repeatedly Interaction

Navigation

Navigation Rail Wide

Change destinations. The indicator travels while the item's label and icon cross-fade — the two run on different specs, which is only visible when they move together.

Change destinations Interaction

Selection

Switch On

Toggle quickly. The thumb's travel resolves through Expressive's FastSpatial motion spec — fast enough to feel immediate, still springy enough to overshoot slightly on arrival.

Toggle quickly Interaction

Report a problem

Two trackers — pick whichever owns the thing that is wrong.