Images & Assets¶

Image files¶

Each scene uses one PNG image displayed in the right panel of the split-layout. Images live at:

video/hf/img/NN_<id>.png

Where NN is the zero-based index of the scene in SCENES and <id> is the scene's id field. This matches the same prefix used for audio files and scene HTML blocks.

Current images¶

File	Scene
`img/00_intro.png`	intro
`img/01_llm.png`	llm
`img/02_ai.png`	ai
`img/03_mcpgw.png`	mcpgw
`img/04_mcpreg.png`	mcpreg
`img/05_skill.png`	skill
`img/06_outro.png`	outro

Recommended dimensions¶

Images are displayed in a flex: 1 right panel at height: 840px. The object-fit: cover CSS means any aspect ratio works, but 16:9 or 3:2 landscape images give the best result with minimal cropping.

Minimum recommended resolution: 1200 × 800 px.

Adding an image for a new scene¶

When you add scene N with id = "my_scene":

Place the image at video/hf/img/N_my_scene.png
Re-run build.py — the generated scene block automatically references ../img/N_my_scene.png

No changes to build.py are needed for image paths; they are derived from the scene index and id.

Audio files¶

Audio files are generated by build.py and cached:

video/hf/audio/NN_<id>.mp3

These are gitignored. The audio directory is created automatically by build.py if it doesn't exist.

Audio format¶

ElevenLabs is called with output_format=mp3_44100_128 — 44.1 kHz stereo MP3 at 128 kbps.

The HyperFrames renderer mixes the MP3s directly; no additional encoding step is needed before render.

Gitignore summary¶

Only the img/ directory is tracked in git. All other generated artifacts are gitignored:

video/hf/audio/      # generated TTS audio
video/hf/index.html  # generated host composition
video/hf/scenes/     # generated scene blocks
video/hf/final.mp4   # rendered video
*.mp4