Radial Flow

Component

About

An animated radial graph that connects a set of labeled nodes to a central badge with flowing particles, for visualizing networks, hierarchies, or tool ecosystems.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Flow to your project and fits it to your theme.

Code

How Radial Flow is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Topic, RadialFlow } from "@/components/ui/radialflow";

const demoTopics: Topic[] = [
  {
    id: "chatgpt",
    name: "ChatGPT",
    position: { x: 10, y: 20 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "deepseek",
    name: "DeepSeek",
    position: { x: 10, y: 35 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "gemini",
    name: "Gemini",
    position: { x: 10, y: 50 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "claude",
    name: "Claude",
    position: { x: 10, y: 65 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "mistral",
    name: "Mistral",
    position: { x: 10, y: 80 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "grok",
    name: "Grok",
    position: { x: 90, y: 20 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "llama",
    name: "LLaMA",
    position: { x: 90, y: 35 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "copilot",
    name: "Copilot",
    position: { x: 90, y: 50 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "perplexity",
    name: "Perplexity",
    position: { x: 90, y: 65 },
    color: "#F0DB4F",
    highlighted: true,
  },
  {
    id: "anthropic",
    name: "Anthropic",
    position: { x: 90, y: 80 },
    color: "#F0DB4F",
    highlighted: true,
  },
];

export default function RadialFlowDemo() {
  return (
    <div className="w-full h-screen bg-background">
      <RadialFlow
        topics={demoTopics}
        badgeName="Productivity"
        centralDotColor="#FFFFFF"
      />
    </div>
  );
}