---
title: "3D Pin — Framer component · Best of Framer"
description: "$18.00 · Framer component · by Snoweirdo · Backgrounds. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/3d-pin"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/3D Pin

# 3D Pin

3D Pin Effect

[View on Framer](https://framer.com/marketplace/components/3d-pin/?via=elliot-li)

![3D Pin preview image 1](https://framer.elliotli.dev/og/component/3d-pin/94fdd410f084cfb0/1600x1200.jpg)

## Summary

3D Pin Effect

## Description

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.

Showcase

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10051

## Details

- **Author**: Snoweirdo
- **Price**: $18.00
- **Published**: 2025-09-05
- **Updated**: 2026-05-07
- **Added**: 2025-08-07
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background