---
name: slide-companion
description: Compose a photographic three-page lesson beside a continuous human presenter, then reveal the surrounding deck workspace.
version: 1.0.1
---

# Slide Companion

A parameterized HTML and GSAP renderer for short educational decks. It produces an editable 1920 × 1080 HyperFrames project, lasting 8.4 seconds at 30 fps. It does not generate footage, photographs, narration or arbitrary story structures.

## Prepare content

Write a JSON brief containing `workspace`, `palette`, `presenter`, `crop` and exactly three `pages`. Each page needs `heading`, `sentence` and `picture`. Use local media paths relative to the JSON file. Supply three meaningful photographs and one licensed, continuous presenter take of at least 8.4 seconds. A short clip is rejected rather than repeated.

Keep the workspace name within 60 characters, each heading within 36 and each sentence within 100. These are input limits, not a guarantee of readable layout. Check actual line breaks for every brief. `crop` is a horizontal and vertical percentage pair, for example `75% 35%`; check the face throughout the take. Hands may leave an upright portrait crop. This is a rectangular video window with no alpha segmentation.

Choose `harbor`, `plum`, `moss` or `graphite`. English uses Manrope Variable; CJK text uses Noto Sans SC, with local font files copied into the project. New imagery and footage stay outside the reusable package.

## Install and compose

Use Node.js 22 or newer and install FFmpeg/ffprobe on PATH. Run `npm ci` from the extracted package, then:

```sh
node compose.mjs /absolute/brief.json /absolute/project
./node_modules/.bin/hyperframes render /absolute/project --output /absolute/film.mp4 --fps 30 --quality high --strict --workers 1 --no-browser-gpu --experimental-fast-capture=false
```

The first dependency installation needs network access. Generated projects use local media, GSAP and fonts. Keep the copied dependency notices with shared projects. HyperFrames may acquire its supported browser or media tooling during setup; failure must be resolved before claiming a render works.

## Motion and inspection

Pages switch at 2.1 and 4.1 seconds with a brief positional settle. The last page remains while the deck shrinks between 5.9 and 6.9 seconds, exposing the workspace name and three navigation thumbnails. The presenter stays in the same screen position throughout. Inspect joins for blank pages or overlapping headings, then inspect the entire pullback and final hold.

`window.scSeek(seconds)` seeks the graphics timeline and returns a boolean. Its valid interval is 0 through 8.4. Video time is managed separately by HyperFrames; browser inspection must also seek the video. The registered timeline is `window.__timelines['slide-companion']`.

The renderer intentionally mutes footage and creates a silent film. There is no narration synchronization, soundtrack editor or audio mix. Test page bounds, fonts, forward and backward seeking and encoded playback for each new brief. Record actual dropped frames; successful encoding alone is not visual acceptance.