Design
Motion that does not lie about state
Nina Alvarez · 2025-04-08 · 6 min
Resources
Animation is a status message. If a card flies in after the data is already there, we taught the user to wait for theatre. We animate only state changes: enter, exit, loading, error, success.
Duration and easing are part of the system, not a per-screen jam session. One entrance, one exit, one spring for interactive objects. Designers pick from the list.
Respect the OS
prefers-reduced-motion is not optional. Instant opacity is a valid, premium feel. We ship that path on every marketing surface, not as a later accessibility ticket.
If the meaning of the interface depends on motion, the interface is broken for someone. We never encode 'you may proceed' only as a slide.
Motion as documentation
A spinner that never resolves is a lie. We cap waits, show skeletons that match layout, and fail visibly. Honesty is faster than delight that stalls.
When motion tells the truth about state, it earns the right to be beautiful. Not the other way around.
Related articles
Design
Figma-to-code contracts that survive a sprint
Auto-layout, named layers, and the inspection ritual we run before estimate.
Omar Farouk · 2025-02-07 · 6 min
Read articleDesign
Dark UI contrast that still passes
Muted text, glass panels, and the WCAG line we will not cross for atmosphere.
Nina Alvarez · 2025-03-19 · 6 min
Read articleDesign
Ship tokens before you ship a button
Color, type, and space as code — so dark mode is not a weekend project.
Nina Alvarez · 2025-05-16 · 6 min
Read article