3d Pin
hover 展開的漸層 3D 產品圖釘，卡片後傾露出漂浮膠囊標籤與雷達漣漪光束。
滑鼠移入時卡片沿 X 軸後傾，上方浮出可點擊的膠囊標籤，地面射出漸層光束與同心漣漪，做出立體圖釘的空間感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
40
<3dPin />
安裝
npx shadcn@latest add https://webberui.com/r/3d-pin.json或在 components.json 設定 registries 後，改用 @webberui/3d-pin 安裝。
安裝依賴後，從 registry JSON（/r/3d-pin.json 的 files[0].content）複製 3d-pin.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ThreeDPin } from "@/components/ui/3d-pin";
<ThreeDPin title="webberui.com" href="https://webberui.com">
<div className="h-[16rem] w-[16rem]">卡片內容</div>
</ThreeDPin>放進一個置中的有界容器（例如 flex items-center justify-center），卡片會以其中心浮出圖釘與光束。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | "webberui.com" | 浮出膠囊標籤上的文字 |
href | string | — | 標籤連結；有值時整張卡片可點擊 |
gradient | string | "from-cyan-400 via-sky-500 to-emerald-400" | 標籤底線與光束的漸層 class |
tilt | number | 40 | hover 時卡片後傾的角度（deg） |
children | ReactNode | — | 卡片內容 |
containerClassName | string | — | 套在最外層互動容器上 |
className | string | — | 套在卡片內容框上 |
可及性
- 使用者系統開啟「減少動態效果」時，卡片不再後傾，同心漣漪維持靜態不做無限動畫
- 標籤在
href存在時渲染為連結，並帶rel="noreferrer noopener"於新分頁開啟