Pro
Signal lines
Stacked signal traces, each a quiet line with a burst of peaks in the middle, drawn front to back so every line hides the ones behind it like a ridge in mist. The peaks drift and breathe, and the pointer raises a swell on the lines beneath it.
pnpm dlx shadcn@latest add @caliper/signal-linesWhen to use
Use it for
- Heroes for observability, audio, science and data products.
- A record or album page that wants the famous pulsar-plot look.
Skip it when
- Real measurements; it is generated and means nothing.
- Behind long text.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Spikes over calm
- Squared noise inside a middle envelope gives sharp peaks over quiet edges, the shape that makes the plot recognisable.
Styling
- Hidden lines
- Each trace fills beneath itself with the ground behind the part, so it works on any background colour and in both themes.
Installation
pnpm dlx shadcn@latest add @caliper/signal-lines
Adds its 5 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 { SignalLines } from "@/components/ui/signal-lines"
The worked example comes with Pro
The 18-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
SignalLines
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden and aria-pressed 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.
Related
- Contour fieldA topographic map that slowly breathes: contour lines over drifting terrain, with every fifth line drawn heavier like an index contour. Resting the pointer raises a hill, so the lines gather into rings around it and relax when it leaves.
- RidgelineStacked distributions that overlap for easy comparison.
- Live indicatorWhether a feed is live, in words and a dot. The dot sends out a soft ring only while live, blinks while reconnecting and rests otherwise, and gives one extra ring for each update you tell it about.