Presentation Mode

The <Presentation> component turns Elucim into a full slide-deck system. Each <Slide> can contain its own normalized document rendered with <DslRenderer>, and transitions handle movement between slides.

This is a React composition shell from @elucim/core, not the canonical JSON/YAML DSL authoring model. Agent-authored documents should stay as normalized scenes with timelines and state machines; use <Presentation> only when a React host app wants to arrange multiple scenes into a deck.

Presentation Props

Prop	Type	Default	Description
width	number	1920	Slide width in pixels
height	number	1080	Slide height in pixels
background	string	'#0d0d1a'	Default background color for all slides
transition	string	'none'	Transition type: 'none' | 'fade' | 'slide-left' | 'slide-up' | 'zoom'
transitionDuration	number	400	Transition duration in milliseconds
showHUD	boolean	true	Show the slide counter overlay
showNotes	boolean	false	Show the presenter notes panel
startSlide	number	0	Zero-based index of the initial slide
onSlideChange	(index: number) => void	—	Callback fired when the active slide changes
children	React.ReactNode	—	Must be <Slide> components

Slide Props

Prop	Type	Default	Description
title	string	—	Slide title (displayed in the HUD and presenter view)
notes	string	—	Presenter notes (shown when showNotes is enabled)
background	string	—	Background color override for this slide
children	React.ReactNode	—	Slide content — usually a <DslRenderer> scene, but any React content is allowed

Basic Usage

import { Presentation, Slide } from '@elucim/core';
import { DslRenderer, type ElucimDocument } from '@elucim/dsl';

const welcome: ElucimDocument = {
  version: '2.0',
  scene: { type: 'player', width: 1920, height: 1080, children: ['title'] },
  elements: {
    title: { id: 'title', type: 'text', props: { type: 'text', x: 960, y: 540, content: 'Welcome to Elucim', fill: '$title', fontSize: 64, textAnchor: 'middle' } },
  },
};

const equation: ElucimDocument = {
  version: '2.0',
  scene: { type: 'player', width: 1920, height: 1080, children: ['equation'] },
  elements: {
    equation: { id: 'equation', type: 'latex', props: { type: 'latex', expression: 'e^{i\\pi} + 1 = 0', x: 960, y: 500, fontSize: 48 } },
  },
};

<Presentation
  width={1920}
  height={1080}
  transition="fade"
  transitionDuration={500}
  showHUD
>
  <Slide title="Welcome" notes="Introduce the topic">
    <DslRenderer dsl={welcome} controls={false} fitToContainer />
  </Slide>

  <Slide title="The Math" notes="Show the core equation">
    <DslRenderer dsl={equation} controls={false} fitToContainer />
  </Slide>
</Presentation>

Navigation

Input	Action
→ / ↓	Next slide
← / ↑	Previous slide
Space	Next slide
Click navigation buttons	Next / previous slide
F	Toggle fullscreen

Presentation Context

Use usePresentationContext() inside any component rendered within a <Presentation> to access slide state and navigation:

import { usePresentationContext } from '@elucim/core';

function SlideCounter() {
  const { slideIndex, totalSlides, goTo, next, prev, isFullscreen, toggleFullscreen } =
    usePresentationContext();

  return (
    <div>
      Slide {slideIndex + 1} / {totalSlides}
      <button onClick={prev}>Prev</button>
      <button onClick={next}>Next</button>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? 'Exit' : 'Fullscreen'}
      </button>
      <button onClick={() => goTo(0)}>Go to start</button>
    </div>
  );
}

Context API

Property	Type	Description
slideIndex	number	Current slide index (zero-based)
totalSlides	number	Total number of slides
goTo(index)	(number) => void	Jump to a specific slide
next()	() => void	Advance to the next slide
prev()	() => void	Go back to the previous slide
isFullscreen	boolean	Whether the presentation is in fullscreen mode
toggleFullscreen()	() => void	Toggle fullscreen on/off

Tip

Each <Slide> typically contains its own <DslRenderer> scene so that every slide has independent document playback. The slide’s notes prop is only visible when showNotes is enabled — perfect for a dual-screen presenter setup.

Theming

The Presentation component is fully theme-aware. All UI elements (navigation arrows, fullscreen button, HUD text, progress dots) use currentColor and CSS color-mix(), so they automatically adapt to any light or dark color scheme.

Background

Pass a CSS custom property for the background prop to let your site’s theme control the slide background:

<Presentation background="var(--slide-bg, #1a1a2e)" />

Documents Inside Slides

Render normalized documents inside slides with controls={false} so the Presentation’s own HUD handles navigation:

<Slide title="Animated Math">
  <DslRenderer dsl={sceneDoc} controls={false} fitToContainer />
</Slide>

Using fill="currentColor" in your slide content ensures text and shapes inherit the theme color automatically.