Motion components

Introduce or remove an element with opacity for low-distraction state changes.

Bring content in from a clear direction so its spatial relationship stays legible.

Scale from near the final size, with an optional slight overshoot for Pop in.

Reveal content with clipping and slight travel for headings, media, and sections.

Introduce list items at short intervals to communicate order and rhythm.

Use controlled perspective and rotation for card flips or hover depth.

Expand or scale from the trigger point to preserve spatial continuity.

Crossfade overlapping, similarly sized states to reduce visual jumps.

Create continuous transformation between before and after layouts of a shared element.

Coordinate height, opacity, and icon state for clear disclosure transitions.

Match enter and exit directions to navigation order and preserve context.

Reveal content once as it enters the viewport with a reduced-motion fallback.

Move foreground and background at restrained relative speeds to create depth.

Preserve continuity across page or view changes with a safe fallback.

Reinforce interactivity on pointer hover while keeping layout stable.

Confirm input immediately with a brief scale and contrast response.

Show cancellable progress during hold-to-confirm interactions to reduce mistakes.

Keep pickup, placeholder, and drop states clear while reordering.

Map swipe distance to travel and opacity with resistance before the threshold.

Use one brief horizontal shake for errors or inputs that need attention.

Expand a restrained ripple from the input coordinate for precise touch feedback.

Continuously scroll overflowing content and pause it on hover or focus.

Move a decorative node slowly around a center for low-frequency status displays.

Use subtle breathing or floating motion for available, waiting, or active states.

Reveal media or content layers with coordinated blur, opacity, and masking.

Compare before and after states of the same visual with a draggable divider.

Draw icons, paths, or explanatory connectors with stroke offset animation.

Transition between similarly sized short labels while preserving reading position.

Communicate loading progress with a low-contrast shimmer across placeholders.

Show changing values with tabular figures and stable vertical digit movement.

Reveal short text character by character while preserving complete accessible text.