An animated integration network that connects your product with multiple apps and services, making it ideal for SaaS integration pages, connected-app showcases, and product ecosystems.
npm i framer-motion| Property | Default Value | Description |
|---|---|---|
| icons | ReactNode[] | Array of custom images or icons for the 6 outer nodes. Falls back to default SVGs. |
| centerContent | ReactNode | Custom content for the center node. Overrides the default animated "Integrated" button. |
| curve | 150 | Controls the bezier curve sweep for the 4 corner connection lines. |
| centerGapX | 70 | How far the side lines stop from the center node along the X-axis. |
| centerGapY | 30 | How far the top and bottom lines stop from the center node along the Y-axis. |
| nodeGap | 40 | How far the lines start from the outer connecting nodes. |
| curveColor | "#ffffff" | Color of the background bezier connection curves. |
| particleSpeed | 3 | Duration (in seconds) it takes for a particle to travel the path once. |
| particleColor | "#ffffff" | Color of the moving particle. |
| particleLength | 12 | Length of the traveling dash (use 4-8 for perfectly round dots). |
| particleRadius | 2 | Border radius of the traveling particle. |
| particleWeight | 4 | Thickness/height of the traveling particle. |
| particleGlow | "drop-shadow(0 0 8px #ffffff)" | CSS filter used to generate the glowing effect behind the particle. |
| strokeWidth | 1.5 | Thickness of the static background bezier curves. |