Capstone: Animated Product Card

Combine transitions, transforms, keyframes, performance choices, and reduced-motion support into a polished product card.

Step 1 of 4

What you're building

In this capstone, you'll build an animated product card like the ones you see on ecommerce websites, online course platforms, and app marketplaces. The card should feel polished, not flashy:

a hover lift using transform
a smooth shadow transition
a subtle badge animation using @keyframes
a reduced-motion fallback

This is where the module comes together. You're not learning one property in isolation anymore — you're combining motion techniques into one real UI component.

Tip

If you ever feel lost in a capstone, go back to jobs: one motion for feedback, one for attention, one fallback for accessibility. Small purposeful pieces add up to a polished whole.