A customizable AI Orchestration Animation where flowing particles converge through multiple paths to visualize AI workflows, pipelines, and process flows.
npm i framer-motionnpm i react-iconsThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
| Property | Default Value | Description |
|---|---|---|
| CurveRadius | 250 | Adjusts how sweeping the bezier curves are. |
| CurveWeight | 1.5 | Adjusts the thickness of the background lines. |
| CurcePillColor | "#10b981" | Easily change the theme accent (e.g., Cyan). |
| PillSpeed | 3.5 | Adjust the seconds it takes for a particle to cross. |
| PillWeight | 2.5 | Thickness of the moving pill. |
| PillLength | 14 | Length of the moving pill. |
| PillRadius | 1 | Border radius of the moving pill (use half of PillWeight for fully rounded ends). |