Container Morph (7 Patterns) new 容器变形（7 种模式） web
A container changes shape, size, or layout while its content stays continuous
容器改变形状、大小或排版，但内容始终保持连续
A dot stretches sideways into a pill.
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Circle to Pill圆点变胶囊
container morphA small round entry point stretches sideways into a readable status pill.
小圆入口向两侧拉长，变成可读的状态胶囊。
Prompt fragmentPrompt 片段a centered dot expanding left and right into a pill; reveal the icon first, then the label
居中的小圆点向左右展开成胶囊，先显示图标，再显示标签
-
2 Pill to Card胶囊展开成卡片
container morphA one-line status pill opens downward into a detail card while retaining its header.
单行状态胶囊向下展开成详情卡片，同时保留顶部信息。
Prompt fragmentPrompt 片段a status pill expanding downward into a card; keep the icon and title in place, then reveal details and actions
状态胶囊向下展开成卡片，保留图标和标题，再显示详情和操作
-
3 Compact to Expanded紧凑态展开
container morphA compact control becomes a full panel for the same task.
小控件展开成同一任务的完整面板。
Prompt fragmentPrompt 片段the same control expanding into a complete panel; move the cover, progress, and quick actions into their final positions
同一个控件展开成完整面板，让封面、进度和快捷操作移动到最终位置
-
4 Corner Radius Morph圆角形态过渡
border-radiusThe box keeps its size but changes from capsule-like corners to card corners.
盒子尺寸不变，只从胶囊圆角过渡到卡片圆角。
Prompt fragmentPrompt 片段keep the container size stable while the four corners ease from a full pill radius to a 16px card radius
保持容器尺寸稳定，让四个角从全圆角缓动到 16px 卡片圆角
-
5 Size Morph尺寸变形
layout / transformThe container grows from a fixed anchor while its content hierarchy remains intact.
容器从固定锚点变大，同时保持内容层级。
Prompt fragmentPrompt 片段pin the top-left anchor, grow the container down and right, preserve internal alignment, and emphasize the primary value at the end
固定左上角，容器向右下方变大，保持内部对齐，最后突出主要数值
-
6 Content Reflow内容重排
layout transitionThe same content reorganizes from a stack into a row as the available width changes.
可用宽度变化时，同一组内容从上下堆叠重新排成一行。
Prompt fragmentPrompt 片段smoothly reflow the title, explanation, status, and action from a vertical stack into a horizontal layout without changing reading order
让标题、说明、状态和操作从上下结构平滑重排为左右结构，阅读顺序不变
-
7 Reverse Collapse反向收回
reverse transitionA completed card returns to its original small entry point in a deliberate reverse order.
完成卡片按顺序回到最初的小入口。
Prompt fragmentPrompt 片段restore the button and text first, shrink the card next, then return to the original dot while retaining the completed checkmark
先恢复按钮和文字，再缩小卡片，最后回到原来的小圆点，但保留完成勾选
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a container morph demo with seven selectable patterns: Circle to Pill (a centered dot stretches horizontally, icon then text appear), Pill to Card (a one-line status pill expands downward while keeping its header), Compact to Expanded (the same control opens into a complete panel and reflows its controls), Corner Radius Morph (keep the size but animate the corners from capsule to card), Size Morph (grow from a fixed top-left anchor while preserving the content hierarchy), Content Reflow (change from a vertical stack to a horizontal layout while preserving reading order), and Reverse Collapse (restore the content first, then shrink back to the original dot while keeping the completion state). Use transform/clip-path where possible, keep the default content visible, make each transition interruptible, and honor prefers-reduced-motion.
做一个容器变形示例，包含七个可切换模式：Circle to Pill（居中的小圆点水平拉长，先出现图标再出现文字）；Pill to Card（单行状态胶囊向下展开，同时保留顶部信息）；Compact to Expanded（同一个控件展开成完整面板并重新排列操作）；Corner Radius Morph（尺寸不变，只把胶囊圆角变成卡片圆角）；Size Morph（从固定左上角向右下方变大，保持内容层级）；Content Reflow（从上下堆叠变成左右排版，阅读顺序不变）；Reverse Collapse（先恢复文字和按钮，再缩回原来的小圆点，同时保留完成状态）。尽量使用 transform 或 clip-path，默认状态要可见，每个过渡都能被打断并尊重 prefers-reduced-motion。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my container morph transition. Check that the starting and ending shapes are explicit; the container has a stable anchor; icon, title, details, and buttons appear in a deliberate order; layout changes do not pop or overlap; the card can be interrupted and reversed from its current state; the completion state survives a reverse collapse; and prefers-reduced-motion removes spatial movement without hiding the final state. The symptom:
调试我的容器变形过渡。检查起点和终点形状是否明确；容器是否有稳定锚点；图标、标题、详情和按钮是否按顺序出现；布局变化时是否跳动或重叠；动画被打断或反向时是否从当前状态继续；反向收回后是否保留完成状态；以及 prefers-reduced-motion 是否减少位移但仍显示最终状态。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | @keyframes + border-radius | use transforms and clip/reveal for a smooth shape change用变换和裁剪/显隐做出顺滑的形状变化 |
| Web | View Transitions API | share a named element across compact and expanded states用命名元素在紧凑态和展开态之间共享同一个元素 |
| React | layout / AnimatePresence | animate layout changes while keeping content continuity布局变化时保持内容连续 |
| SwiftUI | matchedGeometryEffect | the native shared-element equivalent on iOSiOS 上原生的共享元素做法 |