3D 圖示球雲 Icon Cloud｜免費 React 元件

以純 CSS 3D transform 把一組圖示均勻鋪在球面上，自動旋轉，並可用滑鼠或觸控拖曳操控，帶慣性收斂。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add icon-cloud

Icon Cloud 是用 React 與 Tailwind CSS 做的 3D 圖示球雲（icon cloud／tag cloud）元件：用 fibonacci 球面取點把圖示均勻分布，再以 requestAnimationFrame 逐幀計算旋轉與投影，直接寫入每個節點的 CSS transform。Motion 只用來讀取「減少動態效果」設定，不參與動畫本身。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

容器尺寸size

320

圖示尺寸iconSize

旋轉速度speed

可拖曳旋轉interactive

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<IconCloud/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

首頁或關於頁展示技術棧、支援的整合服務
開發者工具的「支援語言／框架」區塊
作品集頁面列出擅長的工具與軟體
活動或社群頁面展示合作夥伴的 logo（傳入圖片節點）
不適合：需要可點擊、可篩選的標籤清單，請改用 Physics Tags 或一般的標籤列表；球雲裡的節點對輔助科技是隱藏的

安裝

npx webberui@latest add https://webberui.com/r/icon-cloud.json

或在 components.json 設定 registries 後，改用 @webberui/icon-cloud 安裝。

使用

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} />,
  ]}
/>;

範例

用圖片當節點

icons 接受任意 React 節點，放 <img> 就能顯示品牌 logo 或自家圖檔。節點會被放進 iconSize 大小的方框裡置中。

import { IconCloud } from "@/components/ui/icon-cloud";

const stack = ["react", "nextjs", "tailwind", "postgres", "redis", "docker"];

<IconCloud
  iconSize={44}
  icons={stack.map((name) => (
    <img key={name} src={`/logos/${name}.svg`} alt="" width={44} height={44} />
  ))}
/>;

改圖示顏色

預設圖示用 currentColor 描邊，容器預設是 text-neutral-700（深色模式 text-neutral-200）。在 className 換文字色即可。

<IconCloud className="text-indigo-600 dark:text-indigo-300" />

純裝飾、不自動旋轉

speed={0} 停止自轉但仍可拖曳；再加 interactive={false} 就是完全靜態的裝飾圖。

<IconCloud size={240} iconSize={32} speed={0} interactive={false} />

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）

常見問題

可以在 Next.js App Router 使用嗎？

可以，檔案開頭已有 "use client"。首屏用固定的初始傾角渲染，伺服器與用戶端輸出一致，掛載後才啟動旋轉。

捲出畫面後還會一直計算嗎？

不會。元件用 IntersectionObserver 監看容器，離開視窗時取消 requestAnimationFrame 迴圈，捲回來再接上。旋轉角存在 ref 裡逐幀更新，不會觸發 React 重新渲染。

怎麼調整大小與速度？

size 是容器邊長、iconSize 是每個圖示的邊長，球體半徑為兩者差的一半。speed 是自轉倍率，0 為停止。

支援減少動態效果嗎？

支援。系統開啟「減少動態效果」時，球體定格在初始傾角，自動旋轉與拖曳都會停用。

需要哪些依賴？

motion、lucide-react、clsx 與 tailwind-merge。不想用 CLI 的話，可以從安裝區塊的「手動」分頁複製原始碼。

Icon Cloud

把這個效果裝進你的專案

本頁目錄