Build polished slide decks with React. Animate ideas, morph code, and run live terminal demos without leaving your editor.
import { Presentation, Presenter, Slide } from "slidemotion";
export default function Talk() {
return (
<Presentation>
<Presenter>
<Slide className="hero">
Build demos that move
</Slide>
</Presenter>
</Presentation>
);
}FEATURES
Compose slides in JSX, tune every transition, and keep code demos in lockstep with your narrative.
Animate edits across steps so your audience follows the story, not the diff noise.
const title =
"Launch day";
return <Hero
title={title}
/>;const title =
"Launch week";
return <Hero
title={title}
step={2}
/>;Replay command output, reveal steps at your pace, and make shell demos feel rehearsed.
$ bun install
installed 182 packages in 1.4s
$ bun run dev
local: http://localhost:4321
press p to open presenter mode
Use low-level animation tools when slides need more nuance than canned transitions.
FadeIn
Stagger
SlideIn
AND MORE
Use familiar composition patterns, utilities, and design systems to build each slide with intent.
Speaker notes, timers, previews, and audience view stay one shortcut away while presenting.
Ship a cohesive visual system with theme presets, CSS tokens, and Shiki-powered highlighting.
Generate portable handouts and backup decks when the venue setup is less than ideal.
Iterate on slides at speed and keep presentation flow intact while tweaking copy or motion.
Build with small primitives so your deck architecture can stay as simple or bespoke as needed.
HOW IT WORKS
Pull in the package, keep your existing React setup, and start from code instead of slides.
Model slides with real components, hooks, and state so choreography stays close to the content.
Rehearse with hot reload, open presenter mode, and walk into the talk with confidence.
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