A React Workflow Pipeline Animation component for visualizing data flows, workflows, processes, integrations, and multi-step systems.
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 |
|---|---|---|
| particleCount | 2 | Control the number of particles |
| particleSpeed | 3 | Control the speed of particles |
| particleSize | 2.5 | Control the size of particles |