Component library

Showing 6 components in the shared deck.

<Slide>

sharedChromePresentation

Base slide canvas with padding inside the deck; optional printed-page chrome band.

When to use: Wrap slide body when you do not need a named layout template. Add the chrome props for a masthead/footline treatment (section name top-left, slide tag top-right, deck name + page bottom).

Preview

Part 1

Agenda

Current state03 / 12

Manual hours / week

142

Acme · Automation discoveryConfidential

Prop	Type	Notes
children	ReactNode	Required. Slide content.
className	string	Optional. Extra Tailwind classes on the inner frame.
eyebrow	string	Optional. Chrome label top-left (e.g. section name).
eyebrowRight	string	Optional. Chrome slot top-right, opposite eyebrow (e.g. slide counter).
footerLeft	string	Optional. Chrome line bottom-left (e.g. deck name or date).
footerRight	string	Optional. Chrome line bottom-right, opposite footerLeft (e.g. page label).

Examples

<Slide>
  <TitleSlide label="Part 1" title="Agenda" />
</Slide>

<Slide eyebrow="Current state" eyebrowRight="03 / 12" footerLeft="Acme · Automation discovery" footerRight="Confidential">
  <BigStat label="Manual hours / week" value="142" />
</Slide>

<Reveal>

sharedChromeMotionPresentation

Reveals children when the in-deck reveal step reaches fromStep (client).

When to use: Progressive disclosure inside one slide; advance with Space before the next slide.

Preview

First point lands here.

Prop	Type	Notes
fromStep	number	Optional. Default: `0`. Visible when reveal step >= this value.
children	ReactNode	Required. Content to reveal.
tween	object	Optional. Optional GSAP vars for the reveal (subset: opacity, autoAlpha, y, x, duration, ease, delay).

Examples

<Reveal fromStep={0} tween={{ y: 16, opacity: 0, duration: 0.45, ease: "power2.out" }}>
  First point lands here.
</Reveal>

<Stagger>
sharedChromeMotionPresentation
Animates each direct child in sequence on slide enter (client).
When to use: Bullet build without manual Reveal steps.
Preview
One
Two
Prop Type Notes
children ReactNode Required. Typically several `` or `<div>` siblings.
tween object Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).
Examples
```
<Stagger tween={{ opacity: 0, y: 12, duration: 0.35, stagger: 0.08, ease: "power2.out" }}>
 One
 Two
</Stagger>
```

Prop	Type	Notes
children	ReactNode	Required. Typically several `<p>` or `<div>` siblings.
tween	object	Optional. Per-child from-state vars plus duration, ease, stagger (seconds between children).

<Counter>

sharedMotionStatsPresentation

Animates a number from from to to on slide enter (client).

When to use: Headline metrics on pitch slides.

Preview

0 hrs / week

Prop	Type	Notes
from	number	Optional. Default: `0`. Start value.
to	number	Required. End value.
suffix	string	Optional. Appended after the number.
tween	object	Optional. Optional { duration, ease, delay } for the count.

Examples

<Counter from={0} to={142} suffix=" hrs / week" tween={{ duration: 1.2, ease: "power2.out" }} />

<Highlight>
sharedMotionPresentation
Short emphasis tween on its child wrapper on slide enter (client).
When to use: Draw attention to inline text after it appears.
Preview
Wave 1
Prop Type Notes
children ReactNode Required. Content to emphasise.
tween object Optional. Optional { scale, duration, ease, delay } merged into gsap.from().
Examples
```
<Highlight tween={{ scale: 0.92, duration: 0.5, ease: "back.out(1.7)" }}>
 Wave 1
</Highlight>
```
<AccentEyebrow>
sharedChromePresentation
Small uppercase eyebrow pill for section labels above slide headlines.
When to use: Tag the topic of a slide (e.g. "Executive summary", "Pricing", "Roadmap"). Use inside chart, grid, and narrative slide layouts that accept a label prop.
Preview
Core Systems
Prop Type Notes
children string Required. Pill text (rendered uppercase).
accent "yellow" | "cyan" | "pink" Optional. Default: yellow. Neon text colour on the navy pill.Values: yellow, cyan, pink
Examples
```
<AccentEyebrow accent="cyan">Core Systems</AccentEyebrow>
```

Prop	Type	Notes
children	ReactNode	Required. Content to emphasise.
tween	object	Optional. Optional { scale, duration, ease, delay } merged into gsap.from().

Prop	Type	Notes
children	string	Required. Pill text (rendered uppercase).
accent	"yellow" \| "cyan" \| "pink"	Optional. Default: `yellow`. Neon text colour on the navy pill.Values: yellow, cyan, pink