A booking button with a little gravity
Five liquid transitions from a glass pill to a calendar circle. Try interrupting them mid-flight.
Selected direction
Spring bead, with a faster sequence and a centered icon and label.
What we kept
The button waits for two seconds, compresses, jumps, stretches into a droplet, then lands with a ripple and one rebound. The selected sequence has 14 shapes and takes about one second after the hold.
- Hover or keyboard focus returns the current shape to the full button.
- Center the icon and label together, with equal space on both sides.
- Keep the landing point fixed while the reader scrolls.
- Skip the flight for reduced motion. Stop animation work while the tab is hidden.
The frame preserves the comparison. Booking actions inside it are simulated. The site navigation above remains available.
Notes from the build
A blog post about these decisions is being drafted. It covers the menu alignment, animation interruptions, and the difference between centering text and centering the whole button label.