Signal is a customizable React flow animation that uses particles traveling along paths to visualize data, workflows, networks, and active connections.
npm i framer-motionnpm i react-iconsThis 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 | 5 | Controls the vertical spread of the signal waves from the center on the left side. |
| rightGap | 10 | Controls the vertical spread of the signal waves from the center on the right side. |
| Left Side Control | ||
| leftpathColor | "#4b5563" | Sets the color of the signal paths on the left side. |
| leftparticleColor | "#ef4444" | Sets the color of the moving particles on the left side, including their glow effect. |
| leftparticleSpeed | 3 | Controls the base speed of the moving particles on the left side. Individual particles can move at different speeds. |
| leftpathWidth | 0.3 | Controls the stroke thickness of the signal paths on the left side. |
| leftparticleSize | 2 | Controls the radius of the moving particles on the left side. |
| leftParticleDelay | 0 | Controls the initial delay, in seconds, before the left-side particles begin moving. |
| Right Side Control | ||
| rightpathColor | "#4b5563" | Sets the color of the signal paths on the right side. |
| rightparticleColor | "#10b981" | Sets the color of the moving particles on the right side, including their glow effect. |
| rightparticleSpeed | 3 | Controls the base speed of the moving particles on the right side. Individual particles can move at different speeds. |
| rightpathWidth | 0.3 | Controls the stroke thickness of the signal paths on the right side. |
| rightparticleSize | 2 | Controls the radius of the moving particles on the right side. |
| rightParticleDelay | 3 | Controls the initial delay, in seconds, before the right-side particles begin moving. |