Connection Flow

A smooth React animation for visualizing data flows, SaaS integrations, API connections, and connected systems with curved paths and continuously moving particles.

Installation

npm i framer-motion

Step 1

Components

Page.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>

Note: For ThemeProvider please setup Dark Mode!

Step 2

Use Dark Mode

Step 3

Use Orbit Border