'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Motion
Morph
Shared element morphing: give two elements the same id and, when one replaces the other, the new one grows out of the old one, in position, size and corners, with its content fading in. A card opens into its detail, a button becomes a panel. MorphIcon morphs one icon into another.
import { Morph, MorphIcon } from '@alea/motion';
Examples
Card to detail
Two Morph elements with the same id: press a card and it grows into its detail; Close shrinks it back into its place in the grid.
Button to panel
A button morphs into the panel it opens, and back: a compose button, a search that grows, a floating action.
MorphIcon
Two icons that morph into each other: the new one turns and grows in while the old one blurs out.
Props
Morph props
A shared element: give two elements the same id and, when one replaces the other (a card that opens into its detail, a button that becomes a panel), the new one morphs from the old one's position, size and corners. Works without View Transitions; respects reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
idrequired | string | - | Elements with the same id morph into each other: when one replaces the other, the new one grows from the old one's box. |
as | ElementType | 'div' | The element to render. Default div. |
className | string | - | |
duration | number | - | Duration in ms. Default the slow motion token (480). |
easing | string | - | Easing. Default a strong deceleration with no overshoot. |
fadeContent | boolean | true | Fades the content in after the box has moved (default true), so text never looks stretched. |
style | CSSProperties | - |
MorphIcon props
Two icons that morph into each other: the active one turns and grows in while the other blurs out (play and pause, menu and close, copy and check).
| Prop | Type | Default | Description |
|---|---|---|---|
activerequired | boolean | - | |
fromrequired | ReactNode | - | |
torequired | ReactNode | - | |
className | string | - |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Motion
- morph
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-morph-icon.alea-morph-icon-a.alea-morph-icon-b
Accessibility
- Morphing is visual only: move focus to the new content yourself (autoFocus or a ref), and back to the trigger when it closes.
- With reduced motion on, elements swap without morphing.
- MorphIcon is decorative: name the button by its current action.
Do and don't
Do
- Morph between two states of the same thing: a card and its detail, a button and its panel.
- Keep the morph short (the slow token, 480 ms) and let content fade in after the box moves.
Don't
- Don't morph unrelated things into each other.
- Don't chain morphs; one at a time reads clearly.