A versatile Framer component that creates a "3D pinned" effect for any content. On hover, the content scales and rotates into a perspective view while a dynamic, glowing "pin" appears from behind, adding a unique and interactive visual flair.

Customization Options

General

• Title: The text displayed on the glowing pin.
• Link URL: The destination URL for the link.
• Link Target: Determines if the link is active on the pin only, or on the entire content container as well.
• Glow Color: The color of the glowing pin and the underline on the title.
• Glow Intensity: Controls the opacity and brightness of the glow effect (from 0 to 1).
• Glow Spread: Adjusts the size of the glow's animated circles.
• Content Padding: The internal spacing around the content inside the container.
• Content Overflow: Specifies how content is handled if it exceeds the container's boundaries (hidden or visible).
• Touch Support: Enables or disables the hover animation for touch devices.
• Z-Index: Controls the stacking order of the component relative to other elements.

Title Styling

• Title Font: Full typographic controls for the pin's title.
• Show Title Background: A toggle to show or hide the background behind the title.
• Title Background: The background color for the title.
• Show Title Border: A toggle to show or hide a border around the title.
• Title Border Color: The color of the title's border.
• Title Border Width: The thickness of the title's border.
• Title Border Radius: The corner radius of the title's background.
• Show Icon: A toggle to show or hide a link icon next to the title.
• Icon Position: The icon's placement relative to the title (left or right).
• Icon Size: The size of the icon.
• Icon Color: The color of the icon.

Animation & Effects

• Animation Duration: The speed of the hover animation in seconds.
• Hover Scale: The size of the content container when hovered (from 0.5 to 1.2).
• Hover Rotation: The angle of the perspective rotation on hover.
• Shadow Intensity: The opacity of the container's drop shadow.
• Shadow Blur: The blur radius of the drop shadow.
• Shadow Color: The color of the drop shadow.

Use Cases

1. Portfolio Showcase: Highlight individual projects with a unique hover effect that draws attention.
2. Product Features: Display a grid of product features, where each feature card has a captivating 3D animation on hover.
3. Interactive Galleries: Use the component as a container for images or videos, adding a dynamic layer to a gallery layout.
4. Team Member Cards: Make team member bios or profile cards more engaging with a cool hover animation.