Activity terrain
ProActivity drawn as a 3D landscape.
pnpm dlx shadcn@latest add @caliper/activity-terrain| Week starting | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| Monday, April 28 | 17 | 29 | 27 | 34 | 11 | 5 | 1 |
| Monday, May 5 | 23 | 30 | 38 | 32 | 28 | 4 | 6 |
| Monday, May 12 | 45 | 29 | 27 | 29 | 35 | 2 | 2 |
| Monday, May 19 | 44 | 23 | 36 | 35 | 21 | 3 | 5 |
| Monday, May 26 | 42 | 40 | 42 | 41 | 28 | 6 | 5 |
| Monday, June 2 | 31 | 23 | 36 | 39 | 26 | 1 | 5 |
| Monday, June 9 | 46 | 22 | 36 | 26 | 41 | 3 | 4 |
| Monday, June 16 | 47 | 46 | 37 | 22 | 36 | 2 | 2 |
| Monday, June 23 | 24 | 38 | 23 | 17 | 38 | 1 | 1 |
| Monday, June 30 | 14 | 35 | 39 | 17 | 33 | 3 | 7 |
| Monday, July 7 | 22 | 36 | 30 | 37 | 24 | 1 | 6 |
| Monday, July 14 | 25 | 32 | 11 | 32 | 28 | 7 | 8 |
| Monday, July 21 | 19 | 13 | 8 | 17 | 19 | 2 | 5 |
| Monday, July 28 | 1 | 18 | 23 | -1 | 25 | 0 | 4 |
| Monday, August 4 | 27 | 11 | 27 | 23 | 5 | 0 | 2 |
| Monday, August 11 | 26 | 6 | 27 | 26 | 11 | 1 | 6 |
| Monday, August 18 | 17 | 13 | 8 | 16 | 22 | 7 | 6 |
| Monday, August 25 | 13 | 16 | 33 | 14 | 30 | 8 | 5 |
| Monday, September 1 | 13 | 25 | 15 | 17 | 12 | 1 | 3 |
| Monday, September 8 | 32 | 33 | 42 | 37 | 41 | 6 | 2 |
| Monday, September 15 | 33 | 42 | 37 | 56 | 44 | 3 | 2 |
| Monday, September 22 | 65 | 56 | 38 | 47 | 39 | 3 | 6 |
| Monday, September 29 | 54 | 56 | 41 | 45 | 41 | 1 | 5 |
| Monday, October 6 | 52 | 60 | 68 | 40 | 62 | 4 | 6 |
| Monday, October 13 | 63 | 69 | 64 | 59 | 44 | 3 | 2 |
| Monday, October 20 | 52 | 49 | 51 | 64 | 47 | 0 | 4 |
When to use #
Use it for
- A showpiece for rhythm over a year.
Skip it when
- Exact values matter.
Installation #
pnpm dlx shadcn@latest add @caliper/activity-terrain
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 { ActivityTerrain } from "@/components/ui/activity-terrain"
The worked example comes with Pro
The 16-line example behind the preview opens here with a Pro or Team licence.
API reference #
ActivityTerrain
component
Accessibility #
It exposes group and status semantics, with aria-label and aria-hidden kept in step with state. Changes that matter are announced through a live region.
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.