3D Pin
A versatile Framer component that creates a "3D pinned" effect for any content.
Made with Workshop
Build your own component with AI
A versatile Framer component that creates a "3D pinned" effect for any content.
Made with Workshop
Build your own component with AI
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.
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 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 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.
