Pro
Harmonograph
A pen moved by two pairs of slowly dying pendulums draws one continuous line, spiralling inward into a rosette over half a minute. When the figure is done it rests, fades, and the pendulums are set going again with new swings.
pnpm dlx shadcn@latest add @caliper/harmonographWhen to use
Use it for
- Long waits: rendering, exporting, generating.
- A quiet, generative centrepiece for an about page or an empty state.
Skip it when
- Short waits; use the loader.
- Waits with known progress; show the progress bar.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Ratios that close
- Frequencies come from small whole-number ratios with a slight detune, so every figure is a readable rosette rather than noise.
- Seeded
- The same seed always draws the same first figure, so screenshots and tests are stable.
Installation
pnpm dlx shadcn@latest add @caliper/harmonograph
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. It is built from Harmonograph, harmonographAt and harmonographPendulums.
import { Harmonograph, harmonographAt, harmonographPendulums } from "@/components/ui/harmonograph"
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
API reference
Harmonograph
component
Also accepts the native props of its root element and a ref.
harmonographAt
component
No props of its own; it accepts the native props of its root element.
harmonographPendulums
component
No props of its own; it accepts the native props of its root element.
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
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.
Related
- Pendulum waveA 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.
- Draw onWraps an inline SVG so its strokes draw themselves in, one after another, when it scrolls into view. Nodes can fade in after their line arrives.
- Thinking loaderA short animated loader for the moment before a reply begins.