TRANSITION EFFECT

Shape morph.

A compact tile expands into a softer surface.

See the movement

One intentional trigger

Duration 0.95s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

Coordinated size and corner-radius changes connect two related shapes. This is an illustrative CSS shape transition, not automatic shared-element routing or arbitrary path morphing.

Timing curvecubic-bezier(.4,0,.2,1)

Default duration950ms

RepetitionOnce per trigger

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Shape morph: A compact tile expands into a softer surface.
Connect related states with a coordinated change in scale and corner radius, from a compact rounded tile to a wider card. Preserve a clear visual relationship and avoid implying unrelated screens are the same object.
Timing: 950ms; easing: cubic-bezier(.4,0,.2,1); play once per intentional trigger.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Crossfade

Stagger reveal