Pro
Pendulum wave
A row of pendulums seen from above, each a little quicker than the last. They start in line, drift into a travelling wave, braid into snakes, scatter, and come back into line at the end of each cycle.
pnpm dlx shadcn@latest add @caliper/pendulum-waveWhen to use
Use it for
- Long waits where progress cannot be measured: syncing, indexing, importing.
- A calm piece of motion for an about page or an empty state.
Skip it when
- Short waits; use the loader.
- Measurable progress; show the progress bar instead.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Real physics, exactly
- Pendulum k swings base + k times per cycle, so every pattern is the real one and the line re-forms on time, forever.
- Named for the wait
- The drawing is an image named by
label, such as "Syncing your library"; under reduced motion it holds the single clean wave.
Installation
pnpm dlx shadcn@latest add @caliper/pendulum-wave
Adds its 4 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.
import { PendulumWave } from "@/components/ui/pendulum-wave"
The worked example comes with Pro
The 29-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
API reference
PendulumWave
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes img semantics, with aria-label and aria-pressed kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.