Quick Start

A minimal slidemotion presentation.

This starter uses the built-in default theme. Pass theme={false} if you want a fully headless setup, or pass your own theme object for custom defaults.

Need a fuller starting point?

• Core deck example
• Code example
• Terminal example

import { Presentation, Presenter, Slide } from "slidemotion";
import "slidemotion/styles.css";

function App() {
  return (
    <Presentation defaultSlideTransition={{ type: "fade", duration: 220 }}>
      <Presenter>
        <Slide id="hello">Hello, world!</Slide>
      </Presenter>
    </Presentation>
  );
}

When you start building choreographed slides, prefer atSteps for code and terminal timing so those changes stay aligned with your Step animations.

For local debugging, set devtools on Presenter:

<Presenter devtools>
  <Slide id="intro">...</Slide>
</Presenter>