Motion & Interaction

The interaction details that make a build feel finished.

A live library of the micro-interactions Studio Practice builds into product and web work: opens and closes, success moments, hover physics, page transitions. Hover, click, and replay each one to feel the timing.

Built on the open-source transitions.dev motion vocabulary by Jakub Antalik.

Resize

Card resize

.t-resize

Number pop-in

.t-digit-group

Notification badge

.t-badge

Save changes

Text states swap

.t-text-swap

Menu dropdown

.t-dropdown

click the trigger

Modal open / close

.t-modal

scale up & down

Card body

Quick actions

Share, archive, or export this item.

Panel reveal

.t-panel-slide

INBOX

Re: Friday sync — moved the review to 2pm and attached the latest cut for notes.

Page side-by-side

.t-page-slide

tap a row

Icon swap

.t-icon-swap

click to swap

Success check

.t-success-check

Avatar group hover

.t-avatar

hover the row

Please enter a valid email.

Error state shake

.t-input

Input clear with dissolve

.t-clear

hit the ✕

Maya Chen

Product designer

Skeleton & reveal

.t-skel

Generating response

Shimmer text

.t-shimmer

pure CSS loop

Tabs sliding

.t-tabs

click a tab

Tooltip open / close

.t-tt

delayed in, instant out

Welcome back Pick up where you left off.

Texts reveal

.t-stagger

MEMBER

4242 4242 4242 4242

W. VALLE09 / 28

Card hover tilt

.t-tilt

move over the card

Plus to menu morph

.t-morph

tap the +

Orders ship in 1–2 business days with tracking sent to your email.

Return anything within 30 days for a full refund, no questions asked.

Every product carries a two-year limited warranty against defects.

Accordion expand

.t-acc

click a header