Interactive card with 3D tilt effect that responds to mouse movement using CSS transforms.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

maxTilt

• Type: number - Default: 15
• Maximum tilt angle in degrees

glare

• Type: boolean - Default: true
• Enable glare effect

glareMaxOpacity

• Type: number - Default: 0.3
• Maximum glare opacity

perspective

• Type: number - Default: 1000
• CSS perspective value

scale

• Type: number - Default: 1.05
• Hover scale factor

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

className

• Type: string
• Additional CSS class

children

• Type: ReactNode
• Card content

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-tilt-card
• .cc-tilt-card__content
• .cc-tilt-card__glare