An animated network component for visually connecting apps, services, brands, or other entities around a central origin. Use it for SaaS integrations, partner ecosystems, connected services, relationship diagrams, or product networks.
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 |
|---|---|---|
| topIcon | ReactNode | Pass your custom imported image or icon for the top central node. |
| bottomIcons | ReactNode[] | Array of custom images or icons for the bottom nodes. |
| curve | 100 | Sweep of the bezier curve. |
| curveColor | "" | Leaves adaptive styling, or override with hex. |
| topGap | 0 | Disconnects the curve from the top node. |
| bottomGap | 0 | Disconnects the curve from the bottom nodes. |
| particleSpeed | 2.8 | Seconds for a particle to travel the path. |
| particleColor | "#ffffff" | Color of the moving dot. |
| particleLength | 14 | Make it longer (e.g. 16) for a dash, or 8 for a perfect circle. |
| particleWeight | 2 | Controls the thickness/height of the moving particle dash. |
| particleRadius | 4 | Border radius and half-height of the particle. |
| particleGlow | "drop-shadow(0 0 8px #ffb6e0)" | CSS filter for the dot glow. |
| strokeWidth | 1.5 | Thickness of the bezier curves. |
| delay | 1.4 | Initial animation delay. |