How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
The grid
- A heading on the left and the filter pills on the right (they wrap under each other on narrow screens). Below them a grid of cards: 4 across on desktop, 2 across under 1100px, 1 across under 800px, with 20px gaps. Each card has its own background and text colour.
- A card is a 4 : 4.4 picture area with the product photo centred in it (84% of the area's height, never wider than 88%; it can be tall or wide), turned -4°, outlined tags top left, then a row with the name and a small detail line on the left and the price on the right, then the button bar at the bottom.
Cards
- Pointer tilt (mouse and pen only): the pointer's position over the card is turned into two numbers from -1 to 1. The photo moves up to 14px and 10px, tips up to 16° forward or back and 20° left or right, rotates up to 4° more, and its shadow slides up to 18px the other way. It follows the pointer within 0.25s and eases back when the pointer leaves.
- Hover: the photo scales to 1.06 (0.6s).
- Reveal: each card is clipped away from the bottom up and 56px low until it is 12% inside the screen, then it wipes up over 1.1s, staggered 0.1s per card. When the filter changes, the grid is rebuilt and the cards wipe up again.
Filters
- The first filter ("all") shows everything; the others show items whose tags include that filter's id. The dark highlight slides under the active pill (0.55s, strong ease-in-out) and the pill's text turns light.
- When a filter leaves fewer than three cards, a dashed empty slot fills the row with a short line like "More gift packs coming soon." (the text is a prop).
Add to bag
- Hovering the button wipes a solid bar in the card's text colour across it from left to right (0.55s) and flips the text colour to the card's colour. Pressing it calls onAdd(id), keeps the bar filled and changes the label to "Added to bag" for 1.6s, and shows a small round counter with how many of that product have been added. Fallbacks: touch screens get no tilt but everything else. With "reduce motion" on, nothing tilts, wipes or slides and the cards are simply there. The filters are real buttons (aria-pressed).