@gbaudrit/revealjs-speakerview

A speaker view plugin for Reveal.js with slide timers, pacing indicators, and live slide previews.

Features

• Dual slide preview — current slide (zoomable) + next slide
• Slide timer — countdown per slide based on data-pacing (minutes)
• Global timer — total remaining based on data-total on the first slide
• Pacing card — color-coded indicator (blue = ahead, green = on time, red = late)
• Blinking background — visual alert when slide time is running out
• Navigation badges — horizontal / vertical / fragment position
• Speaker notes
• Keyboard shortcuts — S to open the speaker view (configurable)

Install

npm install @gbaudrit/revealjs-speakerview

Requires reveal.js >= 5 as a peer dependency.

Usage

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import SpeakerView from '@gbaudrit/revealjs-speakerview';

const deck = new Reveal({
  plugins: [Markdown, SpeakerView()]
});
deck.initialize();

The speaker window opens on S (configurable via openKey). It is served from
/speaker-view when using the Vite plugin, or from
/node_modules/@gbaudrit/revealjs-speakerview/dist/speaker.html otherwise.

Options

SpeakerView({
  // Route served by speakerViewVite() (default: '/speaker-view')
  // Override with the path to speaker.html if not using the Vite plugin
  speakerUrl: '/speaker-view',

  // Key to open the speaker view window (single uppercase letter, default: 'S')
  openKey: 'S',

  // Speaker view configuration (all optional — defaults shown)
  config: {
    // Timers
    DEFAULT_PACING_SEC:    60,    // fallback seconds per slide when no data-pacing

    // Blinking background alert
    BLINK_THRESHOLD:       0.3,   // < 1 = ratio of slide time remaining, >= 1 = seconds remaining
    BLINK_DURATION_MS:     300,   // blink cycle duration in ms
    BLINK_STOP_SEC:        30,    // stop blinking after N seconds
    BLINK_STOP_ON_ELAPSED: true,  // stop blinking immediately when slide time elapses

    // Pacing card color thresholds
    PACING_AHEAD_SEC:      60,    // seconds ahead threshold → blue
    PACING_LATE_SEC:       30,    // seconds late threshold → red
    PACING_GRADIENT_RANGE: 4,     // multiplier on PACING_AHEAD/LATE_SEC to reach full hue extreme

    // Pacing card hue/sat/lightness
    PACING_HUE_AHEAD:      240,   // hue (0-360) when very ahead — blue
    PACING_HUE_OK:         120,   // hue (0-360) when on time — green
    PACING_HUE_LATE:       0,     // hue (0-360) when very late — red
    PACING_SAT_OK:         45,    // saturation % at on-time center
    PACING_SAT_EXTREME:    80,    // saturation % at extremes
    PACING_LIT_OK:         44,    // lightness % at on-time center
    PACING_LIT_EXTREME:    32,    // lightness % at extremes

    // Slide-timer background gradient
    BG_HUE_FULL:           120,   // hue when full slide time remains — green
    BG_HUE_EMPTY:          0,     // hue when slide time is elapsed — red
    BG_SAT:                90,    // saturation %
    BG_LIT:                45,    // lightness %
    BG_ENABLED:            true,  // set to false to disable the background color

    // Layout & zoom
    DECK_SPLIT:            '40% 1fr', // grid-template-rows for the right column (next slide / notes)
    CURRENT_SLIDE_ZOOM:    1.3,   // zoom factor for the current slide preview
    NEXT_SLIDE_ZOOM:       1.3,   // zoom factor for the next slide preview
  }
})

Slide annotations

<!-- .slide: data-total="45" data-pacing="5" -->
# Title slide

---
<!-- .slide: data-pacing="10" -->
# Chapter

• data-total (minutes) — on the first slide, sets the total presentation time
• data-pacing (minutes) — per-slide planned duration

License

MIT