Link Preview
hover 錨點時浮出動態網站預覽卡，卡片跟隨游標傾斜，純 canvas 2D 繪製，不需外部圖片。
hover 內文連結時，上方浮出一張擬真的網站預覽卡——瀏覽器工具列、網址列與落地頁版面全由 canvas 2D 即時繪製，配色依網域自動生成。卡片會跟隨游標水平移動並輕微傾斜。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
320
200
40
<LinkPreview />
安裝
npx shadcn@latest add https://webberui.com/r/link-preview.json或在 components.json 設定 registries 後，改用 @webberui/link-preview 安裝。
安裝依賴後，從 registry JSON（/r/link-preview.json 的 files[0].content）複製 link-preview.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { LinkPreview } from "@/components/ui/link-preview";
<p>
我們用 <LinkPreview url="https://motion.dev">Motion</LinkPreview> 打造動畫。
</p>children 是可見的錨點內容，url 同時作為連結目標與預覽卡的配色種子。同一個網域每次都會得到一致的色調。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
url | string | — | 連結目標，也用來生成網域列與配色 |
children | React.ReactNode | — | 可見的錨點內容 |
width | number | 320 | 預覽卡寬度（px） |
height | number | 200 | 預覽卡高度（px） |
accent | string | — | 覆寫主色（HSL/HEX）；不給則依網域雜湊生成 |
follow | number | 40 | 卡片跟隨游標水平位移的最大幅度（px） |
openInNewTab | boolean | true | 是否在新分頁開啟連結 |
className | string | — | 透傳到錨點的樣式 |
可及性
- 使用者系統開啟「減少動態效果」時，卡片以淡入淡出取代跟隨與傾斜的彈簧動畫
- 連結可鍵盤聚焦，
focus時同樣浮出預覽卡；預覽卡本身標記aria-hidden，不干擾朗讀 - canvas 只在
useEffect內繪製並依devicePixelRatio縮放，SSR 不會出現 hydration 落差