Slides

Slides — a premium, responsive, React presentation engine for Bolt

Classic paged slides (advance one at a time, present over them) — but rebuilt in Vite + React so each slide is a responsive web layout instead of a fixed 1080×607 canvas that clips. It keeps the Slidev UI you liked (the floating dock + thumbnail rail + click-builds + presenter) and adds real web interactivity.

Two halves — keep them separate:

• The engine + UI are pre-built — this repo is a complete, runnable app: the paged engine (src/deck/), the dock/rail chrome, the section components (src/components/), the shared CSS. Leave the engine as-is. Never regenerate it. This is the part you liked; it must look/behave identically.
• The content is authored fresh, every time — the slides (topic, structure, copy, visuals, theme) are designed from scratch for this request.

Theme surface. All color, type, radius, depth, and motion live in the :root token vocabulary of src/styles/tokens.css. Theme a brand once, there.

⛔ Three hard rules

1. Don't touch the engine — leave src/deck/ (the engine + chrome: Deck, Slide, Build, Reveal, DeckContext, icons, Annotator, useInView) untouched. Don't rewrite or paraphrase the engine or the chrome; author around it.
2. Author the deck from the user's REAL input — do not reskin the starter. src/App.tsx is a throwaway that only proves it runs. Delete its slides and write a new deck. Never reuse its order, copy, placeholders, or fake names.
3. Center what stands alone. Ask of every slide: does it have a side visual (a Split media panel, an image, a BrowserFrame, a chart beside text)?
   • No side visual (only text, or one structured block like Comparison / Tabs / Timeline / Accordion / StatGrid) → the slide MUST be centered: use <Slide center>, or a textAlign:'center' heading with marginInline:'auto' on every block below it.
   • Yes → left-aligned/asymmetric is allowed; the visual balances the text. A lone left-anchored block floating in empty space is the #1 alignment bug — never ship one. (The structured blocks self-center with built-in max-widths as a safety net, but headings/paragraphs around them are YOUR job to center.)

Step 0 — Ground the deck in the user's real input

Use the user's real topic, brand, document, facts. Never fabricate a placeholder company, logo, or quote for a real subject. If a URL/brand is given, the theme comes from that brand — fetch the page for real colors/font/logo, or use the brand's known palette, or STOP and ask. Report which colors/fonts you used and where from.

Step 1 — Run it in place (the repo is the app)

The repo root is already a complete Vite + React app — no scaffolding or copying. Its layout:

package.json  vite.config.ts  tsconfig*.json  index.html   src/main.tsx
src/App.tsx                 ← THROWAWAY. delete its slides; author the real deck.
src/styles/   tokens.css (edit :root ONLY) · base.css   ← don't edit base.css
src/deck/   Deck Slide Build Reveal DeckContext useInView icons Annotator   ← engine + UI. LOCKED.
src/components/  Cover BigNumber Contrast Chat Bento Split StatGrid Section   ← slide layouts
                Quote Pricing Steps Agenda Team
                CountUp TiltCard Marquee VisualDashboard Accordion Comparison
                Tabs Timeline CodeWindow BrowserFrame SpotlightCard Charts

npm install && npm run dev runs the deck at /. Verify the dock / thumbnail rail / click-builds work, then delete the starter slides and author the real deck in App.tsx.

Step 2 — Theme it (edit only the :root block)

All color, type, radius, depth, motion live in src/styles/tokens.css :root. Change values, never variable names. Nine ready-made theme families to pull from (dark product, editorial luxury, Swiss, dark technical, warm minimal, fintech, aurora glass, cinematic, paper editorial). One accent, used sparingly. Dark vs light: set html { color-scheme } in base.css and pick --bg/--fg accordingly. Set fonts in --font-head/--font-body and the @import at the top of base.css. Derive from the brand when given.

Tab title + icon — always, unprompted. Shared decks show the browser tab, so never leave the index.html placeholders: set <title> to the deck's real title (e.g. "Acme — Series A") and swap the emoji in the favicon <link> to one that fits the topic. Do this for every deck without being asked.

Step 3 — Author slides (each child of <Deck> is one slide)

Compose slides in App.tsx. The building blocks:

