Component library

Showing 4 components in the shared deck with role motion.

  • <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.
    PropTypeNotes
    fromStepnumberOptional. Default: 0. Visible when reveal step >= this value.
    childrenReactNodeRequired. Content to reveal.
    tweenobjectOptional. 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

    PropTypeNotes
    childrenReactNodeRequired. Typically several `<p>` or `<div>` siblings.
    tweenobjectOptional. 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" }}>
  <p>One</p>
  <p>Two</p>
</Stagger>

  • <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
    PropTypeNotes
    fromnumberOptional. Default: 0. Start value.
    tonumberRequired. End value.
    suffixstringOptional. Appended after the number.
    tweenobjectOptional. 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
    PropTypeNotes
    childrenReactNodeRequired. Content to emphasise.
    tweenobjectOptional. Optional { scale, duration, ease, delay } merged into gsap.from().

    Examples

    <Highlight tween={{ scale: 0.92, duration: 0.5, ease: "back.out(1.7)" }}>
  <span className="text-brand-secondary">Wave 1</span>
</Highlight>