Network Pulse

A Network Flow Animation that highlights active connections with flowing particles and rotating network states, revealing related information for each connection.

Monitoring live network pulse & node synchronization..

System Integrations

Seamlessly routing data packets and maintaining webhooks between internal microservices and third-party APIs.

Installation

npm i framer-motion

Steps

Components

Page.tsx

NetworkPulse.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
CurveRadius	70	The corner radius for the outer lines, determining how wide and sweeping the curves are.
TopGap	60	The vertical distance the outer lines travel downwards before splitting horizontally.
MiddleCurve	35	The corner radius specifically for the inner lines to maintain smooth S-curves in tighter spaces.
MiddleTopGap	40	The extra vertical distance the inner lines drop (added to TopGap) before splitting horizontally.
IconsGap	53	The horizontal spacing between the four target icons.