Gravity tag pile

Tags fall, bounce, spin and pile up with real physics. Grab one and throw it, sweep the cursor through the pile, or click for a pop.

Backgrounds, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/gravity-tag-pile.tsx https://motion-brew.com/r/gravity-tag-pile.tsx

One self contained file for React and Tailwind CSS: gravity-tag-pile.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { GravityTagPile } from "@/components/gravity-tag-pile";

export default function Page() {
  return (
    <GravityTagPile
      theme="candy"
      entrance="sequence"
      tags={[
        "Branding",
        "Web design",
        { label: "Motion", href: "/motion" },
        { label: "Ana", image: "/ana.jpg", color: "#111", textColor: "#fff" },
      ]}
      className="h-[480px]"
    />
  );
}

Props

Prop	Type	Default	Description
tags	(string \	{ label; color?; textColor?; image?; href? })[]	design skills	Tags, as labels or objects
theme	"studio" \	"pastel" \	"candy" \	"mono" \	"earth"	"studio"	Solid tag palette
pattern	"none" \	"dots" \	"grid"	"none"	Background pattern
entrance	"random" \	"sequence" \	"together"	"random"	How tags arrive
gravity	number	2200	Downward pull, px/s²
bounce	number	0.3	Bounciness, 0 to 1
friction	number	0.6	Grip, 0 to 1
throwStrength	number	1	Speed kept on release
squash	number	0.6	Squash on impact, 0 to 1
cursorPush	boolean	true	Cursor nudges tags it brushes
border	boolean	true	Hairline border on each tag
shadow	boolean	true	Drop shadow under each tag
imageSize	number	26	Image size, px
title	string		Optional heading behind the pile
description	string		Optional line under the heading
titleClassName	string		Heading typography
descriptionClassName	string		Description typography
tagClassName	string		Classes for every tag (padding, font, size)
showReset	boolean	false	Show a drop-again button in the corner
onTagClick	(tag, index) => void		Called on click, not on drag
className	string		Size and shape of the box

More backgrounds

Prism flow: A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism.
Spatial gallery: A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go.
Pixel blast: A background of dithered pixel clouds that drift, shimmer and light up under the cursor.
Contour lines: A background of live topographic lines that bend around the cursor.

All animated react backgrounds and shaders