Majordomus reel
A vertical promo video for Majordomus, rendered from code: narration, every frame, the music
and the sound effects. Nothing is filmed, licensed or generated by a video model.
./make-reel.sh # scenes.json -> majordomus-reel.mp4
BUILD=$PWD/build-x OUT=$PWD/x.mp4 ./make-reel.sh # one build directory per render, always
SCENES=scenes-short.json OUT=$PWD/short.mp4 ./make-reel.sh # the cut under three minutes
BUILD=$PWD/build-x PREVIEW=4,60.5 node render.mjs # stills only: $BUILD/preview-<t>.png
THUMB=thumb-v5.html OUT=thumbnail-v5.jpg node thumb.mjs
Overrides: VOICE (Edge neural voice, default en-US-AndrewMultilingualNeural), RATE
(default -4%), FPS (30), MUSIC=0, CAPTIONS=1 (burned-in subtitles, off by default),
WORKERS, OPEN=0.
How it is built
| file | what it holds |
|---|
scenes.json | one entry per scene, in screen order: id, title (the chapter), act (one of seven: PROBLEM, CONTRACT, WORKFLOW, PLATFORM, MESH, MEMORY, MANIFESTO; drawn as the rail of acts), vo (the narration), min (seconds), nocaption |
scenes-short.json | a subset of the same entries: the Shorts cut |
reel.html | every scene as a <section>, the CSS, the timeline (setup, renderAt) |
gen.js | the generative layer on p5.js in instance mode: noLoop() and one redraw() per frame, so a frame is a function of time |
viz.js | graphs (Cytoscape), charts (Apache ECharts) and the Flowbite timeline recipe in one shared theme; each mounts inside its scene's *-space, so it cannot draw outside it |
synth.mjs | music (Am-F-C-G, 100 bpm, a drop at the reveal) and every sound effect, sample by sample |
render.mjs | voice -> word timings -> frames through local Chrome -> ffmpeg; writes $BUILD/chapters.txt |
tts.py | Edge TTS with word boundaries (free, no key) |
thumb*.html, thumb.mjs | thumbnails, 1080x1920 |
youtube-metadata.md | titles, descriptions, tags, chapters, pinned comments, and what is published |
site/ | the GitHub Pages site: index.html, build.mjs (video + chapters into _site/), deploy.sh, verify.sh |
The libraries load from jsDelivr at pinned versions ([email protected], [email protected],
[email protected]), so a render needs the network.
Timing is derived, never typed: a scene lasts as long as its narration needs, and an element
appears on the word it belongs to (data-cue="word", data-cue="word#2" for the second one,
data-at as an offset). A cue that is never spoken is reported as a warning.
Identity
The colours are majordomus.dev's own dark roles (share/design/tokens.yaml in the repository):
page gray-950, cards gray-900 on gray-800 lines, text white and gray-400, accent blue-400; status
ok emerald, bad rose, warn orange; concurrent things in the categorical series (Claude orange,
Codex blue, Gemini emerald, then violet and cyan). Headings are serif like the site's hero, with
emphasis in italic blue-400; eyebrows mono uppercase. From the Prismatic brand (SIG NIHL) only the
discipline: no gradients, no decorative noise, no shadows, 1px lines, radius at most 4px. Colour
beyond that lives only in the prism. Content stays in the Shorts safe frame: x 80-910, captions
above the bottom 560px.
Checking a cut
BUILD=$PWD/build-x CHECK=1 node render.mjs # layout gate: exit 1 on any finding
BUILD=$PWD/build-x PREVIEW=ends node render.mjs # every scene's last frame, for the eye
CHECK=1 renders every scene at the middle and at the end of its time and fails on text that
overlaps other text and on ink outside the Shorts safe frame: DOM text, canvas labels, boxes and
graph nodes alike (the canvas records what it draws). Scenes with a rail of acts must stay above
it; the manifesto pages may use the full height. Each failing frame is saved as
$BUILD/check-<scene>-<t>.png. Run it on every cut (SCENES=scenes-short.json too) before a
render, then read the PREVIEW=ends stills: the gate proves geometry, the eye judges the rest.
Adding a scene
- Read the feature in the repository's
docs/ and say only what is there.
- Add the entry to
scenes.json where it belongs in the story, with a title.
- Add its
<section class="scene" id="..."> to reel.html in the same position.
- If it draws, add a painter to
gen.js (p5) or a graph or chart to viz.js, under the scene id.
PREVIEW the scene, read the stills, then render.
The last scene, loop, is the first frame again: the reel loops without a seam, and the
narration bridges it ("Because tomorrow, again," / "Your AI agent says the work is done.").
Publishing
The site at https://korczis.github.io/majordomus-reel/ is site/index.html with the chapter list
filled in and the cut re-encoded for the web (720x1280). site/deploy.sh builds it into _site/
and force-pushes a single orphan commit to gh-pages, so a video never accumulates in history:
VIDEO=$PWD/majordomus-reel-v5.7.mp4 CHAPTERS=$PWD/build-v57/chapters.txt \
POSTER=$PWD/thumbnail-v5.jpg SHORT=$PWD/majordomus-reel-v5.5-short.mp4 \
SHORT_POSTER=$PWD/thumbnail.jpg site/deploy.sh
site/verify.sh checks the live site: the chapters are on the page, reel.mp4 is served as
video/mp4 with byte ranges (so the chapters can seek), and the poster is there.
YouTube Studio, channel UCToRpxVyOCAnIN73ZuyXyMA. A video longer than three minutes is a regular
video (chapters in the description); the short cut is a Short. Browser automation can upload a
thumbnail (under 10 MB, copied into the session scratchpad first) but not the video: drag it in.
AI agents
This repository is supervised by Majordomus. An agent starts at AGENTS.md.
