Modal Morph
A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.
- Job
- demonstrate
- Family
- structure
- Sync points
- expand @ 1.2s
- Default duration
- 4.0s
- Frame rate
- 30 fps
- Engine
- Remotion / React
- Background
- Transparent — composites over any scene
Use it
Ask the agent. It copies this component into your project and edits it there — nothing to install, and rendering happens in the cloud.
“Add the modal-morph scene to my video and set its props to match my brand.”
Customize in Studio
Adapt the content, styling, timing, and layout to fit your project.
Related
All ui motionGesture Tap
A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.
Icon Morph Beat
An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.
Micro Transitions
A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions
Notification Stack
1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.
Offset Path Traveler
A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.
Oversized Cursor
A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits
Adapted from the HyperFrames registry, © HeyGen, Apache 2.0.