Cards lift, not jump
The shadow follows the lift, so the card rises instead of hopping.
Timings measured on ramp.com; Ramp publishes no design.md.
Lift with its shadow
Hover a card. On touch, tap to lift or drop it.
Shadow snapsBad
transform 400ms, shadow 0msShadow followsGood
transform 400ms, shadow 400ms/* measured on ramp.com */
transform, box-shadow: 400ms easeWhy it matters, pros and cons
Why it matters
Measured on ramp.com: transform and box-shadow animate over 400ms ease. Both move as one gesture.
Pros
- The shadow deepens as the card rises, so the lift reads as real height.
- One timing for both properties keeps the motion coherent.
- Suits browse-style grids where hover is exploration, not a task.
Cons
- 400ms is above this site's 300ms UI limit; it is a marketing timing.
- In a product table, a lag of 400ms on every row feels sluggish.
- Animating box-shadow repaints; keep it to a few cards at a time.