Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Compass field

A field of compass needles. At rest they follow a calm, gently varied north; when the pointer comes in they swing round on springs to point at it, overshooting a little, and a click sends a ring outward that spins each needle as it passes.

Pro
pnpm dlx shadcn@latest add @caliper/compass-field

No routes yet

Plan a route and it will show here with its stops.

Installs components/ui/compass-field.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Backdrops for navigation, travel and onboarding ("find your bearings").
  • Empty states that should invite the pointer in.

Skip it when

  • Behind dense content.
  • Touch-first screens, where there is no hover to follow.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Near needles answer first
Spring stiffness falls with distance, so a turn ripples outward from the pointer instead of every needle snapping at once.
Sleeps when still
Nothing moves at rest, so there is no pause button to need; under reduced motion needles turn at once without swinging.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/compass-field

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.

example.tsx
import { CompassField } from "@/components/ui/compass-field"

The worked example comes with Pro

The 17-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
Checking your licence…

API reference

CompassField

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
spacingnumber30Distance between needles in px.

Accessibility

It is built on native elements and keeps aria-hidden in step with state.

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.

All Surfaces examples