Falling Tag List
A hover list where each oversized name springs open, fans a small stack of thumbnails up from behind it, and drops its descriptor tags in as rounded physics pills that tumble and settle on a floor. Leaving fades the pills, collapses the row, and slides the images back down, with the name flipping between a resting and an active color. GSAP for the springs, Matter.js for the pile.
npx shadcn@latest add https://ui.aryank.space/r/falling-tag-list.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| services | { name; tags: string[]; images: string[] }[] | Silhouette / Chroma / Persona | Each row's name, descriptor tags, and fanned thumbnails. |
| background | string | "#171717" | List background and the chip behind each name. |
| nameColor / hoverColor | string | "#ff3831" / "#ffffd9" | Resting and active name color. |
| tagColor | string | "#ffffd9" | Pill text and border color. |
backgroundcolorList backdrop and the chip fill behind each name.
nameColor / hoverColorcolorResting and active name color.
tagColorcolorPill text and border color.
servicesasset-urlEach service's name, tags, and thumbnails, hosted through https://ui.aryank.space/assets/falling-tag-list/service_1_img_1.jpg and the rest of the set.
gsapmatter-js