Component library

Showing 11 components in the expressive deck.

<DecoratedSlide>
expressiveChromePresentation
Layout wrapper for expressive slide content. Does not set the deck canvas colour.
When to use: Wrap hero, chart, or closing layouts when you need a centred full-height content slot. Set the deck canvas via presentationTheme.background (light|white|dark|brand|vivid) on create_report / update_report, or inherit /theming defaultDeckBackground.
Preview
FY26 planning
Quarterly business review
Three priorities for the next quarter.
45 minBoard ready
Prop Type Notes
children ReactNode Required. Slide content.
Examples
```
<Slide>
  <DecoratedSlide>
    <HeroCoverSlide label="FY26 planning" title="Quarterly business review" subtitle="Three priorities for the next quarter." badges={["45 min", "Board ready"]} />
  </DecoratedSlide>
</Slide>
```

Prop	Type	Notes
children	ReactNode	Required. Slide content.

<HeroCoverSlide>

expressiveTitlePresentation

Bold cover slide with hero headline, optional subtitle, eyebrow label, and outline badges.

When to use: First slide of a pitch, QBR, or product deck. Wrap in DecoratedSlide on vivid backgrounds.

Preview

FY26 planning

Quarterly business review

Three priorities for finance, operations, and product.

45 minBoard readyDraft v2

Prop	Type	Notes
title	string	Required. Hero headline.
subtitle	string	Optional. Supporting line under the title.
label	string	Optional. Eyebrow pill above the title (also accepts AccentEyebrow styling via label prop).
badges	string[]	Optional. Outline chips under the subtitle (duration, audience, version).

Examples

<HeroCoverSlide
  label="FY26 planning"
  title="Quarterly business review"
  subtitle="Three priorities for finance, operations, and product."
  badges={["45 min", "Board ready", "Draft v2"]}
/>

<SplitBriefSlide>
expressiveSplitPresentation
Two-column narrative layout with bracketed panels for a problem/solution or context/outcome brief.
When to use: Second slide after the cover: state the situation on the left and the intended outcome on the right. Omit right for a single-panel brief.
Preview
Mission Brief
Rewiring How We Share Ideas
Every presentation is an opportunity to transport your audience.
No canvas limits. No cookie-cutter layouts.
Prop Type Notes
label string Optional. HUD pill above the title.
title string Required. Section headline.
left ReactNode Required. Left (or sole) body panel.
right ReactNode Optional. Optional second panel.
Examples
```
<SplitBriefSlide
  label="Mission Brief"
  title="Rewiring How We Share Ideas"
  left="Every presentation is an opportunity to transport your audience."
  right="No canvas limits. No cookie-cutter layouts."
/>
```

<CapabilityGrid>

expressiveContentPresentation

Grid of two to four capability or feature cards with staggered entrance animation (client).

When to use: Summarise platform capabilities, product pillars, or service lines. Use after the brief slide when the audience needs a structured "what we offer" view.

Preview

Core Systems

Four Engines Running

Modular Blocks

Swap components without breaking the grid.

Crisp Vectors

All visual effects are native CSS.

Live Data

Chart slides accept dynamic values.

Retro Atmosphere

Scanlines, CRT vignettes, and starfields.

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
features	{ title: string; description: string }[]	Required. Feature cards (2–4).
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<CapabilityGrid
  label="Core Systems"
  title="Four Engines Running"
  features={[
    { title: "Modular Blocks", description: "Swap components without breaking the grid." },
    { title: "Crisp Vectors", description: "All visual effects are native CSS." },
    { title: "Live Data", description: "Chart slides accept dynamic values." },
    { title: "Retro Atmosphere", description: "Scanlines, CRT vignettes, and starfields." }
  ]}
/>

<ColumnChartSlide>

expressiveChartPresentation

Vertical bar chart for comparing categories on a 0–100 scale; bars animate in on slide enter (client).

When to use: Quarterly KPIs, segment growth, or survey scores where each bar is an independent category. Prefer StatBarChart when you need multi-series report charts.

Preview

Analytics Core

Quarterly Growth Metrics

Fiscal performance across four sectors

Alpha

Beta

Gamma

Delta

Epsilon

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
subtitle	string	Optional. Mono pink subtitle under the title.
items	{ label: string; value: number; display?: string; tone?: "cyan" \| "pink" \| "yellow" }[]	Required. Bars; value is 0–100 height percentage.
tween	object	Optional. Optional GSAP vars for bar growth.

Examples

<ColumnChartSlide
  label="Analytics Core"
  title="Quarterly Growth Metrics"
  subtitle="Fiscal performance across four sectors"
  items={[
    { label: "Alpha", value: 78 },
    { label: "Beta", value: 92 },
    { label: "Gamma", value: 64 },
    { label: "Delta", value: 85 },
    { label: "Epsilon", value: 56 }
  ]}
/>

<RankedBarSlide>

expressiveChartPresentation

Horizontal ranked bar chart for share or allocation breakdown; fills animate in on slide enter (client).

When to use: Budget allocation, capacity mix, or portfolio weight by line item. Each row is one label with a 0–100 fill percentage.

Preview

System Load

Resource Allocation

Percentage distribution across operational units

Compute

88%

Storage

72%

Network

95%

Memory

61%

Graphics

44%

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline.
subtitle	string	Optional. Supporting line under the title.
labelAccent	"yellow" \| "cyan" \| "pink"	Optional. Default: `yellow`. AccentEyebrow text colour.Values: yellow, cyan, pink
items	{ label: string; value: number; display?: string; tone?: "navy" \| "cyan" \| "pink" }[]	Required. Rows; value is 0–100 fill percentage.
tween	object	Optional. Optional GSAP vars for fill growth.

