Animated Pin
3D perspective pin with hover reveal, showing a content card that appears to float above the page.
Preview
Animated Pin
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Location markers, feature highlights, and interactive maps.
Why this component matters
The 3D perspective creates a dramatic sense of depth, making the pinned content feel elevated and important.
Usage guidance
Use for 1-3 featured items that need dramatic visual treatment. The pin should reveal content on hover. Dark backgrounds only.
Installation
bash
npx shadcn@latest add @aceternity/animated-pinUsage
example.tsxtsx
import { AnimatedPin } from "@/components/ui/animated-pin";
export default function Example() {
return (
<AnimatedPin>
{/* Your content here */}
</AnimatedPin>
);
}Source
animated-pin.tsx
components/ui/animated-pin.tsx