Pro
Connection beam
Sources feed a hub and the hub feeds destinations, with light running along each curve in the direction data goes. Curves are measured from where the real nodes land, so labels can be any length. A link can be idle.
pnpm dlx shadcn@latest add @caliper/connection-beamWhen to use
Use it for
- Integrations and data flow on a settings or landing page.
- Showing which connections are live at a glance.
Skip it when
- Real topologies with many links; use the flow diagram or system map.
- Anything where the order of events matters; a timeline says it better.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Light means live
- Only active links carry light. Idle ones are dashed and quiet, so the motion carries information instead of decorating.
- Pausable
- The light loops, so it has a pause button, stops offscreen and does not run under reduced motion.
Usage
- Said in words too
- A hidden list reads each link as a sentence (Stripe sends to Ledger), and the drawn nodes are hidden from assistive technology.
Installation
pnpm dlx shadcn@latest add @caliper/connection-beam
Adds its 2 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 { ConnectionBeam } from "@/components/ui/connection-beam"
The worked example comes with Pro
The 38-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
ConnectionBeam
component
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
- Flow diagramA labelled node-and-edge diagram where packets travel along active connections.
- System mapServices on three tiers, drawn as planes: edge, services, data. Pick one to see what it needs, or what breaks if it fails, across the tiers. Affected blocks turn danger-tinted, needed ones turn grey, and the summary lists them by name.
- Orbiting logosLogos orbiting a centre.