3d Pin

Map-pin style 3D card with pulse rings and hover reveal for React

Hover and the card tilts back to reveal a glowing pin beneath, with pulse rings radiating outward. A title badge slides into view above. Great for highlighting featured projects, locations, or anything you want to draw attention to. Works as a link and is keyboard accessible.

3d Pin preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/3d-pin.json

npx shadcn@latest add https://www.shadcn.io/r/3d-pin.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/3d-pin.json

bunx shadcn@latest add https://www.shadcn.io/r/3d-pin.json

3D Card

Mouse-tracking tilt card

Animated Tooltip

Hover reveal content

Ripple

Expanding circle waves

FAQ

Was this page helpful?

3d Marquee

Isometric 3D image gallery with animated scrolling columns for React

Animated Cursor

Custom cursor replacement with smooth following animation for React

3d Pin

3d Pin preview

Installation

Related Components

3D Card

Animated Tooltip

Ripple

FAQ

How do I make it link somewhere?

Can I customize the title badge?

How do the pulse rings work?

What if I don't want it to be a link?