npm package: @jfenc91/slidecraft
Description: A modern Markdown-driven presentation framework with WebGL backgrounds, GPU-accelerated transitions, beautiful themes, code walkthroughs, live drawing, and remote control.
Author: jfenc91
Latest version: 0.3.0

# Slidecraft

A modern Markdown-driven presentation framework with cinematic WebGL backgrounds, GPU-accelerated transitions, beautiful themes, code walkthroughs, live drawing, and remote control.

**[Live demo →](https://jfenc91.github.io/slidecraft/)**

## Features

- **Markdown authoring** — write slides as plain `.md` with YAML frontmatter
- **Per-slide frontmatter** — set `transition`, `background`, `class`, or `layout` in a YAML block at the top of each slide
- **WebGL backgrounds** — particles, gradient, geometric, waves
- **GPU transitions** — dissolve, morph, zoom, slide
- **Code walkthroughs** — line highlighting, multi-step reveals, syntax highlighting via highlight.js
- **Auto-fit code blocks** — code text scales to the largest size that fits the slide without scrolling
- **Diff (before/after) layout** — side-by-side `<!-- layout: diff -->` slides
- **Mermaid diagrams**, **KaTeX math**, **terminal blocks**, **fragments**
- **Speaker notes**, **slide overview (G)**, **drawing mode (D)**, **laser pointer (L)**
- **Remote control** via QR code, **autoplay**, **fullscreen**
- **20+ themes** — midnight, aurora, cyberpunk, forest, ocean, synthwave, and more

## Quick start

```bash
# Clone or use as a template
git clone https://github.com/jfenc91/slidecraft.git my-talk
cd my-talk
npm install
npm run dev
```

Open http://localhost:5173 to see the marketing site, or http://localhost:5173/view?p=presentation to launch the demo deck.

## Install from npm

```bash
npm install @jfenc91/slidecraft
```

## Authoring a presentation

Create `public/presentations/my-talk.md`:

````markdown
---
title: My Talk
theme: midnight
transition: dissolve
background: particles
---

# Welcome

Your first slide.

---
transition: zoom
background: gradient
fragment: fade-up
---

## Second slide

+ Bullet one (revealed on keypress)
+ Bullet two

???
Speaker notes for this slide.
````

Then visit `http://localhost:5173/view?p=my-talk`.

### Slide syntax

Slidecraft is plain CommonMark with three conventions on top:

| Feature | Syntax |
|---------|--------|
| Slide separator | A line containing only `---` |
| Per-slide config | A YAML frontmatter block right after the separator (`---\nkey: value\n---`) |
| Speaker notes | A line containing only `???`; everything below is notes |
| Fragment (reveal on click) | A list item starting with `+ ` instead of `- ` |
| Section / subsection | The first `#` heading on a slide opens a section; the first `##` opens a subsection |

Recognized per-slide YAML keys:

| Key | Values | Effect |
|-----|--------|--------|
| `transition` | `dissolve`, `morph`, `zoom`, `slide`, `none` | Override deck transition |
| `background` | `particles`, `gradient`, `geometric`, `waves`, `none` | Override deck background |
| `class` | `centered`, `two-column`, `title-slide`, … | Layout class on the slide element |
| `layout` | `diff` | Built-in layout (e.g. before/after) |
| `fragment` | `fade-up`, `fade-left`, `fade-right`, `highlight-current` | Default style for `+` fragments on this slide |

### Keyboard shortcuts

| Key | Action |
|-----|--------|
| **→ ↓ Space** | Next slide |
| **← ↑** | Previous slide |
| **G** | Slide overview grid |
| **F** | Toggle fullscreen |
| **S** | Speaker notes |
| **D** | Drawing mode |
| **L** | Laser pointer |
| **R** | Remote control QR |
| **P** | Pause / resume autoplay |
| **?** | Help overlay |

## Building

```bash
npm run build          # build to dist/
npm run build:pages    # build with /slidecraft/ base path for GitHub Pages
npm run preview        # preview the production build locally
```

## License

[MIT](./LICENSE) © jfenc91