States & motion
Appearance and behavior are documented together.
Rest → hover → pressed. Focus is independent and visible during keyboard navigation. Disabled prevents activation; loading and error need their own messages.
Current state
Decisions that already exist and can be observed in the product.
Button: 4px shadow at rest; +2px translation and 2px shadow on hover; +4px without shadow when pressed.
140ms for control feedback, 200ms for surface changes. Curve cubic-bezier(0.2, 0, 0, 1).
With prefers-reduced-motion transitions reduce and Skeleton stops pulsing. No information depends on animation.
Game rewards use 320ms with a bounce and the theme’s shared bl-* animations; they are skipped with reduced motion.
Every component page includes States & interaction. Non-interactive elements do not simulate hover or focus.
Visual specimens of the primary button. Test the real states below with mouse, keyboard or touch.
4px / 0px2px / +2px0px / +4px3px / offset 3pxflat / mutedTab shows focus; Enter and Space activate. Hover reduces the shadow without changing border width. Reduced motion switches states without animation.
Current tokens
Values present today; documenting them does not make every value final.
| Token | Value | Current use |
|---|---|---|
| --bl-motion-fast | 140ms | Duration or curve |
| --bl-motion-standard | 200ms | Duration or curve |
| --bl-motion-ease | cubic-bezier(0.2, 0, 0, 1) | Duration or curve |
| --bl-motion-celebrate | 320ms | Duration or curve |
| --bl-motion-ease-pop | cubic-bezier(0.34, 1.56, 0.64, 1) | Duration or curve |
What is missing
Gaps that prevent this foundation from being a stable rule.
There are no open gaps in the current scope of this foundation.
Next decisions
Recommended order for turning findings into a stable foundation.
- 01
Test pointer, Tab, Enter, Space and reduced motion. Try the interactive example below.