BeamFlow
Lines of light travelling between two points, weighted by a value.
@luc/ui/motionLive preview
The packet's position is the progress: `state` freezes it without removing the path.
<BeamFlow
points={[{ x: 0, y: 40 }, { x: 120, y: 12 }, { x: 240, y: 64 }, { x: 360, y: 28 }]}
state="active"
speed={3.2}
width={2}
label="Pipeline progress"
/>Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
A two-point S
Two waypoints draw one smooth S; a label makes the connector a real element instead of decoration.
<BeamFlow
points={[{ x: 0, y: 48 }, { x: 360, y: 16 }]}
state="active"
speed={4.5}
width={2}
label="Transfer progress"
/>Failed, with the path kept
`error` recolours the packet and stops it in place: the path stays, so the reader still sees where the run got to.
<BeamFlow
points={[{ x: 0, y: 40 }, { x: 120, y: 12 }, { x: 240, y: 64 }, { x: 360, y: 28 }]}
state="error"
speed={3.2}
width={3}
label="Pipeline failed"
/>Usage
import { BeamFlow } from "@luc/ui/motion";<BeamFlow
points={[{ x: 0, y: 40 }, { x: 120, y: 12 }, { x: 240, y: 64 }, { x: 360, y: 28 }]}
state="active"
speed={3.2}
width={2}
label="Pipeline progress"
/>API
| Export | Kind | Signature |
|---|---|---|
BeamFlow | 6 documented props | ({ className, points, state, width, speed, label, static: isStatic, ...props }: BeamFlowProps) => import("@types/react").JSX.Element |
BeamFlow props
Type: BeamFlowProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
label? | string | undefined | — | Accessible name. Omit it and the connector is decorative to a screen reader. |
points | readonly BeamPoint[] | — | Two or more waypoints. Two draws one smooth S; more draws a path through every node, which is what a pipeline diagram wants. |
speed? | number | undefined | — | Seconds for one packet to cross the path. |
state? | BeamState | undefined | — | |
static? | boolean | undefined | — | Freeze the packet without removing the path. |
width? | number | undefined | — | Stroke width in px. Uses `non-scaling-stroke`, so it never smears. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related