Video mode

Video mode turns one Markdown file into a video. It is the same Neko build, the same components and the same neko watch loop as decks and documents: a video is just a page whose front matter says video: true. Each --- rule starts a new scene, every block in a scene animates in on its own, and neko render films the result to an MP4.

---
title: Write Markdown. Get video.
video:
  theme: curiosity
  transition: push
---

--- {layout="cover" art="field" eyebrow="Neko · Video mode"}

# Write *Markdown.* Get *video.*

One file. Scenes split by a rule.

--- {layout="number" ground="deep" transition="zoom"}

::: counter {value="900" label="Frames in this film"}
:::

How it works

The flow has three stages, and only the last one needs a browser.

1. Build — Neko splits the file into scenes, renders each one's Markdown, and runs its timeline compiler (C#) over the result: every element that moves gets a motion and a start time on the scene's clock, headlines are split into words, and each scene is sized and laid end to end with the transitions between them. All of that is written into the page as plain numbers.
2. Preview — the page is a self-contained player: the canvas scaled to the window, a play button and a scrubber marked at every scene. A small runtime (video.js, no animation library) turns a time into a frame. It is a pure function of time — no timers, no CSS animations — so the same moment always paints the same frame.
3. Render — neko render opens the page in headless Chromium (Playwright) at the video's own size, seeks it to each frame's time, takes a screenshot, and hands the frames to ffmpeg, which encodes the MP4 and mixes the soundtrack.

Try it

neko watch                                  # preview at /videos/samples/neko-video
neko render videos/samples/neko-video.md    # writes videos/samples/neko-video.mp4

Both sample videos are Markdown files in this repository:

The curiosity sample A tour of every component

What a video page is

• It is a player, not an article. No navbar, sidebar or footer — the canvas, a control bar, and a back link to the page you came from.
• It never joins the sidebar or the search index. Reach it from a page that embeds its render with [!video].
• It is self-contained. Fonts, icons, highlight.js and the runtime are inlined, and local images become data URIs, so the page renders the same offline, in CI, and inside neko render.
• It is deterministic. Times are computed at build time and the runtime never reads the clock while rendering, so frames can be captured by several browser pages in parallel.

Reading order

Keyboard

A URL fragment #t=12.5 opens the preview at that moment.