Interactive orbital timeline with keyboard-accessible nodes and expandable delivery details.
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>
);
}
Part of Path to Resilience — browse the full library on 21st.dev.