Perspective 3D Card Hover
Add a touch of magic to your Framer designs with this stunning 3D card that responds to mouse movement. Create an immersive experience with depth effects that make your content float and come alive as users interact with it.
Component Details
Instructions
Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.
About
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
- Keep the card's content minimal to maintain the 3D effect's impact
- Ensure sufficient contrast between background and text colors for better readability
- Use the hover states on CTAs to create additional interactive elements
- Combine with background gradients or patterns to enhance the depth effect
- 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.
This Framer component was inspired by Aceternity UI's component 🤝
We appreciate Aceternity UI efforts in creating open-source react components, which allows us to "Framerize" and offer them to the Framer community.
Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.
You may also like...
“Frequently“ Asked Questions
Get answers to common questions about the Bachoff custom code Framer components.
“What are custom code Framer components?”
Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.
“Do I need coding knowledge to use custom code components?”
No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.
“What types of components do you offer?”
We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.
“How do I install a custom code component in Framer?”
Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.
“Are the components compatible with all Framer projects?”
Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.
“What's the difference between free, pro, and elite components?”
Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.
“Can I request a custom-built component?”
Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.
“Sign up” for the newsletter_
Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.
“Policies”
©2024 BACHOFF Studio
All Rights Reserved