• <Slide> — one slide. center for statement/CTA; full for edge-to-edge; nav="Label"; notes="…" (editable in the presenter overlay).
• <Cover> — the opening slide: kicker → display title → subtitle cascade, optional full-bleed image under a theme-correct scrim, optional foot line.
• <BigNumber> — ONE enormous accent figure (pass a <CountUp>) + caption. Every deck should have one of these drama beats.
• <Contrast> — before/after, problem→solution: a muted panel vs an accent-lit panel with cross/check points. The classic pitch move.
• <Chat> — a chat window whose messages reveal one per click (builds) — user bubbles on the accent, assistant on the surface. For AI-product decks.
• <Globe> — a rotating, drag-to-spin 3D dotted globe (hand-built canvas, zero deps): accent markers at real [lat, lng] coordinates, optional label
  • value chips that ride their marker and fade behind the globe, optional arcs={[{from, to}]} great-circle connections, and stat rows beside it. Colors follow the tokens automatically. Label a FEW hero markers, not all.
• <Split> — text + edge-to-edge media (flip swaps). media = <img>, a color panel, a <BrowserFrame>, or <TiltCard><VisualX/></TiltCard>.
• <Bento> — asymmetric tile grid; tiles take c/r spans + variant.
• <StatGrid> — responsive proof cards; pass a <CountUp> as a stat value.
• <Section> — chapter divider: ghost number + accent glows. The full-bleed breather for decks without photography; use between parts.
• <Agenda> — numbered table-of-contents rows (strings, or {title, hint}).
• <Steps> — horizontal numbered process; the connector draws in. Use for "how it works" instead of a bulleted list.
• <Pricing> — 2–4 tier cards; highlight: true crowns one with a badge.
• <Team> — people grid; photos via img, else auto-initials on the accent.
• <Quote> — pull-quote slide with attribution (don't add quotation marks — the accent mark provides them).
• <Comparison> — us-vs-them feature matrix; one column highlighted in the accent.
• <Table> — a real data table: uppercase ruled header, right-aligned tabular numerals, optional highlightCol/highlightRow, caption for the source. Use for actual data (pricing tiers → Pricing, feature ticks → Comparison). Keep ≤5 columns / ≤7 rows — a paged slide can't scroll.
• <Tabs> — tabbed content with a sliding accent pill.
• <Accordion> — expand/collapse panels (FAQ, feature detail).
• <Timeline> — vertical roadmap that draws its connector + milestones in.
• <CodeWindow> — macOS code window with line numbers + line highlight.
• <BrowserFrame> — browser chrome around a screenshot / full-bleed app mock (fill it edge-to-edge — a real-looking app screen, not a floating card).
• <SpotlightCard> — card with a cursor-follow accent glow (Linear/Vercel hover).
• Charts — <BarChart> / <LineChart> / <DonutChart>, all draw-in on view.
• Atoms (CSS classes): .display .headline .lead .subhead .kicker .figure .accent-text .rule. All fluid (clamp()).

⚠️ Pick layouts for the story — not the showcase

The starter demo uses every layout because it is a component demo. A real deck must not. Every specialty layout has an entry condition — if the content doesn't meet it, the layout does not appear:

• <Chat> — ONLY if the product genuinely has a conversational / AI interface, and the exchange shown is a real, plausible use of it. Never decoration for a non-chat product.
• <Pricing> — only when pricing is actually part of this deck's ask.
• <Team> — pitch and agency decks; skip in launches, reports, teaching.
• <Section> — only in decks long enough to have real chapters (~12+ slides).
• <BigNumber> — needs one real, defensible figure (cite it in foot). At most one per deck — two giant numbers cancel each other out.
• <Contrast> — when a genuine before/after exists; don't build a strawman.
• <Agenda> — formal or long presentations; an 8-slide pitch needs no TOC.
• <Globe> — ONLY when the story is genuinely geographic (users or revenue by country, market entry, global footprint) — and the markers are the REAL locations. Never as a generic "we're global" flourish.

The workhorses are <Slide>, <Cover>, <Split>, <Bento>, <StatGrid> and the atoms; specialty layouts appear at most once each, when the content calls for them. If you can't say in one sentence why a layout serves this deck, cut it.

Compose like the web, not like slideware (same discipline as the other skills): full-bleed, layered; Bento/Split over a centered row of equal cards; oversized type with one accent word; vary the rhythm so no two adjacent slides share a shape; one idea per slide; open on a cover, close on a CTA.

Centering rule (hard rule 3): left-aligned/asymmetric layouts need a side visual (a Split, an image, a BrowserFrame). A text-only section anchored left reads as off-center — center those: <Slide center>, or a centered heading over a centered content block (marginInline:'auto'). Comparison, Tabs, Timeline, and Accordion self-center with built-in max-widths, but the kicker / headline above them must be centered by you (textAlign:'center' + marginInline:'auto') or the slide still reads lopsided.