Live Activities
Reverse-engineering compact-to-expanded interactions into a reusable motion pattern.
I rebuilt Timer and Now Playing to understand the decisions a screenshot cannot show: when a surface begins to move, when content gives way, and when controls become readable. The result is a reusable account of geometry, hierarchy, and interaction state that also informs the widget exploration.
Independent interface study · Reference interfaces and artwork by Apple; reconstruction and pattern extraction by me.
Reconstructing the reference
I broke each reconstruction into surface geometry, content, and interaction state. Playing the sequence repeatedly let me compare the expanding shape with the content arriving inside it. Try the replay, then pause or interact with a control to inspect the resting state.
Timer
Keeping a changing count readable.
One digit rolls away and softens as the next comes into focus. Digits that keep their value stay still.
I rebuilt the transition to examine its timing. The movement marks a passing second; the brief pause before the next update leaves time to read the value.
Related reading on how motion communicates status and feedback.Source: Apple Human Interface Guidelines · Motion
Now Playing
Pressing and releasing the controls.
Pausing dims the artwork and makes it smaller. Pressing the scrubber makes the progress bar taller and brighter; releasing it restores the resting appearance.
I use the rebuild to review each action through to its end, including resuming playback and releasing a control.
Related reading on the connection between touch and an interface’s response.Source: Apple · Designing Fluid Interfaces
Two compositions, one continuous surface
The compact view has a narrow job: identify the activity and expose its most useful status. Expansion is not a magnified version of that view. It makes room for a different composition, with context and reachable controls.
I separated the surface’s geometry from the content layout. That allowed the shell to remain continuous while the information inside changed. Timer puts the count beside its actions; Now Playing needs artwork, metadata, progress, and transport controls. The behavior can be shared without forcing both into the same grid.
- Compact
- Identity and live status. No miniature version of every expanded control.
- Expanded
- Group context, progress, and actions by purpose. Keep changing values on stable baselines.
- Shared shell
- Recalculate the rounded silhouette at the live size; do not stretch the corners with the content.
Choreographing the handoff
I treated timing as a relationship between events, not one duration applied to everything. The compact content softens before the expanded composition becomes readable. The surface uses a spring, while short blur and opacity transitions handle the content handoff.
For the Timer reconstruction, the preparation lasts 190 ms. The incoming content resolves from 9 px of blur over 300 ms, beginning 35 ms into the expansion. Those phases overlap with the spring; they are not a chain of waits before the interface can respond.
- Prepare
- Briefly contract the compact surface and clear its content.
- Expand
- Retarget the shell from its current position. Introduce the new composition as the space opens.
- Settle
- Resolve the blur and leave a stable, readable state. Keep controls available and motion interruptible.
Timing and spring settings are my web adaptations. They describe this implementation, not private UIKit values.
Knowing what should stay still
The transition between presentations and the updates within a presentation need different rules. A changing count should not rebuild the whole activity. I kept stable digits in place and animated only the ones that changed. Playback and pause update the existing composition instead of replaying the entrance.
I also made the sequence replayable and tested interruptions. A new action must take over from the state already on screen. Reduced motion goes directly to the expanded view; theme changes affect the surrounding presentation without replaying its content.
That separation carries into SiriAI: content, appearance, and size have independent responsibilities, and changes preserve the user’s context. The widget keeps its own geometry and resize timing. The activity study contributes the principle of continuity, while the widget references determine its composition.