Motion laboratory
Open a detail panel with a bounded transition. Compare timing, easing and behavior, and decide when an instant change works better.
Real interaction · Site timing default: 240 ms
Request flow
Summary: a request and response.
Playback: idle
In words
Duration changes how long the transition takes. Standard easing starts promptly and settles gently; linear moves at a constant rate. Fade changes opacity, slide adds horizontal translation, and expand adds scale. Only transform and opacity are animated, using the browser’s animation API for true pause/resume.
The controls affect this detail panel only. No background autoplay or global preference changes. Reduced motion always uses an immediate update. The panel is an illustrative example, not a client interface.
How it’s built
Portfolio-owned interaction, semantic tokens, native controls and bounded local state. Demo data is illustrative; no professional outcome metrics are implied.
Public source links will be added when the portfolio repository is public.