Pro
Breath guide
A paced breathing guide. The circle grows as you breathe in, rests while you hold and shrinks as you breathe out, at the pace of the pattern, with the step and its count beneath and a ring that fills through each step.
pnpm dlx shadcn@latest add @caliper/breath-guideWhen to use
Use it for
- Wellness, focus and meditation apps.
- A calm pause before an exam, a call or a hard task.
Skip it when
- Medical guidance; it is a pacing aid.
- Busy screens; give it room and quiet.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Paced by the pattern
- Each step's growth or shrink lasts exactly its seconds, so the circle is the pace to follow.
Usage
- Words carry it too
- The step is announced and counted, so it works with eyes closed or motion reduced.
Installation
pnpm dlx shadcn@latest add @caliper/breath-guide
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 { BreathGuide, breathPatterns } from "@/components/ui/breath-guide"
The worked example comes with Pro
The 34-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
BreathGuide
component
Also accepts the native props of its root element and a ref.
breathPatterns
helper
A helper exported alongside the component, not a component.
Accessibility
It is built on native elements and keeps aria-hidden and aria-live 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 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.
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.
- Voice orbAn animated orb that shows idle, listening, thinking and speaking states.
- Progress ringDeterminate progress in a ring that eases to each value, draws a check when done and a cross when it fails.