Pro
Hourglass
A sand timer for a short, fixed time. Sand drains from the top bulb in a thin stream and heaps up in the bottom one, with the time left beneath. Flip turns the glass over and starts again.
pnpm dlx shadcn@latest add @caliper/hourglassWhen to use
Use it for
- Quiz answers, turns in a game and timed holds.
- Short waits where a clock feels too strict.
Skip it when
- Times longer than a few minutes; use `TimerDial` or `Countdown`.
- Waiting on a computer task; use a progress indicator.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Styling
- Sand moves inside the glass
- The sand levels move inside fixed clips, so the glass stays still while the levels change.
Usage
- Spoken sparingly
- The time left is announced every ten seconds and at the end, not every second.
Installation
pnpm dlx shadcn@latest add @caliper/hourglass
Adds its 3 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 { Hourglass } from "@/components/ui/hourglass"
The worked example comes with Pro
The 23-line example behind the preview opens here, ready to copy.
- 602 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
Hourglass
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes img semantics, with aria-label, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.
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.
Related
- Timer dialA wind-up timer. Drag round the dial to set the minutes and a red wedge opens with your finger; let go and it starts, the wedge shrinking back to twelve as time runs out, with a small tick each second and a shake at zero.
- CountdownA live countdown to a date, in a large or compact style.
- Progress ringDeterminate progress in a ring that eases to each value, draws a check when done and a cross when it fails.