|
1 | | -# bolt-slides |
| 1 | +<div align="center"> |
| 2 | + |
| 3 | +# ⚡ Bolt Slides |
| 4 | + |
| 5 | +**Presentation decks that are working web apps.** |
| 6 | + |
| 7 | +One prompt in — your agent builds a deck where every slide is a live, responsive web page. |
| 8 | +3D, live data, working prototypes, and whatever you can prompt. |
| 9 | + |
| 10 | +[](https://bolt.new/github.com/stackblitz/bolt-slides) |
| 11 | +[](https://stackblitz.com/github/stackblitz/bolt-slides) |
| 12 | +[](./LICENSE) |
| 13 | + |
| 14 | +<img src=".github/assets/cover.png" alt="Bolt Slides — cover slide with the floating dock" width="820" /> |
| 15 | + |
| 16 | +</div> |
| 17 | + |
| 18 | +--- |
| 19 | + |
| 20 | +Slides have been static for forty years. Bolt Slides makes them software: |
| 21 | + |
| 22 | +- **Make your slides work for you.** Selling a house? Add a 3D walkthrough, a mortgage calculator, an interactive neighborhood map. |
| 23 | +- **Make the room build on them.** Your team drops ideas onto a shared whiteboard, live, while you present. |
| 24 | +- **Make the data answer questions.** Filter the table, sort the chart, spin a 3D model, drill into the number that matters — mid-presentation. |
| 25 | +- **Every screen is a front row seat.** Slides are responsive web layouts, not a fixed 1080p canvas — the audience can follow along from their phones. |
| 26 | + |
| 27 | +Under the hood it's a classic paged deck — Slidev-style dock, thumbnail sidebar, grid overview, click-builds, annotations, synced presenter mode — where each slide is a plain React component. If you can build it for the web, you can present it. |
| 28 | + |
| 29 | +## Quick start |
| 30 | + |
| 31 | +**With an agent (the fun way).** Open the repo in [Bolt](https://bolt.new/github.com/stackblitz/bolt-slides) and prompt it: |
| 32 | + |
| 33 | +> Build me a deck pitching «your thing» to «your audience». |
| 34 | +
|
| 35 | +The bundled skill ([`.bolt/skills/slides/SKILL.md`](./.bolt/skills/slides/SKILL.md)) teaches the agent how to theme, compose, and write the deck — including setting the tab title and favicon — so a single prompt returns a finished, presentable app. |
| 36 | + |
| 37 | +**By hand.** |
| 38 | + |
| 39 | +```bash |
| 40 | +git clone https://github.com/stackblitz/bolt-slides |
| 41 | +cd bolt-slides |
| 42 | +npm install |
| 43 | +npm run dev |
| 44 | +``` |
| 45 | + |
| 46 | +The dev server opens a 26-slide demo that exercises every component. Delete the demo slides in [`src/App.tsx`](./src/App.tsx) and author your own. |
| 47 | + |
| 48 | +## Authoring |
| 49 | + |
| 50 | +Each top-level child of `<Deck>` is one slide. Compose them from the component library, or write plain JSX: |
| 51 | + |
| 52 | +```tsx |
| 53 | +<Deck> |
| 54 | + <Cover |
| 55 | + kicker="Acme · Series A" |
| 56 | + title={<span className="accent-text">Acme</span>} |
| 57 | + subtitle="Answers, not dashboards." |
| 58 | + notes="Welcome — set up the problem, then hold a beat." |
| 59 | + /> |
| 60 | + |
| 61 | + <Slide center nav="Thesis"> |
| 62 | + <h2 className="headline"> |
| 63 | + Dashboards are everywhere. <span className="accent-text">Insight isn't.</span> |
| 64 | + </h2> |
| 65 | + <Build at={1}> |
| 66 | + <p className="subhead">Acme turns raw events into answers — automatically.</p> |
| 67 | + </Build> |
| 68 | + </Slide> |
| 69 | + |
| 70 | + <Agenda |
| 71 | + kicker="Agenda" |
| 72 | + title="What we'll cover." |
| 73 | + items={['The problem', 'How it works', { title: 'Pricing & the ask', hint: '5 min' }]} |
| 74 | + /> |
| 75 | +</Deck> |
| 76 | +``` |
| 77 | + |
| 78 | +- **`<Build at={n}>`** reveals content on the nth click — arrow keys step through builds before advancing slides, forward *and* back. |
| 79 | +- **`notes="…"`** on any slide shows up in presenter mode; notes you edit while presenting persist locally. |
| 80 | +- Slides are ordinary React — fetch live data, mount a 3D scene, embed your actual product. |
| 81 | + |
| 82 | +## Presenting |
| 83 | + |
| 84 | +<img src=".github/assets/grid-view.png" alt="Grid view of every slide" width="820" /> |
| 85 | + |
| 86 | +| Key | Action | |
| 87 | +| --- | --- | |
| 88 | +| `→` `↓` `Space` | Next (reveals builds first) | |
| 89 | +| `←` `↑` | Previous (rewinds builds) | |
| 90 | +| `Home` / `End` | First / last slide | |
| 91 | +| `S` | Sidebar — thumbnail rail | |
| 92 | +| `G` | Grid view — every slide at once | |
| 93 | +| `A` | Annotate — pen, highlighter, shapes, eraser | |
| 94 | +| `F` | Fullscreen | |
| 95 | +| `P` | Presenter mode — synced new tab | |
| 96 | +| `H` | Hide the UI | |
| 97 | +| `Esc` | Close overlays | |
| 98 | + |
| 99 | +- **Presenter mode** opens in a second tab with a timer, next-slide preview, and editable notes — kept in sync with the audience tab via `BroadcastChannel`. |
| 100 | +- **Annotations are content-anchored**: a circle drawn around a stat on a laptop rings the same stat on a phone, wherever the layout moved it. Drawings persist per slide. |
| 101 | +- **Deep links**: the URL hash tracks the slide (`/#7`), so you can share a link straight to a slide. |
| 102 | + |
| 103 | +## Component library |
| 104 | + |
| 105 | +| | Components | |
| 106 | +| --- | --- | |
| 107 | +| **Structure** | `Cover` `Agenda` `Section` `Split` `Bento` `Slide` | |
| 108 | +| **Data** | `Charts` (bar · line · donut) `Table` `StatGrid` `BigNumber` `CountUp` `VisualDashboard` | |
| 109 | +| **Story** | `Quote` `Contrast` `Comparison` `Timeline` `Steps` `Chat` | |
| 110 | +| **Product** | `CodeWindow` `BrowserFrame` `Pricing` `Team` | |
| 111 | +| **Flair** | `Globe` `TiltCard` `SpotlightCard` `Marquee` `Accordion` `Tabs` | |
| 112 | + |
| 113 | +All of them are demoed in the bundled starter deck, and all of them are responsive. |
| 114 | + |
| 115 | +## Theming |
| 116 | + |
| 117 | +Every color, font, radius, and shadow lives in the `:root` block of [`src/styles/tokens.css`](./src/styles/tokens.css). Change `--primary` and the entire deck — chrome included — recolors. Nine ready-made theme directions are documented in the skill, from editorial luxury to dark technical. |
| 118 | + |
| 119 | +## Project structure |
| 120 | + |
| 121 | +``` |
| 122 | +.bolt/skills/slides/ the agent-facing authoring guide (the skill) |
| 123 | +src/deck/ engine + chrome — Deck, Slide, Build, Reveal, Annotator |
| 124 | +src/components/ the slide component library |
| 125 | +src/styles/ tokens.css (theme) + base.css (system styles) |
| 126 | +src/App.tsx your deck (ships with the component demo) |
| 127 | +``` |
| 128 | + |
| 129 | +## Contributing |
| 130 | + |
| 131 | +Issues and PRs welcome — see [CONTRIBUTING.md](./CONTRIBUTING.md). `npm run dev` to hack, `npx tsc --noEmit && npm run build` before you push. |
| 132 | + |
| 133 | +## License |
| 134 | + |
| 135 | +[MIT](./LICENSE) © StackBlitz |
0 commit comments