z-wanghong-handwritten-video

Wang Hong Academic Handwritten HTML Animated Video

Directly render the original HTML DOM, adding frame-driven writing, step-by-step appearance, highlighter reveal, SVG path drawing, and paper transitions on top of the original page elements. Text nodes and layout are still provided by the original HTML; before taking screenshots, the renderer loads the same font file used by the original PPT Skill preview cover and verifies the glyphs actually matched by Chrome. Do not re-layout the text.

Hard Boundaries

• The input must be HTML generated by z-wanghong-handwritten-ppt and that has passed inspection.
• All text is fixed to use the glyphs from the original PPT Skill assets/preview-cover.png , with no candidate fonts used.
• The renderer must read the specified font file and verify the title and body text through Chrome's actual font records; if verification fails, stop immediately.
• Font size, font weight, color, layout, charts, and annotations are determined by the original HTML.
• The output is fixed at 1920×1080, 30fps, H.264,yuv420p。
• The final video has exactly one video stream and zero audio streams; do not add narration, music, sound effects, or silent placeholder audio tracks.
• Output both the MP4 and the cover.png。

Workflow

1. First obtain the original handwritten HTML

When the user provides an article, script, or technical topic, first strictly use the same repository's z-wanghong-handwritten-ppt to generate the HTML. Do not redesign the page within this Skill.

When the user has already provided the HTML from that Skill, proceed directly to inspection. Keep the directory containing the HTML and the relative resource paths to avoid losing CSS, images, or scripts by copying a single file.

2. Inspect the HTML with the original Skill

python3 ../z-wanghong-handwritten-ppt/scripts/check_deck.py \
  "/absolute/path/to/deck/index.html"

If inspection fails, first fix the original HTML. Animation rendering must not bypass missing base.css、runtime.js or neat-annotations.css。

3. Install the rendering dependencies once

Run in this Skill directory:

npm install

The renderer uses the local Google Chrome or Chromium to open the original HTML. On macOS, first download “翩翩体-简” used by the preview cover in Font Book. The renderer checks the system font directory; if the font file is elsewhere, use --font-file "/absolute/path/to/Hanzipen.ttc". You can specify the browser via --chrome "/absolute/path/to/chrome" .

4. Render a silent MP4

scripts/render_html_video.sh \
  "/absolute/path/to/deck/index.html" \
  "/absolute/path/to/output/wanghong-handwritten-video.mp4" \
  --seconds-per-slide 4 \
  --font-file "/absolute/path/to/Hanzipen.ttc"

A quick sample can limit the number of pages:

scripts/render_html_video.sh \
  "/absolute/path/to/deck/index.html" \
  "/absolute/path/to/output/preview.mp4" \
  --seconds-per-slide 4 \
  --max-slides 6

The renderer processes each page in the following order:

1. The original title and title line are written in;
2. The original page's top-level content groups appear in sequence;
3. The original highlighter marks are revealed horizontally;
4. The original SVG lines are drawn along their paths;
5. The ending uses a warm white paper transition.

These actions only modify opacity, displacement, cropping, and SVG stroke progress. The original DOM content and computed layout remain as-is, and glyphs are locked to the specified font of the preview cover.

5. Acceptance

The wrapper script automatically checks encoding, resolution, frame rate, pixel format, video stream, and audio stream, and performs a full decode test. Manual review is still required for:

• cover.png Whether assets/preview-cover.png use the same glyphs;
• One frame each at the start of each page, when the content is fully displayed, and before the transition;
• Whether titles, charts, annotations, and footnotes are obscured or cropped;
• Whether the conclusion stays fully on screen for at least 0.8 seconds;
• Whether the MP4 has no visible or hidden audio stream.

When frame-by-frame verification is needed, use the original PPT Skill's scripts/render.sh first export the same page as a static PNG, then compare it with the corresponding MP4 frame to complete the frame comparison. If differences in glyphs or layout appear, stop delivery and check the specified font files, original CSS, and HTML paths.

Motion discipline

• Advance only one point per page; motion serves the reading order.
• Keep the main body of the page stable; avoid camera zooms, card bounces, particles, and launch-event-style showmanship.
• When the original HTML already has CSS animations, the renderer fixes them to their final visual state, then uses a unified frame progress to control the entrance order.
• Do not rewrite the text or facts of the original HTML, and do not add new conclusions outside the page.

Included resources

• scripts/render_html_video.mjs: directly drive the original HTML DOM and encode frame by frame.
• scripts/render_html_video.sh: the original Skill's entry point for checks, rendering, and media acceptance.
• references/motion-injection.md: DOM selection and motion rules.
• examples/handwritten-html-motion-demo/: a silent sample clip generated directly from the original HTML.
• tests/test_renderer_contract.py: prevent re-layout and audio regressions.