Make a deck in four steps

Open the Studio.
Pick a format and a look: theme, accent colour, typeface and corner radius.
Add your notes. Whatever you paste is the raw material for the slides.
Copy the prompt and paste it into any AI model. Save the reply as a .html file, open it in a browser and press F.

The site never calls a model. The prompt carries the format's own reference code, so the model returns a deck that plays the same way as the format you picked.

Open the Studio

Present

The same keys work in every format.

Input	Action
`→` `↓` `Space` `PageDown`	Next slide
`←` `↑` `PageUp`	Previous slide
`Home` `End`	First and last slide
`1`	Jump to slide 1 (through 9 for slides 1 to 9)
`F`	Toggle fullscreen
Mouse wheel	Next or previous, in formats that opt in
Swipe	Next or previous on touch screens

The Studio can add optional behaviours to a deck it writes: an overview grid on O, speaker notes on N, autoplay on A, and a print stylesheet that puts one slide on each landscape page.

Change the look from the URL

Every format reads look overrides from its address, so you can restyle a deck without editing it.

Parameter	Values
`?theme=`	`dark` or `light`
`&accent=`	A hex colour, URL encoded, for example `%23f05a1e`
`&font=`	`sans`, `grotesk`, `humanist`, `serif` or `mono`
`&radius=`	Corner radius in pixels, 0 to 99
`#3`	Open on slide 3
`&nohash`	Stop the deck rewriting the address as you move

https://velacode.xyz/deck/styles/bento.html?theme=light&accent=%23f05a1e&font=serif&radius=16#3

The markup contract

A format is <main class="stage"> holding one <section class="slide"> per slide. Give each slide a short data-titlefor trackers and rails. Everything else is the format's own business.

<body data-wheel data-reveal-delay="220" data-animate-delay="300">
  <main class="stage">
    <section class="slide" data-title="Opening">
      <h1 class="reveal">The finding, in one sentence</h1>
      <p class="reveal">Support for it.</p>
    </section>
    <section class="slide" data-title="Numbers">
      <div class="ring" data-value="92" data-label="client retention"></div>
    </section>
  </main>
  <script src="../shared/components.js"></script>
  <script src="../shared/deck.js"></script>
</body>

The engine, deck.js, gives your CSS everything it needs to animate:

Each slide gets data-state of past, active or future, plus --d (signed distance from the active slide) and --ad (absolute distance).
The <html> element gets --i (index), --n (count) and --progress (0 to 1), and a data-slide attribute.
Anything with the class reveal inside the active slide gains in, staggered.
<body> attributes: data-wheel lets the wheel move slides, data-reveal-delay (default 220ms) holds reveals back for formats with long transitions, and data-animate-delay (default 300ms) does the same for charts.
The document emits deck:change with { index, slide, deck } on every move.
window.deck exposes i, n, slides, go(k), next() and prev().

Slide objects

Charts, counters and diagrams are plain markup with data attributes. They take their colours and type from the format's tokens, so the same object looks native in every format. Anything drawn gets the class on when its slide becomes active, and every transition keys off that.

<div class="ring" data-value="92" data-label="client retention"></div>
<div class="bar" data-value="6" data-max="8" data-label="projects shipped" data-unit=""></div>
<span class="value count" data-to="38" data-suffix="%"></span>
<div class="waffle" data-value="64" data-dots="100" data-label="checked you online first"></div>
<div class="linechart" data-values="9,11,10,14,19,23" data-labels="Jan,Mar,May,Jul,Sep,Nov" data-unit="%"></div>
<div class="funnel"><div class="tier" data-label="Visitors" data-value="12400"></div></div>

data-idx, data-total and data-gotobelong to the engine's counters and navigation. Never put them on an object. See every object live on the Objects page.

License

MIT licensed, formats included. Use them, change them, ship them. Credit is appreciated, never required.

One file per deck.