EfectosAlea Pro

OrbitingCircles y AnimatedBeam

Muestra qué se conecta con qué: íconos que giran alrededor de un centro (integraciones), y una luz que viaja por una curva de un elemento a otro (flujo de datos).

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

Ejemplos

Círculos en órbita

"Funciona con todos estos": los elementos giran alrededor de un centro y se mantienen derechos.

Haz animado

Una luz viaja por una curva entre dos elementos: datos que fluyen de uno al otro.

Your data to the model

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

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

Shadow

--alea-shadow-card…

Component

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

Props

`OrbitingCircles` props

Íconos o avatares que giran alrededor de un centro, para "se conecta con todos estos" (integraciones). Pasa los items; siguen legibles (no rotan).

Prop	Tipo	Por defecto
`center`	`ReactNode`	-
`className`	`string`	-
`duration`	`number`	`24`
`radius`	`number`	`120`
`reverse`	`boolean`	-

`AnimatedBeam` props

Una luz que viaja por una línea curva entre dos elementos: "los datos fluyen de aquí a allá" (integraciones, pipelines).

Prop	Tipo	Por defecto
`container`obligatoria	`RefObject<HTMLElement \| null>`	-
`from`obligatoria	`RefObject<HTMLElement \| null>`	-
`to`obligatoria	`RefObject<HTMLElement \| null>`	-
`className`	`string`	-
`curvature`	`number`	`40`
`duration`	`number`	`3`
`reverse`	`boolean`	-

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.