A sweep of interaction patterns for a healthcare product: fast where users repeat, expressive where context benefits from it, and restrained enough to preserve trust.
This version treats gradients like lighting rather than decoration: mostly white and cream, with faint plum/apricot atmosphere, tonal button depth, and a few softly tinted surfaces instead of obvious gradient components.
Core interaction
Press, respond, confirm.
The fastest interactions should feel physical without becoming theatrical. These are the patterns users may see dozens of times per day.
Press feedback
100ms scale response. No hover dependency on touch.
Origin-aware popover
Scales from its trigger, not the center of the viewport.
Morphing confirmation
Subtle blur bridges the state swap instead of a hard text change.
Sliding tab state
On-screen movement uses a critically damped physics spring.
Tooltip rhythm
First tooltip waits 300ms; adjacent tooltips become instant.
Insurance status
Visit preparation
Care plan complete
Occasional interactions
Spatial motion with purpose.
Drawers, toasts, and deliberate actions can carry more motion because they are seen less often and benefit from stronger state explanation.
Toast entrance
Short ease-out entrance; fast dismissal from the same direction.
Appointment confirmedSep 12 · 10:30 AM
Bottom drawer (Interruptible Physics)
Drag sheet directly. Release velocity projects destination with rubber-band boundaries.
Upcoming visit Sep 12 · 10:30 AM
Reschedule visitChoose another time without losing your current appointment slot.
Deliberate hold
Slow decision, fast release. Useful only for destructive or consequential actions.
Clip-path reveal
For rare explanatory or marketing moments, not routine product UI.
Care, made clearer.
Motion system
Recommended defaults.
These values keep the product crisp and professional while leaving room for a little warmth in lower-frequency moments.
