Small moments. Lasting feel.
Responsive feedback, a gentle arrival, and a little less friction.
The easing curve
Quick to respond. Soft on arrival.
Duration300ms
Easingcubic-bezier(.215, .61, .355, 1)
EvidenceSampled controls & list opacity
The moving dot visualizes the measured curve. It is a demonstration, not a motion copied from the source.
Feedback you can feel
Every interaction resolves to a clear state.
Press & select
Color, shadow, and thumb travel. No unnecessary bounce.
Source curve; toggle fill, press shadow, and switch travel are adapted behaviors.
Enter & exit
Subtle travel, with focus managed by Bits UI.
Entry: 300ms. Exit: 160ms. Distances, exit duration, and blur are adaptations; not measured source values.
Motion should never get in the way
Respect the person, not just the animation.
| Condition | Behavior |
|---|---|
| Reduced motion | Nonessential transitions and animations resolve immediately through prefers-reduced-motion. |
| Rapid input | State follows the latest action. CSS transitions reverse without queuing handlers. |
| Keyboard navigation | Visible focus stays distinct from hover. Dialog focus is contained and restored. |
| Touch | Actions remain available without hover. Cards expose persistent controls. |
@media (prefers-reduced-motion: reduce) {
.p-theme * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}