3d Pin
A gradient 3D product pin that unfolds on hover — the card leans back to expose a floating capsule label and a radar-ripple beam.
As the mouse enters, the card leans back along the X axis, a clickable capsule label floats up above it, and a gradient beam with concentric ripples shoots up from the ground, giving the spatial feel of a three-dimensional pin.
Loading preview…
npx shadcn@latest add https://webberui.com/r/3d-pin.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
40
<3dPin />
Installation
npx shadcn@latest add https://webberui.com/r/3d-pin.jsonOr, once registries are configured in components.json, install it as @webberui/3d-pin.
Usage
import { ThreeDPin } from "@/components/ui/3d-pin";
<ThreeDPin title="webberui.com" href="https://webberui.com">
<div className="h-[16rem] w-[16rem]">Card content</div>
</ThreeDPin>Put it inside a centered, bounded container (for example flex items-center justify-center), and the pin and beam will rise from the card's center.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "webberui.com" | Text on the capsule label that floats up |
href | string | — | Label link; when set, the whole card is clickable |
gradient | string | "from-cyan-400 via-sky-500 to-emerald-400" | Gradient classes for the label underline and the beam |
tilt | number | 40 | Angle the card leans back on hover (deg) |
children | ReactNode | — | Card content |
containerClassName | string | — | Applied to the outermost interactive container |
className | string | — | Applied to the card content frame |
Accessibility
- When the user has "reduce motion" enabled at the system level, the card no longer leans back and the concentric ripples stay static instead of running an infinite animation
- When
hrefis present the label renders as a link, carryingrel="noreferrer noopener"and opening in a new tab