Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Drop pile

Things that fall in and pile up like real objects: letters for a headline, digits for a count. They bounce off the walls and each other, settle, and can be picked up and thrown. It runs only on screen and sleeps once still.

Pro
pnpm dlx shadcn@latest add @caliper/drop-pile

Launch week

Pick a letter up and throw it.

Installs components/ui/drop-pile.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

  • A playful moment on a launch, a 404 or an empty state.
  • Marketing pages where the words can be touched.

Skip it when

  • Product screens and anything people need to read quickly.
  • More than about twenty bodies; it is a toy, not a simulation.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Sleeps when still
The loop stops once the pile has been still for half a second, off screen or in a hidden tab, and wakes on a throw or a resize.
One image, one name
The field is a single image named by label; under reduced motion the pile is drawn at rest.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/drop-pile

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { DropPile } from "@/components/ui/drop-pile"

The worked example comes with Pro

The 26-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

DropPile

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
items *readonly ReactNode[]—What falls: letters, digits, emoji or small elements. Each is a round body.
label *string—What the pile says, for assistive technology: "Ship it".
sizenumber56Body size in px; the drop field's own height comes from the class or style.
dropKeystring | number0Change it to drop everything again.

Accessibility

It exposes img semantics, with aria-label and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Surfaces examples