Examples

<RankedBarSlide
  label="System Load"
  title="Resource Allocation"
  subtitle="Percentage distribution across operational units"
  items={[
    { label: "Compute", value: 88 },
    { label: "Storage", value: 72 },
    { label: "Network", value: 95 },
    { label: "Memory", value: 61 },
    { label: "Graphics", value: 44 }
  ]}
/>

<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

Chronology

Development Roadmap

Q1 2026

Concept & Architecture

Wireframes and core grid.

Q2 2026

Asset Generation

Pixel components coded.

Q3 2026

Data Integration

Charting engine and counters.

Q4 2026

Global Launch

Public release.

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." }
  ]}
/>

<MetricPanelSlide>

expressiveStatsPresentation

Grid of two to four headline metrics with labels; tiles stagger in on slide enter (client).

When to use: Platform vitals, portfolio KPIs, or campaign scorecard at a glance. Pre-format values as strings (currency, %, counts).

Preview

Live Telemetry

Platform Vitals

Real-time aggregate figures from active deployments

2.4k

Active Worlds

98M

Pixels Rendered

99.9%

Uptime Score

Max Resolution

Prop	Type	Notes
label	string	Optional. HUD pill above the title.
title	string	Optional. Section headline (cyan).
description	string	Optional. Supporting line under the title.
stats	{ value: string; label: string }[]	Required. Stat tiles (2–4).
tween	object	Optional. Optional GSAP vars for tile entrance.

Examples

<MetricPanelSlide
  label="Live Telemetry"
  title="Platform Vitals"
  description="Real-time aggregate figures from active deployments"
  stats={[
    { value: "2.4k", label: "Active Worlds" },
    { value: "98M", label: "Pixels Rendered" },
    { value: "99.9%", label: "Uptime Score" },
    { value: "4K", label: "Max Resolution" }
  ]}
/>

<FeaturedQuoteSlide>
expressiveQuotePresentation
Centred featured quote with decorative mark and attribution line.
When to use: Customer testimonial, sponsor quote, or manifesto moment mid-deck. Use QuoteSlide for simpler editorial quotes.
Preview
The first automation went live in two weeks. Finance finally trusts the numbers.
— Maria Fernandes, CFO, Acme Corp
Prop Type Notes
children ReactNode Required. Quote body text.
attribution string Optional. Attribution line under the quote.
label string Optional. Optional eyebrow above the quote.
Examples
```
<FeaturedQuoteSlide attribution="Maria Fernandes, CFO, Acme Corp">
  The first automation went live in two weeks. Finance finally trusts the numbers.
</FeaturedQuoteSlide>
```

Prop	Type	Notes
children	ReactNode	Required. Quote body text.
attribution	string	Optional. Attribution line under the quote.
label	string	Optional. Optional eyebrow above the quote.

<PlanComparisonGrid>

expressiveCompareCTAPresentation

Side-by-side pricing or plan comparison cards with feature lists and optional featured tier highlight.

When to use: SaaS pricing, service tiers, or licence options. Typically three tiers; mark the recommended plan with featured: true.

Preview

Pricing

Choose a plan

Starter

£0 /mo

For evaluation.

5 users
Community support

Start free

Team

£29 /mo

For growing teams.

Unlimited workflows
SSO

Book a demo

Enterprise

Custom

For regulated environments.

Dedicated support
Audit logs

Contact sales

Prop	Type	Notes
label	string	Optional. Eyebrow above the section title.
title	string	Optional. Section headline.
tiers	{ name: string; price: string; priceSuffix?: string; description?: string; features: string[]; featured?: boolean; cta?: string }[]	Required. Plan cards (typically three). Pre-format price strings with currency.
tween	object	Optional. Optional GSAP vars for card entrance.

Examples

<PlanComparisonGrid
  label="Pricing"
  title="Choose a plan"
  tiers={[
    { name: "Starter", price: "£0", priceSuffix: "/mo", description: "For evaluation.", features: ["5 users", "Community support"], cta: "Start free" },
    { name: "Team", price: "£29", priceSuffix: "/mo", description: "For growing teams.", features: ["Unlimited workflows", "SSO"], featured: true, cta: "Book a demo" },
    { name: "Enterprise", price: "Custom", description: "For regulated environments.", features: ["Dedicated support", "Audit logs"], cta: "Contact sales" }
  ]}
/>

<ClosingSlide>

expressiveOutroCTAPresentation

Closing slide with headline, supporting copy, and primary/secondary call-to-action labels.

When to use: Final slide: next step, demo request, or contact prompt.

Preview

Ready for a pilot?

We can scope the first workflow in a single engagement week.

Book a demoDownload the brief

Prop	Type	Notes
label	string	Optional. Eyebrow above the headline.
title	string	Required. Closing headline.
body	string	Optional. Supporting sentence.
primaryCta	string	Optional. Primary button label.
secondaryCta	string	Optional. Secondary button label.

Examples

<ClosingSlide
  title="Ready for a pilot?"
  body="We can scope the first workflow in a single engagement week."
  primaryCta="Book a demo"
  secondaryCta="Download the brief"
/>

Preview

Quarterly business review

Examples

Preview

Quarterly business review

Examples

Preview

Rewiring How We Share Ideas

Examples

Preview

Four Engines Running

Examples

Preview

Quarterly Growth Metrics

Examples

Preview

Resource Allocation

Examples

Preview

Development Roadmap

Concept & Architecture

Asset Generation

Data Integration

Global Launch

Examples

Preview

Platform Vitals

Examples

Preview

Examples

Preview

Choose a plan

Examples

Preview

Ready for a pilot?

Examples