An animated React data flow component for visualizing integrations, data pipelines, AI workflows, and connections between products or services.
npm i framer-motionThis 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 |
|---|---|---|
| leftGap | 15 | Controls the vertical percentage spread from the center for the top and bottom cards on the left side. |
| rightGap | 15 | Controls the vertical percentage spread from the center for the top and bottom cards on the right side. |
| Left Side Control | ||
| leftpathColor | "#4b5563" | Sets the stroke color of the SVG connection lines on the left side. Defaults to a Tailwind gray class if omitted. |
| leftparticleColor | "#ef4444" | Sets the fill color and drop-shadow glow of the moving data particles on the left side. |
| leftparticleSpeed | 2.5 | The duration (in seconds) it takes for a left particle to complete one full animation loop. |
| leftpathWidth | 1.5 | Defines the stroke thickness of the left connecting lines. |
| leftparticleSize | 4 | Defines the radius size of the moving data particles on the left side. |
| Right Side Control | ||
| rightpathColor | "#4b5563" | Sets the stroke color of the SVG connection lines on the right side. Defaults to a Tailwind gray class if omitted. |
| rightparticleColor | "#10b981" | Sets the fill color and drop-shadow glow of the moving data particles on the right side. |
| rightparticleSpeed | 2.5 | The duration (in seconds) it takes for a right particle to complete one full animation loop. |
| rightpathWidth | 1.5 | Defines the stroke thickness of the right connecting lines. |
| rightparticleSize | 4 | Defines the radius size of the moving data particles on the right side. |