remotion-presenter

Presenter for slide presentations

Role

A presenter that lets you present markdown slides in the browser by navigating with click/keyboard. Using Remotion's @remotion/playerso that all animations (badge bounce, title fade-in, bullet stagger, etc.) work as-is.

How to run

npm run slides:present -- markdowns/<topic>/<topic>.md

The Vite server starts on port 4000.

Important: restart after modifying theme/markdown

This presenter reads markdown at startup via Vite define.
Therefore, theme: after changing the theme, modifying frontmatter, or changing image references, you must terminate the existing slides:present process and run it again.
A simple browser refresh alone may leave the previous markdown state in place.
If the theme doesn't change on screen or the slide count looks wrong, first check the frontmatter format and whether the server was restarted.

File location

src/presenter/
├── Presenter.tsx       # Player + 클릭/키보드 제어
├── index.tsx           # React 진입점
├── index.html          # HTML
├── types.d.ts          # 가상 모듈 타입
└── vite.config.ts      # Vite 설정 (port 4000, 가상 마크다운 모듈)

Controls

Action	Effect
→ / Space / PageDown	Next slide
← / PageUp	Previous slide
Home	First slide
End	Last slide
F	Toggle fullscreen

Prev / Next buttons and the slide number are displayed at the bottom.

How it works

The Vite virtual module plugin reads the markdown file via the SLIDE_MARKDOWN_FILE environment variable
Automatically replaces image paths with markdowns/<topic>/파일명auto-replaced with
parseSlideMarkdown()by parsing with SlideData[] to generate
@remotion/player의 Player rendered with the component
Plays animation on slide navigation → automatically pauses after settle

No need to register in Root.tsx

The presenter is not a Remotion composition but an independent Vite app, so it is not registered in Root.tsx.