[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93411":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},93411,"bolt-slides","stackblitz\u002Fbolt-slides","stackblitz","Use any agent to create stunning, interactive presentations","",null,"TypeScript",469,60,3,1,0,204,103,75.36,"MIT License",false,"main",[],"2026-07-22 04:02:09","\u003Cdiv align=\"center\">\n\n# ⚡ Bolt Slides\n\n**Presentation decks that are working web apps.**\n\nOne prompt in — your agent builds a deck where every slide is a live, responsive web page.\n3D, live data, working prototypes, and whatever you can prompt.\n\n[![Open in Bolt](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FOpen_in-⚡_Bolt-1a1a2e?style=flat-square)](https:\u002F\u002Fbolt.new\u002Fgithub.com\u002Fstackblitz\u002Fbolt-slides)\n[![Open in StackBlitz](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FOpen_in-StackBlitz-1389fd?style=flat-square)](https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fstackblitz\u002Fbolt-slides)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-c8f56e?style=flat-square)](.\u002FLICENSE)\n\n\u003Cimg src=\".github\u002Fassets\u002Fdemo.gif\" alt=\"Bolt Slides — from one prompt in Bolt to a finished interactive deck\" width=\"820\" \u002F>\n\n\u003C\u002Fdiv>\n\n---\n\n## Why we made this\n\nAI for slides is awesome, but the outputs tend to be slop: generic layouts, walls of bullets, nothing you'd be proud to present.\n\nAnd also: why are slides still *static*? Agents can build *anything*. What would it look like if you (tastefully) turned them loose on slides?\n\nBolt Slides is what we built to find out: building blocks any agent (Claude Code, Codex, Cursor, Bolt) can compose stunning, compelling presentations with. Bespoke layouts, real typography, considered animations, interactive anything. Every deck is a real web app, responsive on any screen, shared as a link.\n\n**Taste comes standard.**\n\n[See what that looks like →](https:\u002F\u002Fx.com\u002Fboltdotnew\u002Fstatus\u002F2077770386444341332?s=20)\n\nUnder 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.\n\n## Quick start\n\n**With an agent (the fun way).** Open the repo in [Bolt](https:\u002F\u002Fbolt.new\u002Fgithub.com\u002Fstackblitz\u002Fbolt-slides) and prompt it:\n\n> Build me a deck pitching «your thing» to «your audience».\n\nThe bundled skill ([`.bolt\u002Fskills\u002Fslides\u002FSKILL.md`](.\u002F.bolt\u002Fskills\u002Fslides\u002FSKILL.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.\n\n**By hand.**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fstackblitz\u002Fbolt-slides\ncd bolt-slides\nnpm install\nnpm run dev\n```\n\nThe dev server opens a 26-slide demo that exercises every component. Delete the demo slides in [`src\u002FApp.tsx`](.\u002Fsrc\u002FApp.tsx) and author your own.\n\n## Authoring\n\nEach top-level child of `\u003CDeck>` is one slide. Compose them from the component library, or write plain JSX:\n\n```tsx\n\u003CDeck>\n  \u003CCover\n    kicker=\"Acme · Series A\"\n    title={\u003Cspan className=\"accent-text\">Acme\u003C\u002Fspan>}\n    subtitle=\"Answers, not dashboards.\"\n    notes=\"Welcome — set up the problem, then hold a beat.\"\n  \u002F>\n\n  \u003CSlide center nav=\"Thesis\">\n    \u003Ch2 className=\"headline\">\n      Dashboards are everywhere. \u003Cspan className=\"accent-text\">Insight isn't.\u003C\u002Fspan>\n    \u003C\u002Fh2>\n    \u003CBuild at={1}>\n      \u003Cp className=\"subhead\">Acme turns raw events into answers — automatically.\u003C\u002Fp>\n    \u003C\u002FBuild>\n  \u003C\u002FSlide>\n\n  \u003CAgenda\n    kicker=\"Agenda\"\n    title=\"What we'll cover.\"\n    items={['The problem', 'How it works', { title: 'Pricing & the ask', hint: '5 min' }]}\n  \u002F>\n\u003C\u002FDeck>\n```\n\n- **`\u003CBuild at={n}>`** reveals content on the nth click — arrow keys step through builds before advancing slides, forward *and* back.\n- **`notes=\"…\"`** on any slide shows up in presenter mode; notes you edit while presenting persist locally.\n- Slides are ordinary React — fetch live data, mount a 3D scene, embed your actual product.\n\n## Presenting\n\n\u003Cimg src=\".github\u002Fassets\u002Fgrid-view.png\" alt=\"Grid view of every slide\" width=\"820\" \u002F>\n\n| Key | Action |\n| --- | --- |\n| `→` `↓` `Space` | Next (reveals builds first) |\n| `←` `↑` | Previous (rewinds builds) |\n| `Home` \u002F `End` | First \u002F last slide |\n| `S` | Sidebar — thumbnail rail |\n| `G` | Grid view — every slide at once |\n| `A` | Annotate — pen, highlighter, shapes, eraser |\n| `F` | Fullscreen |\n| `P` | Presenter mode — synced new tab |\n| `H` | Hide the UI |\n| `Esc` | Close overlays |\n\n- **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`.\n- **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.\n- **Deep links**: the URL hash tracks the slide (`\u002F#7`), so you can share a link straight to a slide.\n\n## Component library\n\n| | Components |\n| --- | --- |\n| **Structure** | `Cover` `Agenda` `Section` `Split` `Bento` `Slide` |\n| **Data** | `Charts` (bar · line · donut) `Table` `StatGrid` `BigNumber` `CountUp` `VisualDashboard` |\n| **Story** | `Quote` `Contrast` `Comparison` `Timeline` `Steps` `Chat` |\n| **Product** | `CodeWindow` `BrowserFrame` `Pricing` `Team` |\n| **Flair** | `Globe` `TiltCard` `SpotlightCard` `Marquee` `Accordion` `Tabs` |\n\nAll of them are demoed in the bundled starter deck, and all of them are responsive.\n\n## Theming\n\nEvery color, font, radius, and shadow lives in the `:root` block of [`src\u002Fstyles\u002Ftokens.css`](.\u002Fsrc\u002Fstyles\u002Ftokens.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.\n\n## Project structure\n\n```\n.bolt\u002Fskills\u002Fslides\u002F   the agent-facing authoring guide (the skill)\nsrc\u002Fdeck\u002F              engine + chrome — Deck, Slide, Build, Reveal, Annotator\nsrc\u002Fcomponents\u002F        the slide component library\nsrc\u002Fstyles\u002F            tokens.css (theme) + base.css (system styles)\nsrc\u002FApp.tsx            your deck (ships with the component demo)\n```\n\n## Contributing\n\nIssues and PRs welcome — see [CONTRIBUTING.md](.\u002FCONTRIBUTING.md). `npm run dev` to hack, `npx tsc --noEmit && npm run build` before you push.\n\n## License\n\n[MIT](.\u002FLICENSE) © StackBlitz\n","Bolt Slides 是一个基于 AI 代理的交互式网页演示文稿框架，支持通过自然语言提示一键生成可运行的 Web 应用级幻灯片。核心特点是每页幻灯片均为独立 React 组件，原生支持 3D 渲染、实时数据绑定、可交互原型及响应式布局；底层采用 TypeScript 构建，集成 Slidev 风格导航与 Presenter 模式。适用于技术路演、产品原型演示、开发者分享等需动态内容与代码即演示（Code-as-Presentation）能力的场景。",2,"2026-07-18 02:30:02","CREATED_QUERY"]