3D Gradient Card: Premium Component by Serafim 193

3D Gradient Card is a Framer component with a hover-based 3D effect. The gradient can only be edited from inside the component. On mobile/tablet, use the “Phone” variant!

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.

⚠️ Important Notes:

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.

Key Features

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

Best Uses

🚀 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