How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pill: 192px wide with 2.4px padding, 64px round corners, a 75% light background with a 10px backdrop blur, and 16px of space above and below.
- Circle: 48px, dark, pinned to the left. The arrow icon sits inside it, and the label (14.4px, semi-bold) is centred and nudged 20px right.
- Hover: the circle widens to 100% of the pill, the arrow moves 12px right and the label colour flips to light. All three take 0.5s on cubic-bezier(0.65, 0, 0.076, 1) and reverse on leave.
- Entrance (once, when the button is 90% up the screen): - The pill scales 0 → 1 with a small overshoot (0.5s). - As it lands, the circle scales in with a fade (0.5s). - The arrow slides in from 20px left and fades in. - The label rises from below its line mask (0.8s).
- Fallbacks: reduced motion and no JavaScript show the finished button (hover still works).