Animated 3D Pin Card
Make your content pop with this floating card design that moves as visitors hover over it. A glowing pin and connecting lines create a modern, floating look that will catch everyone's eye.
Bachoff Studio
Free
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
An elegant and interactive 3D card component with a floating pin effect, perfect for creating engaging hover experiences in your Framer projects. This component combines smooth 3D transformations with dynamic lighting effects to create a premium, modern interface element.
✨ Key Features
- Immersive 3D Animation: Smooth perspective transformation on hover
- Dynamic Pin Effect: Floating pin connector with pulsing animation
- Customizable Content: Flexible layout for title, subtitle, and image
- Gradient Lines: Animated connection lines with customizable colors
- Interactive Links: Configurable link targets and styling
- Responsive Design: Maintains perfect proportions at any size
💡 Pro Tips
- Use high-contrast colors for the pin lines to create a striking visual effect
- Keep the card content minimal to maintain the 3D effect's impact
- Choose complementary colors for the border hover state and pin gradients
- Use high-quality images that work well with the dark overlay
- Adjust the border radius to match your design system's aesthetic
- Consider using monospace fonts for the pin text to maintain consistent spacing
🎨 Styling Options
- Card Body: Background color and border properties, border width and radius, hover state customization
- Content: Title and subtitle text styling, font properties and spacing, image border radius and margins
- Pin Element: Custom text and link configuration, primary and secondary line colors, background and text colors, underline gradient effect
This component adds a premium touch to your Framer projects, perfect for featuring products, services, or creating engaging navigation elements. The smooth 3D transformation and floating pin effect create a memorable interactive experience that will make your design stand out.
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...
“Sign up” for the newsletter_
Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.
“Contact”
“Policies”
©2024 BACHOFF Studio
All Rights Reserved