Word Cloud
Weighted word cloud: font size mapped to weight, spiral layout, and words lifting on hover to show their value.
A weighted word cloud laid out deterministically on an Archimedean spiral: heavier words claim the center, font size and opacity are mapped from the weight, the reveal staggers a fade in from the center outward, and hovering or focusing a word lifts it and shows a weight tooltip while clicking fires a callback — which suits keyword analysis and feedback visualization.
Loading preview…
npx shadcn@latest add https://webberui.com/r/word-cloud.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
14
56
400
0.04
<WordCloud />
Installation
npx shadcn@latest add https://webberui.com/r/word-cloud.jsonOr, once registries are configured in components.json, install it as @webberui/word-cloud.
Usage
import { WordCloud } from "@/components/ui/word-cloud";
<WordCloud
words={[
{ text: "Design system", weight: 100 },
{ text: "React", weight: 88 },
{ text: "Animation", weight: 64 },
]}
onWordClick={(word) => console.log(word.text, word.weight)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words | WordCloudWord[] | — | The list of words, each { text, weight }; the heavier the weight, the larger the font size and the closer to the center |
palette | string[] | 5 built-in colors | The color cycle list (any valid CSS colors), assigned in rotation by original index |
width | number | 640 | Logical layout width (the SVG viewBox; the actual size scales with the container) |
height | number | 400 | Logical layout height (the SVG viewBox) |
minFontSize | number | 14 | Minimum font size (for the lowest weight) |
maxFontSize | number | 56 | Maximum font size (for the highest weight) |
stagger | number | 0.04 | Reveal stagger interval (seconds), fading in from the center outward in placement order |
onWordClick | (word, index) => void | — | Callback fired when a word is clicked, carrying the original data and the index |
className | string | — | Forwarded to the outer container |
Accessibility
- The layout is fully deterministic (index-seeded pseudo-randomness), so SSR and CSR output match and there is no hydration mismatch
- Every word is keyboard focusable (
Tab) and shows the weight tooltip on focus just as on hover, withEnter/Spacefiring the click callback - Each word carries an
aria-labelannouncing "word (weight N)" in full; whenonWordClickis provided, words carryrole="button" - When the user has "reduce motion" enabled at the system level, the reveal and lift animations are skipped and the final layout is shown directly