One surface connects two content states
Width, height and corner radius change together. The summary fades out before the detail content appears later in the transition.
The example uses fixed internal bounds. It does not navigate to a new page or measure a card in an arbitrary document layout.
Give shape and content their own timing
Overall duration scales the tracks while retaining their order. Use slow observation to inspect how fading content follows the changing surface.
Translation, scale and easing can be adjusted without replacing the scene’s existing shape and radius tracks.
Check real content before reuse
The demo uses fixed content height. Test long headings, multiline text, loading images and narrow layouts in your own component.
Closing reverses the tracks. Reduced motion should preserve understandable summary and detail states without requiring the animated path.