Pro
Clock wall
A wall of small analog clocks whose hands line up to draw digits. When the value changes every hand sweeps into a slanting wave across the wall, then turns on into the new figure, always clockwise, rippling from left to right.
pnpm dlx shadcn@latest add @caliper/clock-wallWhen to use
Use it for
- The time, a countdown or a single headline number on an office screen, a launch page or an event.
- A calm centrepiece where the change itself is the moment.
Skip it when
- Numbers that change more than about once every few seconds; each change takes three.
- Anything people must read at a glance in a dense interface.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Always clockwise
- Every hand keeps its total turn and only adds to it, so CSS always animates forward the way a clock would.
- Read as text
- The wall is an image named by the time ("09:41") or the value; under reduced motion the hands move at once.
Styling
- Junctions favour the upright
- Each clock has two hands; where a stroke meets three neighbours the vertical wins, which keeps 4, 6, 8 and 9 legible.
Installation
pnpm dlx shadcn@latest add @caliper/clock-wall
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. It is built from ClockWall and clockPoses.
import { ClockWall, clockPoses } from "@/components/ui/clock-wall"
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
ClockWall
component
Also accepts the native props of its root element and a ref.
clockPoses
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-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.