Component & Layout

Container Transform

Also called Card expand to detail, Expandable card, Morph card to page

A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.

List card to detail, FAB to sheet

  • card to full screen
  • FAB to sheet
  • list item to detail

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Container Transform" transition (also called card expand to detail or an expandable card) to [where].
When the card is opened, the same container should grow smoothly into the full detail view, its old content fading out quickly and the new content fading in once it has nearly finished growing; closing plays it in reverse.
Keep it one continuous container rather than a crossfade between two separate boxes, and move focus into the detail view when it opens.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.