Framer component

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

Customizable Components for Framer.

Free

card
3d
Custom Code Component

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

  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.

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.

Config MainConfig 1Config 2Config 3Config 4Config 5

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.

Bachoff Framer Components

You may also like...

Preview image only. Click to try component.

3D Laptop Mockup

3D Laptop Mockup

Transform your designs into stunning 3D presentations with this ultra-realistic MacBook mockup. Features cinematic animations, real-time interactions, and professional-grade rendering that will make your work stand out.

Preview image only. Click to try component.

Background Beams with Collision

Background Beams with Collision

Add a touch of magic to your website with falling light beams that create explosions on impact. This eye-catching background effect brings movement and energy to any section while keeping your content in the spotlight.

Live interactive demo. Click the button for details.

Simple Line Chart

A sleek and customizable animated line chart built with pure SVG. Perfect for visualizing data trends with smooth or straight lines that gracefully animate into view.

“Sign up” for the newsletter_

Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.

©2024 BACHOFF Studio

All Rights Reserved