Gravity Box
A physics-based tag cloud using Matter.js, where tags respond to gravity and collisions.
Gravity Box
React
Next.js
Tailwind
TypeScript
JavaScript
CSS
HTML
Node.js
GraphQL
Redux
Firebase
MongoDB
Drag the tags to move them around. Watch them collide and respond to gravity!
Installation
Install this component and its dependencies with a single command.
npx shadcn@latest add https://ui.voxletstudio.com//r/gravity-box.jsonOnce your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/gravity-box
Props
GravityBoxProps
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | Tag[] | [] | An array of tags, each containing text and a background color. |
Tag
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The display text for the tag. |
| color | string | - | The background color of the tag. |