gamma logo

1

Cloud Flow

PreviousNext

An interactive cloud architecture visualization component featuring animated SVG flow paths, glowing data particles, node badges, and a central hub with layered motion effects—ideal for showcasing distributed systems, API traffic, and real-time infrastructure flows.

Installation

pnpm dlx shadcn@latest add @gammaui/cloud-flow

Usage

import CloudFlow from "@/components/gammaui/cloud-flow"
 
export default function Demo() {
  return <CloudFlow />
}

Basic Example

<CloudFlow />

Custom Badges & Title

<CloudFlow
  centerText="CORE"
  title="Distributed Cloud Architecture"
  nodeLabels={{
    topLeft: "API",
    topRight: "CDN",
    bottomLeft: "Database",
    bottomRight: "Worker",
  }}
  badges={{
    left: "Live Traffic",
    right: "Sync Active",
  }}
  accentColor="#22C55E"
/>

Props

PropTypeDefaultDescription
classNamestring-Extra CSS classes
centerTextstring"HUB"Text inside the center hub circle
titlestring"Distributed Cloud Architecture"Header badge title
accentColorstring"#10B981"Accent color for glow, icons, and gradients
nodeLabels{ topLeft: string; topRight: string; bottomLeft: string; bottomRight: string }{ API, CDN, DB, Worker }Labels for the cloud nodes
badges{ left: string; right: string }{ Live Traffic, Sync Active }Floating info badges

Features

  • ✔ Animated SVG cloud flow paths
  • ✔ Glowing data particles following routes
  • ✔ Central hub with pulsing motion rings
  • ✔ Customizable node labels & badges
  • ✔ Accent color theming
  • ✔ Motion-powered depth effects
  • ✔ Responsive & dark-mode ready

When to Use

  • Cloud architecture diagrams
  • Infrastructure overviews
  • SaaS dashboards
  • DevOps & monitoring tools
  • Landing pages for cloud products
  • System design documentation