Icon Cloud
可互動的 3D 標籤／圖示球雲，可拖曳旋轉並自動轉動。
以純 CSS 3D transform 把一組圖示均勻鋪在球面上，自動旋轉，並可用滑鼠或觸控拖曳操控，帶慣性收斂。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
320
40
1
<IconCloud />
安裝
npx shadcn@latest add https://webberui.com/r/icon-cloud.json或在 components.json 設定 registries 後，改用 @webberui/icon-cloud 安裝。
安裝依賴後，從 registry JSON（/r/icon-cloud.json 的 files[0].content）複製 icon-cloud.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { IconCloud } from "@/components/ui/icon-cloud";
<IconCloud size={300} iconSize={38} speed={1} />;傳入自訂圖示節點以替換預設集合：
import { Github, Twitter, Figma } from "lucide-react";
<IconCloud
icons={[
<Github key="gh" width={40} height={40} />,
<Twitter key="tw" width={40} height={40} />,
<Figma key="fg" width={40} height={40} />,
]}
/>;Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
icons | React.ReactNode[] | 內建 lucide 圖示集 | 鋪在球面上的圖示節點 |
size | number | 320 | 容器邊長（px） |
iconSize | number | 40 | 每個圖示邊長（px） |
speed | number | 1 | 自動旋轉速度倍率，0 為停止 |
interactive | boolean | true | 是否可拖曳旋轉（僅指標裝置） |
className | string | — | 透傳至容器 |
可及性
- 使用者系統開啟「減少動態效果」時，球體定格於初始傾角、停止自動旋轉與拖曳
- 圖示皆為裝飾性內容，對輔助科技隱藏（
aria-hidden）