Falling Tags

A physics-based interactive tags playground inspired by the viral Falling Tags Framer component by Guo. When the section scrolls into view, tags fade in floating gently near the top, hover weightlessly for a moment, then lose their footing, drop, tumble, collide realistically, and pile up naturally at the bottom.

Visitors can grab any tag with a mouse or finger, drag it around, and fling it across the container with authentic velocity and angular momentum. Built with pure TypeScript and mathematical 2D rigid-body collision dynamics — zero external physics dependencies needed. Tags automatically follow your project's global theme radius (--radius).

Interactive physics arena

Watch the tags float into view, drop and tumble into a natural pile. Click and throw any tag with your mouse or finger.

palette"default": chooses the color scheme — "default", "colorful", "glass", "pastel", "monochrome", "neon", or "black-and-white".
hoverDuration1.4: how many seconds tags hover in anti-gravity before the drop begins.
gravity0.55: downward gravitational acceleration constant for realistic tumbling.
interactivetrue: enables real-time pointer drag and momentum-based throwing with impulse physics.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Falling Tags

npx shadcn@latest add @algorize-ui/falling-tags

components/custom/blocks/FallingTagsBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Falling Tags needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Colorful

Vibrant multi-color playful palette across rich indigo, emerald, rose, and amber tones.

Setpalette"colorful": for a vivid color distribution across all falling badges.

Glass

Translucent frosted glass badges with backdrop-blur and luminous specular borders over a scenic backdrop.

Setpalette"glass": for semi-transparent tags with backdrop blur that blend over dark, light, or image backgrounds.

Neon

High-energy glowing cyberpunk badges with vibrant borders and neon glow shadows.

Setpalette"neon": for intense saturated tones with electric glow box-shadows.

Pastel

Soft soothing aesthetic pastel badges designed for serene minimal layouts and creative portfolios.

Setpalette"pastel": for delicate muted pastel hues that maintain readability without visual clutter.

Monochrome

High-contrast editorial zinc and black/white palette tailored for modern minimalist dark and light themes.

Setpalette"monochrome": for a restrained black, white, and zinc palette that follows theme foreground/background tokens.

Black and white

High-contrast dual-tone black and white badges. Tags alternate between black background with white text and border, and white background with black text and border.

Setpalette"black-and-white": for dual-tone black and white badges with inverted high-contrast borders and text.

Features

Float-to-Drop Sequence

When scrolled into view, tags appear in the upper arena with a gentle floating levitation wave before gravity triggers the drop.

Real 2D Rigid-Body Physics

Mathematically exact capsule-capsule and capsule-wall collision solver with realistic mass, angular inertia, restitution bounce, and sliding friction.

Interactive Grab & Throw

Grab tags with your mouse or finger, toss them in any direction, and watch them rebound off walls and scatter other tags with momentum.

Zero External Dependencies

Built purely using native React and high-efficiency requestAnimationFrame loop. Zero bulky physics library dependencies.

Props Reference

Prop	Type	Default	Description
`tags`	`(string \| FallingTagItem)[]`	`DEFAULT_TAG_LABELS`	List of tag labels or custom tag objects with individual colors/icons.
`palette`	`"default" \| "colorful" \| "glass" \| "pastel" \| "monochrome" \| "neon" \| "black-and-white"`	`"default"`	Preset color distribution applied across the tags.
`gravity`	`number`	`0.55`	Vertical acceleration rate applied when falling.
`bounce`	`number`	`0.48`	Restitution coefficient between 0 (no bounce) and 1 (super bouncy).
`friction`	`number`	`0.985`	Velocity damping factor for air and contact surfaces.
`hoverDuration`	`number`	`1.4`	Duration in seconds that tags hover in anti-gravity before dropping.
`height`	`number \| string`	`500`	Height of the physics playground viewport.
`showControls`	`boolean`	`false`	Renders top action bar with Drop Again, Scatter, and Zero-G Float toggles.
`title`	`string`	`undefined`	Optional title shown in the top header bar when controls or title are enabled.
`description`	`string`	`undefined`	Optional subtitle description in the top header bar.
`interactive`	`boolean`	`true`	Allows pointer drag and toss throwing physics.
`autoStartOnView`	`boolean`	`true`	Triggers entrance drop when component scrolls into viewport.