Component library

Showing 3 components in the core deck with role timeline.

<RoadmapTimeline>

coreTimelineAgendaContentPresentation

Vertical phased roadmap with status icons (done, active, planned), time chips, and milestone bullets; phases stagger in on slide enter (client).

When to use: Closing or delivery slide after use cases are agreed. Three to five phases reads cleanly on a 16:9 canvas.

Often with: OpportunityMatrixProcessStepsChronologySlideAgendaSlide

Preview

Wave 1 — 12-week delivery

Sequenced after workshop sign-off.

Phase 1 — Foundation
Weeks 1–3
- ERP middleware exposed
- Lunnoa platform deployed
Phase 2 — Build the three flows
Weeks 4–8
- HR triage live week 5
- Invoice intake live week 8
Phase 3 — Scale and govern
Weeks 9–12
- Second-wave backlog triage
- Usage and ROI review

Prop	Type	Notes
phases	{ label: string; when: string; status?: 'done' \| 'active' \| 'planned'; items?: string[] }[]	Required. Phases in chronological order.
title	string	Optional. Slide heading.
description	string	Optional. Subtitle or delivery note.
tween	object	Optional. Optional GSAP vars for phase entrance.

Examples

<RoadmapTimeline
  title="Wave 1 — 12-week delivery"
  description="Sequenced after workshop sign-off."
  phases={[
    { label: "Phase 1 — Foundation", when: "Weeks 1–3", status: "active", items: ["ERP middleware exposed", "Lunnoa platform deployed"] },
    { label: "Phase 2 — Build the three flows", when: "Weeks 4–8", status: "planned", items: ["HR triage live week 5", "Invoice intake live week 8"] },
    { label: "Phase 3 — Scale and govern", when: "Weeks 9–12", status: "planned", items: ["Second-wave backlog triage", "Usage and ROI review"] }
  ]}
/>

<ProcessSteps>

coreTimelineContentPresentation

Numbered step sequences for methods, repeating flows, and milestone timelines. Three layouts: `cards` (horizontal grid with numerals or tone cards), `sequence` (left-to-right flow with arrows), `timeline` (spine with status pins and optional dates). Stagger in on slide enter (client).

When to use: One component for step-based slides. Use `layout="cards"` for a method or rollout walkthrough; `layout="sequence"` for a repeating operating rhythm; `layout="timeline"` with `date` and `status` on each step for programme milestones. Pass `tones` on cards layout for mixed-fill step cards instead of bare numerals.

Preview

How the pilot runs

Discover

Two discovery sessions, five interviews.

Design

Agree the target flow and owners.

Build

Ship the first automation in a sandbox.

Adopt

Handover with a runbook and metrics.

The weekly operating rhythm

Plan

Set the week's top three priorities.

Execute

Ship against the plan daily.

Review

Friday retro against the plan.

Adjust

Carry learnings into next week's plan.

Programme milestones

Mar 2026

Last IC

Jun 2026

Wave 1 live

Sep 2026

Wave 2 scoped

Dec 2026

Year-end review

Prop	Type	Notes
title	string	Optional. Heading above the steps.
steps	{ title: string; description?: string; date?: string; status?: "done" \| "now" \| "next" }[]	Required. Steps in display order. Cards/sequence: 2-6 steps with title and optional description. Timeline: add date and status per step.
layout	"cards" \| "sequence" \| "timeline"	Optional. Default: `cards`. Visual treatment: card grid (default), arrow sequence, or milestone timeline.Values: cards, sequence, timeline
numbering	"roman" \| "arabic" \| "circle"	Optional. Default: `arabic`. Ordinal style for cards and sequence layouts.Values: roman, arabic, circle
tones	("accent" \| "muted" \| "outline" \| "soft")[]	Optional. Cards layout only. One fill tone per step (cycles if shorter than steps). Omit for minimal numerals.
orientation	"horizontal" \| "vertical"	Optional. Default: `horizontal`. Timeline layout only: compact row or vertical spine for longer labels.Values: horizontal, vertical
tween	object	Optional. Optional GSAP vars for the entrance animation.

Examples

<ProcessSteps
  title="How the pilot runs"
  layout="cards"
  numbering="circle"
  steps={[
    { title: "Discover", description: "Two discovery sessions, five interviews." },
    { title: "Design", description: "Agree the target flow and owners." },
    { title: "Build", description: "Ship the first automation in a sandbox." },
    { title: "Adopt", description: "Handover with a runbook and metrics." },
  ]}
/>

<ProcessSteps
  title="The weekly operating rhythm"
  layout="sequence"
  numbering="circle"
  steps={[
    { title: "Plan", description: "Set the week's top three priorities." },
    { title: "Execute", description: "Ship against the plan daily." },
    { title: "Review", description: "Friday retro against the plan." },
    { title: "Adjust", description: "Carry learnings into next week's plan." },
  ]}
/>

<ProcessSteps
  title="Programme milestones"
  layout="timeline"
  steps={[
    { title: "Last IC", date: "Mar 2026", status: "done" },
    { title: "Wave 1 live", date: "Jun 2026", status: "now" },
    { title: "Wave 2 scoped", date: "Sep 2026", status: "next" },
    { title: "Year-end review", date: "Dec 2026", status: "next" },
  ]}
/>

<AgendaSlide>

coreAgendaTimelinePresentation

Numbered agenda list with optional timeboxes; rows stagger in on slide enter (client).

When to use: Use as slide 2 of most decks. Pass three to seven items so the slide stays scannable.

Preview

Today's agenda

01Programme health10 min
02Wave 1 outcomes15 min
03Wave 2 scope20 min
04Decisions and asks10 min

Prop	Type	Notes
title	string	Optional. Default: `Agenda`. Slide heading.
items	{ label: string; timebox?: string }[]	Required. Agenda entries in display order; numbering is added automatically.
tween	object	Optional. Optional GSAP vars (duration, ease, stagger, delay, y, opacity, autoAlpha).

Examples

<AgendaSlide
  title="Today's agenda"
  items={[
    { label: "Programme health", timebox: "10 min" },
    { label: "Wave 1 outcomes", timebox: "15 min" },
    { label: "Wave 2 scope", timebox: "20 min" },
    { label: "Decisions and asks", timebox: "10 min" }
  ]}
/>