Physics Tag Pile: React + Tailwind Component

Tags drop and pile up like physical objects, and can be picked up and thrown — a 2D physics simulation.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/physics-tags.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Gravitygravity

1400

Elasticityrestitution

0.3

Container heightheight

300

import * as React from "react";

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

Active edited usageDefault props

<PhysicsTags/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/physics-tags.en.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 separate sr-only static list so screen readers can read out every tag in full
The container carries role="group" and a descriptive aria-label (including the total tag count)
Touch dragging is supported (touch-action: none is 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

Physics Tag Pile