3DPin - Framer component

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.

Live Preview: https://3dpin.framer.website

Customization OptionsGeneral

• 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

• Font: Full typographic controls for the pin's title.

• Show Background: A toggle to show or hide the background behind the title.

• Background: The background color for the title.

• Show Border: A toggle to show or hide a border around the title.

• Border Color: The color of the title's border.

• Border Width: The thickness of the title's border.

• 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.

Refund Policy:

All sales of digital templates are final. Once purchased and downloaded, refunds or exchanges are not available. Please ensure the product meets your needs before purchasing. For any questions or issues with your download, please contact me for assistance.