Physics Tag Pile
Tags drop and pile up like physical objects, and can be picked up and thrown — a 2D physics simulation.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
Pill tags drop in sequence from the top of the container, colliding, jostling, and piling up at the bottom; you can grab and drag them with the mouse or touch, and fling them (with velocity momentum), and any tag they hit picks up momentum too. The physics engine is a hand-written lightweight 2D capsule collision simulation (gravity, restitution, friction, an rAF loop) with zero external physics libraries — great for skill walls, interest tags, and other playful showcases.
npx shadcn@latest add "https://webberui.com/r/physics-tags.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PhysicsTags />
Installation
npx shadcn@latest add "https://webberui.com/r/physics-tags.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/physics-tags.
Usage
import { PhysicsTags } from "@/components/ui/physics-tags";
<PhysicsTags
tags={[
{ label: "React", hue: 200 },
{ label: "TypeScript", hue: 215 },
{ label: "Motion design", hue: 330 },
]}
gravity={1400}
height={340}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tags | PhysicsTagItem[] | — | The tag data array; changing it makes the tags drop again |
tags[].label | string | — | Display text of the tag |
tags[].hue | number | evenly spread around the hue wheel by index | Hue 0–360, deciding this tag's colours |
gravity | number | 1400 | Gravitational acceleration (px/s²) |
restitution | number | 0.3 | Collision restitution 0–1; higher is bouncier |
height | number | 360 | Container height (px) |
className | string | — | Forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, no simulation starts at all and the tags are presented as a static flex arrangement at the bottom of the container
- The physics-layer pills are hidden from assistive technology (
aria-hidden), with a separatesr-onlystatic list so screen readers can read out every tag in full - The container carries
role="group"and a descriptivearia-label(including the total tag count) - Touch dragging is supported (
touch-action: noneis applied only to the tags themselves, so page scrolling is unaffected) - The rAF loop pauses automatically when the component scrolls out of the window, saving power and CPU
Coachmark Tour Flow
A product tour overlay — an SVG mask morphs the spotlight between target elements while the explanation card anchors to the best side and flies along as you step, tracking the target through scroll.
Magnetic Fridge Poetry
Fridge magnet word tiles you drag freely to compose sentences, with slight rotation and a snap-on feel.