<ChronologySlide>
expressiveTimelinePresentation
Alternating timeline with dated milestones and optional active-state markers; events stagger in on slide enter.
When to use: Product roadmap, rollout plan, or programme chronology with three to six dated events. Mark current or completed phases with active: true.
Preview
| Prop | Type | Notes |
|---|---|---|
| label | string | Optional. HUD pill above the title. |
| title | string | Optional. Section headline. |
| events | { date: string; title: string; description?: string; active?: boolean }[] | Required. Timeline events; active nodes render yellow. |
| tween | object | Optional. Optional GSAP vars for event entrance. |
Examples
<ChronologySlide
label="Chronology"
title="Development Roadmap"
events={[
{ date: "Q1 2026", title: "Concept & Architecture", description: "Wireframes and core grid.", active: true },
{ date: "Q2 2026", title: "Asset Generation", description: "Pixel components coded.", active: true },
{ date: "Q3 2026", title: "Data Integration", description: "Charting engine and counters." },
{ date: "Q4 2026", title: "Global Launch", description: "Public release." }
]}
/>