The cuts
A screen can only change in six ways. Each one has a cut from film editing that makes the change easy to follow.
Something opens on top
Rack focus
In film: The camera pulls focus from the background to the subject.
In your UI: A dialog grows out of the button that opened it while the page behind softens. Closing reverses it back into the button. Sheets slide in from their edge and the page steps back.
Read the docsYou switch to a neighbour
J-cut and whip
In film: The next scene's sound starts before its picture.
In your UI: The tab pill whips across first, then the new panel follows a beat later. The old panel leaves on its own, and the frame resizes smoothly.
Read the docsA thing opens into its bigger self
Match cut
In film: A shape in one shot matches the same shape in the next.
In your UI: A card grows into its detail view, on the same page or across a route change, and shrinks back when you return.
Read the docsA list changes
Cut on action
In film: The cut happens mid-movement, so the motion carries across it.
In your UI: A sent message flies from the Send button into the thread. A deleted row folds away first, then the rest glide up.
Read the docs- Message 1
- Message 2
A value changes in place
Punch-in
In film: A quick push in on the same shot, for emphasis.
In your UI: Only the digits that changed roll, and the number gives a small punch so the eye catches it.
Read the docs1,284
A placeholder becomes real
Dissolve
In film: One shot fades into the next.
In your UI: The skeleton fades into the content in the same space. If the data arrives within 300 ms, the skeleton never shows.
Read the docs