# Card Hover - Elegant Lift with Shadow
**Design Principle**: Delightful feedback. Cards gently lift and cast a shadow on hover, creating tactile depth and encouraging interaction.
**Use Case**: Product cards, blog posts, portfolio items, feature grids
**Performance**: GPU-accelerated transforms, instant response
---
## React / Next.js Implementation
### Basic Card Hover
```tsx
import { motion } from "motion/react"
export function HoverCard({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
**Usage**:
```tsx
Product Name
Beautiful description
```
---
### Advanced: Scale + Shadow + Border Glow
```tsx
import { motion } from "motion/react"
export function PremiumCard({
title,
description,
image,
}: {
title: string
description: string
image: string
}) {
return (
{title}
{description}
Learn More
)
}
```
---
### Apple-Style: Minimal Lift + Subtle Scale
```tsx
import { motion } from "motion/react"
export function AppleCard({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
---
## Grid of Cards with Stagger
```tsx
import { motion } from "motion/react"
const products = [
{ id: 1, title: "Product 1", price: "$99" },
{ id: 2, title: "Product 2", price: "$149" },
{ id: 3, title: "Product 3", price: "$199" },
]
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
}
const cardVariants = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 },
}
export function ProductGrid() {
return (
{products.map((product) => (
{product.title}
{product.price}
))}
)
}
```
---
## Vanilla JavaScript
```javascript
import { animate } from "motion"
const cards = document.querySelectorAll(".card")
cards.forEach((card) => {
// Hover in
card.addEventListener("mouseenter", () => {
animate(
card,
{
y: -8,
boxShadow: "0 20px 40px rgba(0, 0, 0, 0.12)",
},
{
type: "spring",
stiffness: 300,
damping: 20,
}
)
})
// Hover out
card.addEventListener("mouseleave", () => {
animate(
card,
{
y: 0,
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
},
{
type: "spring",
stiffness: 300,
damping: 20,
}
)
})
})
```
---
## With Click Animation
```tsx
import { motion } from "motion/react"
export function InteractiveCard({ onClick }: { onClick: () => void }) {
return (
Click me
)
}
```
---
## Accessibility: Keyboard Focus State
```tsx
import { motion } from "motion/react"
export function AccessibleCard({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
---
## Customization Options
### Subtle (Apple-Style)
```tsx
whileHover={{ y: -2, scale: 1.005 }}
```
### Dramatic (Product Showcase)
```tsx
whileHover={{ y: -16, scale: 1.05, rotate: 2 }}
```
### Glow Effect
```tsx
whileHover={{
y: -8,
boxShadow: "0 20px 60px rgba(59, 130, 246, 0.4)", // Blue glow
}}
```
### Slower, Smoother
```tsx
transition={{ duration: 0.4, ease: "easeOut" }}
```
---
## Design Notes
**Why this works:**
- **Lift (y: -8)** - Creates tactile depth, suggests clickability
- **Shadow** - Reinforces elevation, adds realism
- **Spring physics** - Natural, organic response
- **Instant feedback** - User knows it's interactive
**When to use:**
- Product cards
- Blog post previews
- Portfolio items
- Feature grids
- Team member cards
- Pricing tables
**Avoid when:**
- Too many cards (overwhelming)
- Small touch targets on mobile
- User has prefers-reduced-motion
- Cards are purely informational (not interactive)
**Performance tips:**
- Use `will-change: transform` CSS
- Avoid animating width/height
- Limit number of simultaneously hoverable elements
- Test on mobile devices