framework

STUDIES 05—12 / COMPONENT MOTION

Small details.
Considered movement.

Eight finite studies. Play at actual speed, slow them down or inspect any frame. Each demonstrates a motion role; the component explorer contains the working controls.

Your system preference is always respected.

05 / 240MS

Button press

Confirm contact without shifting the label.

0 / 240ms

Paused · 0%

Transform scale: 1 → .97 → 1; label stays steady.

Try the working component
06 / 120MS

Checkbox mark

A short stroke makes selection unmistakable.

0 / 120ms

Paused · 0%

Stroke dash offset: 28 → 0; no layout movement.

Try the working component
07 / 120MS

Switch travel

The thumb connects the two stable positions.

0 / 120ms

Paused · 0%

Translate X: 0 → 16px; one continuous journey.

Try the working component
08 / 240MS

Tab indicator

A shared indicator preserves spatial context.

0 / 240ms

Paused · 0%

Translate X: 0 → 120px. Both labels stay still.

Try the working component
09 / 240MS

Accordion reveal

Content follows the disclosure, never covers it.

0 / 240ms

Paused · 0%

Height: 0 → natural height. Content occupies real space.

Try the working component
10 / 120MS

Menu arrival

A small arrival ties the surface to its trigger.

0 / 120ms

Paused · 0%

Opacity: 0 → 1; translate Y: −4px → 0.

Try the working component
11 / 120MS

Tooltip reveal

A quiet explanation arrives without stealing attention.

0 / 120ms

Paused · 0%

Opacity: 0 → 1. Trigger remains stationary.

Try the working component
12 / 480MS

Row choreography

A short stagger makes a new collection readable.

0 / 480ms

Paused · 0%

Three rows; 40ms offsets; 240ms arrivals. Never stagger routine edits.

Try the working component