A stunning, interactive 3D card component that creates an immersive depth effect on mouse hover. Perfect for showcasing content, products, or features with a modern, engaging animation that responds to cursor movement. Built with performance and customization in mind.

✨ Key Features

• Smooth 3D Perspective: Real-time rotation based on cursor position
• Layered Depth Effect: Configurable Z-axis positioning for each element
• Responsive Design: Adapts seamlessly to any container size
• Dual CTA Support: Flexible left and right call-to-action buttons
• Image Integration: Easy image upload with automatic optimization
• Custom Typography: Full control over text styling and layout

💡 Pro Tips

1. Keep the card's content minimal to maintain the 3D effect's impact
2. Ensure sufficient contrast between background and text colors for better readability
3. Use the hover states on CTAs to create additional interactive elements
4. Combine with background gradients or patterns to enhance the depth effect
5. Adjust border radius and padding to match your design system

🎨 Styling Options

• Card Body: Background color, border properties, padding, and border radius
• Typography: Complete control over font properties for title and subtitle
• Image: Border radius and aspect ratio adjustments
• CTAs: Custom colors, hover states, and visibility toggles
• 3D Effect: Perspective depth and animation timing
• Spacing: Flexible margin and padding controls for all elements

This component brings premium 3D interactions to your Framer projects without requiring any coding knowledge, while maintaining full customization control through Framer's property panel. Perfect for creating engaging product cards, feature highlights, or interactive content sections.