reveal.js Presentations

Create web-based presentations as single HTML files using reveal.js v5 via CDN.

Quick Start

1. Copy assets/template.html to the project directory
2. Replace {{TITLE}}, {{SUBTITLE}}, {{THEME}} placeholders
3. Add slides as
   elements inside
4. Open in browser or deploy to Vercel/GitHub Pages

Slide Structure

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
    <!-- Vertical stack -->
    <section>
      <section>Slide 3.1</section>
      <section>Slide 3.2 (down)</section>
    </section>
  </div>
</div>

Key Features

Fragments (click-to-reveal)

<p class="fragment fade-up">Appears on click</p>
<p class="fragment fade-up">Then this</p>

Styles: fade-in (default), fade-up, fade-down, fade-left, fade-right, fade-out, fade-in-then-out, grow, shrink, strike, highlight-red/green/blue

Auto-Animate

Add data-auto-animate to adjacent sections — matching elements animate automatically:

<section data-auto-animate>
  <h1>Title</h1>
</section>
<section data-auto-animate>
  <h1 style="color: red;">Title</h1>
  <p>New content</p>
</section>

Backgrounds

<section data-background-color="#1a1a2e">Solid</section>
<section data-background-gradient="linear-gradient(135deg, #0f0f13, #1a1a2e)">Gradient</section>
<section data-background-image="photo.jpg" data-background-size="cover">Image</section>

Speaker Notes

<section>
  <h2>Slide</h2>
  <aside class="notes">Press S to see these notes</aside>
</section>

Viewport Sizing

Set width and height in Reveal.initialize(). reveal.js scales the content to fit the browser window. Use larger values (e.g. 1400×800) if content looks too large on screen — the framework scales down automatically.

Reveal.initialize({
  width: 1400,
  height: 800,
  margin: 0.04,
});

Custom Styling

Use a separate style.css file or inline