Hub Flow
A customizable Integration Network Animation connecting brands through flowing paths and particles, with active highlights for SaaS integrations and partner networks.
Installation
npm i framer-motionSteps
Components
Page.tsx
HubFlow.tsx
Select a file to view its code
Dark Mode
This 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>
Props
| Property | Default Value | Description |
|---|---|---|
| curveTopGap | 8 | Space between the top outer pills and the start of the curves. |
| curveBottomGap | 8 | Space between the bottom outer pills and the end of the curves. |
| gap | 0 | Adjust this to pull paths away from or overlap with the central pill. |
| pillGap | 130 | The horizontal spacing between the top pills. |
| pillRadius | 999 | Make it 16 for a rounded rectangle, 999 for fully rounded. |
| topCurve | 120 | The vertical drop distance before the lines sweep to the center. |
| bottomCurve | 120 | The vertical drop distance after the lines leave the center. |
| particleColor | "#f97316" | Color for the top incoming particles. E.g., Red. |
| bottomParticleColor | "#eb1c2d" | Distinct color for the bottom outgoing particles. E.g., Cyan. |
| particleSpeed | 2.5 | Seconds it takes for a particle to travel the path. |
| particleLength | 16 | The width of the moving dash. |
| particleWeight | 2 | The thickness of the moving dash. |
| particleCurve | 1.5 | Border radius of the moving dash. |