npm v0.1.0 live now

Presentations that feel like code

Build polished slide decks with React. Animate ideas, morph code, and run live terminal demos without leaving your editor.

deck.tsx
import { Presentation, Presenter, Slide } from "slidemotion";

export default function Talk() {
  return (
    <Presentation>
      <Presenter>
        <Slide className="hero">
          Build demos that move
        </Slide>
      </Presenter>
    </Presentation>
  );
}
timeline step 02
00:00
00:18
Code, notes, terminal synced
Morph code across steps
Keep speaker notes nearby
Replay terminal output cleanly
A GOOD FIT FOR
DevRel teamsConference speakersOSS maintainersEducatorsProduct engineers

FEATURES

Everything you need for code-first talks

Compose slides in JSX, tune every transition, and keep code demos in lockstep with your narrative.

</>

Code morphing that stays readable

Animate edits across steps so your audience follows the story, not the diff noise.

before after
const title =
  "Launch day";

return <Hero
  title={title}
/>;
const title =
  "Launch week";

return <Hero
  title={title}
  step={2}
/>;
>_

Terminal demos with actual timing

Replay command output, reveal steps at your pace, and make shell demos feel rehearsed.

terminal step 03

$ bun install

installed 182 packages in 1.4s

$ bun run dev

local: http://localhost:4321

press p to open presenter mode

~

Spring-driven motion primitives

Use low-level animation tools when slides need more nuance than canned transitions.

FadeIn

Stagger

SlideIn

AND MORE

Built for developer workflows

<>

JSX layouts

Use familiar composition patterns, utilities, and design systems to build each slide with intent.

PR

Presenter mode

Speaker notes, timers, previews, and audience view stay one shortcut away while presenting.

{}

Themes and syntax

Ship a cohesive visual system with theme presets, CSS tokens, and Shiki-powered highlighting.

PDF

PDF export

Generate portable handouts and backup decks when the venue setup is less than ideal.

HMR

Hot reload

Iterate on slides at speed and keep presentation flow intact while tweaking copy or motion.

API

Composable API

Build with small primitives so your deck architecture can stay as simple or bespoke as needed.

HOW IT WORKS

Three steps to your next talk

1

Install

npm install slidemotion react react-dom

Pull in the package, keep your existing React setup, and start from code instead of slides.

2

Write JSX

<Slide><Code /></Slide>

Model slides with real components, hooks, and state so choreography stays close to the content.

3

Present

bun run dev

Rehearse with hot reload, open presenter mode, and walk into the talk with confidence.

Ready to build your next talk?

Design decks with the same tools you already trust for product work.

11

Weekly npm downloads

0.1.0

Latest published version

MIT

Open source license