Key insights
- Lift with weight: raise the card ~8px on hover and stretch its shadow with it over ~200ms ease-out. Faster reads as twitchy, slower feels stuck.
- Claim the cursor: a pulsing accent border or a gradient sweep around the edge stops the card looking flat and signals it's interactive.
- Cascade the actions: reveal hidden buttons (favorite, cart, share) staggered ~60ms apart, anchored at the bottom. A reveal adds an affordance, not a new layout.
- Push against the glass: scale the image to ~1.05 inside an
overflow-hiddenframe while the container stays fixed — the product presses outward instead of resizing the card. - The trap — keep the geometry: never scale the whole card. That shifts neighbors and breaks the grid. Animate the content, hold the footprint.
Do / Don't
- Do: Lift the card ~8px and grow its shadow together, using ~200ms ease-out for a sense of weight.
- Do: Stagger revealed actions ~60ms apart and anchor them to the card's bottom edge.
- Do: Scale the image to ~1.05 inside an overflow-hidden frame while the container holds still.
- Don't: Scale the entire card — it shifts neighboring cards and breaks the grid layout.
- Don't: Stack action buttons over the title or let them spill outside the card boundary.
- Don't: Time the lift too fast (twitchy) or too slow (stuck) — 200ms is the sweet spot.
