От статичных слайдов к интерактивным веб-приложениям
Компания StackBlitz представила проект Bolt Slides, который решает проблему «мертвых» презентаций. В отличие от традиционных инструментов, здесь каждый слайд — это полноценная, отзывчивая веб-страница на базе React. Это позволяет внедрять 3D-сцены, подключать живые данные, встраивать работающие прототипы продуктов и использовать любую логику, доступную в вебе.
Разработчики отмечают, что современные AI-генераторы слайдов часто выдают шаблонный контент. Bolt Slides предлагает агенту (например, Claude Code, Cursor или Bolt) не просто текст, а архитектуру приложения, где каждый элемент — это код.
Как это работает: AI и React
Под капотом Bolt Slides использует структуру, похожую на Slidev, но с ключевым отличием: каждый слайд является обычным React-компонентом. Это открывает возможности для:
- Живых данных: Запрос API прямо в компонент слайда.
- Интерактивности: Кнопки, формы и анимации, реагирующие на действия зрителя.
- Генерации через промпт: Специальный навык (skill) обучает AI-агентов создавать тематические презентации с правильным оформлением, фавиконками и настройкой заголовков вкладок.
Ключевые возможности и компоненты
Фреймворк поставляется с обширной библиотекой компонентов, которые автоматически адаптируются под любые экраны. Ниже приведена структура доступных элементов:
| Категория | Примеры компонентов | Назначение |
|---|---|---|
| Структура | Cover, Agenda, Section, Split, Bento, Slide | Базовая компоновка слайдов и навигация |
| Данные | Charts (bar, line, donut), Table, StatGrid, BigNumber, CountUp, VisualDashboard | Визуализация метрик и графиков в реальном времени |
| Визуал/Сторителлинг | Quote, Contrast, Comparison, Timeline, Steps, Chat | Акценты, сравнения и нарративные блоки |
| Продукт/Flair | CodeWindow, BrowserFrame, Pricing, Team, Globe, TiltCard, Marquee, Accordion, Tabs | Демонстрация интерфейсов, цен, команд и интерактивных элементов |
Режимы презентации и аннотации
Bolt Slides предлагает продвинутые инструменты для спикеров. Режим презентера открывается во второй вкладке браузера и синхронизируется с экраном аудитории через BroadcastChannel. Доступны таймер, предпросмотр следующего слайда и редактируемые заметки, которые сохраняются локально.
Особенность системы — якорные аннотации. Если спикер рисует круг вокруг показателя на ноутбуке, эта аннотация «привязана» к данным, а не к пикселям. При изменении верстки (например, на мобильном телефоне зрителя) круг останется вокруг нужного элемента.
Темизация и запуск
Все стили (цвета, шрифты, радиусы, тени) управляются через CSS-переменные в файле src/styles/tokens.css. Изменение одной переменной, например --primary, перекрашивает всю презентацию, включая интерфейс управления. В комплекте идет 9 готовых тем — от «editorial luxury» до «dark technical».
Проект открыт под лицензией MIT. Для быстрого старта достаточно клонировать репозиторий, выполнить npm install и запустить npm run dev, что откроет демо-презентацию из 26 слайдов, демонстрирующих все возможности библиотеки.
Источник: Github ↗