Radial Orbital Timeline

Component

About

Interactive orbital timeline with keyboard-accessible nodes and expandable delivery details.

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

Code

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

Usage.tsx

import { BrainCircuit, Code2, Rocket } from "lucide-react";
import RadialOrbitalTimeline from "@/components/ui/radial-orbital-timeline";

const timelineData = [
  {
    id: 1,
    title: "Strategie",
    date: "Week 1",
    content: "Breng doelen, processen en prioriteiten samen in een helder vertrekpunt.",
    category: "Discovery",
    icon: BrainCircuit,
    relatedIds: [2],
    status: "completed" as const,
    energy: 80,
  },
  {
    id: 2,
    title: "Bouwen",
    date: "Week 2–3",
    content: "Vertaal de gekozen richting naar een bruikbare digitale ervaring.",
    category: "Delivery",
    icon: Code2,
    relatedIds: [1, 3],
    status: "in-progress" as const,
    energy: 65,
  },
  {
    id: 3,
    title: "Lanceren",
    date: "Week 4",
    content: "Meet, leer en verbeter na de eerste release.",
    category: "Growth",
    icon: Rocket,
    relatedIds: [2],
    status: "pending" as const,
    energy: 50,
  },
];

export default function RadialOrbitalTimelineDemo() {
  return (
    <main className="min-h-screen bg-background p-6 text-foreground">
      <RadialOrbitalTimeline timelineData={timelineData} />
    </main>
  );
}