Bring depth and motion to your design with the 3D Gradient Card, an interactive Framer component that reacts beautifully to hover and click. The card features smooth text animations, a rich gradient background, and a 3D pin element that appears and settles dynamically, creating subtle circular ripple effects.
On desktop, the 3D animation is triggered by hover, while on mobile and tablet, it activates on click for a seamless experience across devices.
The gradient cannot be changed via variables — you can only edit it directly inside the component, since Framer doesn’t currently support gradient variables.
On mobile and tablet, make sure to select the “Phone” variant to ensure proper functionality and interactions.
3D Hover Effect: Card tilts and reacts to mouse movement
Animated Pin: Appears in 3D space with ripple circles
Gradient Background: Beautiful, smooth color transitions
Customizable Text: Edit titles, descriptions, and fonts
Responsive: Works perfectly on desktop, tablet, and mobile
Smart Triggers: Hover on desktop, click on mobile/tablet
🚀 Hero sections with interactive highlights🎨 Portfolios and landing pages that need depth and motion✨ Product cards, creative showcases, or modern UI displays
✉️ Have any questions about the component or want a custom one? Email me at didaserafim90@gmail.com
Serafim 193
