Dynamic Island
The pill morphs between states using a single div — no clipping, no hidden layers. Width and height animate together with a spring that slightly overshoots. Content fades in 150ms after the shape starts moving, so text never rides a distorting container. Five states: ring, alarm, download, navigation, message.
Apple's Dynamic Island isn't a feature — it's a notch with good PR. The engineering insight is that a rounded rectangle can become a container for ambient information if the transitions feel physical enough that you stop thinking of it as a UI element.
The shape constraint. Every state — idle pill, incoming call, download progress, navigation, message — is a single div with border-radius: 100px. No clip-path switches, no hidden second layer that reveals on expand. Width and height animate together. That constraint is the whole trick: the pill doesn't open, it breathes.
Why the spring matters. cubic-bezier(.34, 1.15, .64, 1) gives roughly 8% overshoot. Enough to register as physical, not enough to feel bouncy. If you use the button-press spring (.34, 1.56, .64, 1) it reads as playful — wrong for a notification container. If you use ease-out it reads as a UI panel appearing — also wrong. The specific overshoot is load-bearing.
The content timing problem. If content fades in as the shape is still distorting, letters look squeezed. The fix is a 120ms delay on the opacity transition — by the time text appears, the morph has mostly completed. This is the same principle behind iOS app launches: the icon scales before the interface loads, so you never see content inside a distorting frame.
Five states. Incoming call with an audio waveform that animates. Morning alarm with dismiss/snooze actions. File download with a radial SVG progress ring. Turn-by-turn navigation with ETA. Incoming message preview. Each state returns to idle after 3.6 seconds automatically.