文字雲

以阿基米德螺旋做決定性佈局的權重文字雲：權重大的詞佔據中心、字級與透明度隨權重映射，進場由中心向外 stagger 淡入，滑過或聚焦時詞彙浮起並顯示權重 tooltip，點擊觸發回呼，適合關鍵詞分析與回饋視覺化。

載入預覽⋯

Playground

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

最小字級minFontSize

最大字級maxFontSize

畫布高度height

400

進場間隔（秒）stagger

0.04

<WordCloud />

安裝

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

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

安裝依賴後，從 registry JSON（/r/word-cloud.json 的 files[0].content）複製 word-cloud.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

import { WordCloud } from "@/components/ui/word-cloud";

<WordCloud
  words={[
    { text: "設計系統", weight: 100 },
    { text: "React", weight: 88 },
    { text: "動畫", weight: 64 },
  ]}
  onWordClick={(word) => console.log(word.text, word.weight)}
/>

Props

Prop	型別	預設值	說明
`words`	`WordCloudWord[]`	—	詞彙清單，每項為 `{ text, weight }`，權重越大字級越大、越靠近中心
`palette`	`string[]`	內建 5 色	配色循環清單（任何合法 CSS 顏色），依原始 index 輪替指派
`width`	`number`	`640`	佈局邏輯寬度（SVG viewBox，實際尺寸隨容器縮放）
`height`	`number`	`400`	佈局邏輯高度（SVG viewBox）
`minFontSize`	`number`	`14`	最小字級（對應最低權重）
`maxFontSize`	`number`	`56`	最大字級（對應最高權重）
`stagger`	`number`	`0.04`	進場 stagger 間隔（秒），依放置順序由中心向外淡入
`onWordClick`	`(word, index) => void`	—	點擊詞彙時的回呼，帶原始資料與 index
`className`	`string`	—	透傳到外層容器

可及性

佈局完全決定性（index 種子偽隨機），SSR 與 CSR 輸出一致，無 hydration 落差
每個詞彙可鍵盤聚焦（Tab），聚焦同樣顯示權重 tooltip，Enter / Space 觸發點擊回呼
每個詞附 aria-label 完整朗讀「詞彙（權重 N）」；提供 onWordClick 時詞彙帶 role="button"
使用者系統開啟「減少動態效果」時，跳過進場與浮起動畫，直接呈現最終佈局

Playground

安裝

使用

Props

可及性

On this page