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

1. Use high-contrast colors for the pin lines to create a striking visual effect
2. Keep the card content minimal to maintain the 3D effect's impact
3. Choose complementary colors for the border hover state and pin gradients
4. Use high-quality images that work well with the dark overlay
5. Adjust the border radius to match your design system's aesthetic
6. 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.