EffectsAlea Pro

OrbitingCircles and AnimatedBeam

Show what connects to what: icons circling a center (integrations), and a light traveling along a curve from one element to another (data flow).

import { OrbitingCircles, AnimatedBeam } from '@alea/pro';

Examples

Orbiting circles

"Works with all of these": items circle a center and stay upright.

Animated beam

A light travels along a curve between two elements: data flowing from one to the other.

Your data to the model

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-border-strong…
--alea-surface-raised…

Shadow

--alea-shadow-card…

Component

--alea-orbit-a…
--alea-orbit-duration…
--alea-orbit-r…

Props

`OrbitingCircles` props

Icons or avatars circling a center, for "connects with all of these" (integrations). Pass the items; they stay readable (not rotated).

Prop	Type	Default
`center`	`ReactNode`	-
`className`	`string`	-
`duration`	`number`	`24`
`radius`	`number`	`120`
`reverse`	`boolean`	-

`AnimatedBeam` props

A light that travels along a curved line between two elements: "data flows from here to there" (integrations, pipelines).

Prop	Type	Default
`container`required	`RefObject<HTMLElement \| null>`	-
`from`required	`RefObject<HTMLElement \| null>`	-
`to`required	`RefObject<HTMLElement \| null>`	-
`className`	`string`	-
`curvature`	`number`	`40`
`duration`	`number`	`3`
`reverse`	`boolean`	-

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

`OrbitingCircles`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-orbit.alea-orbit-path.alea-orbit-center.alea-orbit-items
Data attributes: data-reverse

`AnimatedBeam`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-animated-beam.alea-animated-beam-light

The motion is decoration: say what connects in text too.
Orbits and beams stop with reduced motion and stay where they are.

Do and don't

Use it in a hero or a feature section to show integrations or a data flow.
Say in text what connects to what.

Don't

Don't use it as the only explanation.
Don't put more than about eight icons on an orbit.