html-explainer-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML Explainer Video

HTML 讲解视频

HTML scenes · Fil's video editor over MCP · Playwright · ffmpeg. A scene engine without a framework is in

scripts/explainer.js

An explainer is a voice with pictures cut to it. This skill writes the voice, then draws every picture in HTML from one number: the film's seconds. Each thing on screen lands on the word that names it, because its time is that word's time (

T.clock

is when the voice says "clock"). It looks like motion design and it's a web page, so its look, its shape and its camera are settings, not rebuilds.

Boundary. Use

html-demo

for a live app window on a web page (no video file). Use

html-reel

to turn an existing post, video or page into a 9:16 reel in that source's look. Use

website-to-motion-design

for a short piece with no voice. Use this skill when the deliverable is a finished explainer film, about one minute, that explains something.

Provenance. Extracted from seven one-minute onboarding films for Fil, 31 October to 1 November 2026. Each had a hook, a benefit, a quick tutorial with numbered headings and an ask, with scenes rendered at 2× and 60 fps and assembled in Fil's video editor. Those were locked to one dark look, one shape (4:3) and a camera slot, and built on Fil's own demo components. Here all three are inputs and nothing depends on Fil's components. The film in

demo/

is this skill's own explainer, made with it: one script, in four looks and four shapes, with the camera off or on, and no change to a scene. The rules below are what those films cost to learn.

HTML 场景 · 通过 MCP 操作 Fil 视频编辑器 · Playwright · ffmpeg。 无框架的场景引擎位于

scripts/explainer.js

。

讲解视频就是配音与画面精确卡点后的组合。这个 skill 会编写语音脚本，然后根据一个数值——影片的秒数——用 HTML 绘制每一幅画面。屏幕上的每个元素都会落在说出其名称的那个词上，因为它的出现时间就是该词的时间（

T.clock

是旁白说出“clock”的时刻）。它看起来像动效设计，同时也是一个网页，因此视觉风格、画面比例和镜头都只是设置，无需重新构建。

边界。 如果交付物是网页上的实时应用窗口（不生成视频文件），使用

html-demo

。如果要把现有帖子、视频或网页转换成保留原有风格的 9:16 短视频，使用

html-reel

。如果需要一段无人声配音的短片，使用

website-to-motion-design

。当交付物是一部约一分钟、用于解释某个主题的成品讲解影片时，使用这个 skill。

来源。 提取自 2026 年 10 月 31 日至 11 月 1 日为 Fil 制作的七部一分钟新手引导影片。每部影片都有开场钩子、核心收益、带编号标题的快速教程和行动号召；场景以 2×、60 fps 渲染，并在 Fil 视频编辑器中完成剪辑。那些影片固定为一种暗色视觉风格、一种画面比例（4:3）和一个摄像头位，并基于 Fil 自带的演示组件构建。如今，视觉风格、画面比例和镜头都变成了输入项，且不依赖 Fil 的任何组件。

demo/

中的影片就是使用这个 skill 制作的讲解片：同一份脚本、四种视觉风格和四种画面比例，可开启或关闭镜头，而且无需修改任何场景。以下规则是制作那些影片时总结出的经验。

The mechanism

运行机制

Every frame is a pure function of one number, and every time is a word. A scene sets everything from

, the film's seconds.

HTMLExplainer.times(WORDS)

names each word of the voice (

T.clock

T.clockEnd

, a word said again

T.look2

). A renderer calls

window.__frame(t)

once a frame and screenshots; nothing reads a clock.

// film.js: a scene. No colour, no font, no pixel of layout from the shape.
const T = times(window.WORDS);
const step3 = {
  id: 'step3', from: T.three - 0.12, tone: 3,
  draw(t, $, f) {
    show($('.x-head'), t, T.three);            // when; the look says how
    show($('#code'), t, T.clock);              // lands on the word "clock"
    ring($('#last'), t, T.word);               // a thin line, on "word"
    $('#code').textContent = `T.clock = ${T.clock.toFixed(2)}`;
  },
};
film({ words: window.WORDS, end: T.end + 2.4, scenes: [hook, step3, end] });

Take that away and all of it breaks. A scene on CSS timelines or timers plays at its own pace, so a new voice means animating it again, and the cuts drift a few frames every time. A frame drawn from

is the same picture every run, so a re-render changes only what you changed.

每一帧都是单个数值的纯函数，每个时间点都对应一个词。 场景根据

（影片的秒数）设置全部内容。

HTMLExplainer.times(WORDS)

为旁白中的每个词命名（

T.clock

、

T.clockEnd

，或某个词再次出现时的

T.look2

）。渲染器每帧调用一次

window.__frame(t)

并截图；没有任何逻辑读取系统时钟。

// film.js: a scene. No colour, no font, no pixel of layout from the shape.
const T = times(window.WORDS);
const step3 = {
  id: 'step3', from: T.three - 0.12, tone: 3,
  draw(t, $, f) {
    show($('.x-head'), t, T.three);            // when; the look says how
    show($('#code'), t, T.clock);              // lands on the word "clock"
    ring($('#last'), t, T.word);               // a thin line, on "word"
    $('#code').textContent = `T.clock = ${T.clock.toFixed(2)}`;
  },
};
film({ words: window.WORDS, end: T.end + 2.4, scenes: [hook, step3, end] });

一旦移除这一机制，整个系统就会失效。如果场景依赖 CSS timeline 或 timer，它就会按照自己的节奏播放，因此每次更换语音都需要重新制作动画，切点也会逐帧漂移。根据

绘制的帧在每次运行中都会得到相同画面，因此重新渲染只会改变你主动修改的部分。

The three inputs

三项输入

None of these touches a scene. Read them from the person, or use the defaults.

input	how it's set	default	what it changes
Look	`<html data-look="…">` or `?look=` , one block of `--x-` variables ( `references/looks.md` )	read from their site, else ask for a style	type, colour, corners, edges, where the headline sits, window chrome, picture treatment, captions, and how things move
Shape	`shape:` or `?shape=` : `4:3` , `16:9` , `1:1` , `9:16`	where it'll be seen; `4:3` if nobody says	the stage (short side always 1080) and every region: `--pic-x` , `--head-y` …
Camera	`camera:` or `?camera=on`	off	off: no slots, no kept corner, scenes fill the frame. On: `references/camera.md`

show(el, t, at, leave)

is why a look can move differently without a change to a scene: the scene says when, and

--x-motion

(

rise

fade

snap

wipe

) says how. A look's block of variables can sit on any element too, which is how the film shows three looks side by side.

这些设置都不会改动场景代码。从用户处获取对应信息，或者使用默认值。

输入	设置方式	默认值	改变内容
视觉风格	`<html data-look="…">` 或 `?look=` ，以及一组 `--x-` 变量（ `references/looks.md` ）	从用户网站读取，否则询问所需风格	字体、颜色、圆角、边缘、标题位置、窗口框架、图片处理、字幕以及元素的运动方式
画面比例	`shape:` 或 `?shape=` ： `4:3` 、 `16:9` 、 `1:1` 、 `9:16`	根据观看场景确定；用户未说明时使用 `4:3`	舞台（短边始终为 1080）及所有区域： `--pic-x` 、 `--head-y` ……
镜头	`camera:` 或 `?camera=on`	关闭	关闭时：不设置录制槽位、不保留角落区域，场景铺满画面。开启时：参见 `references/camera.md`

show(el, t, at, leave)

让同一场景在不同视觉风格中呈现不同运动方式，而无须修改场景代码：场景决定何时出现，

--x-motion

（

rise

、

fade

、

snap

、

wipe

）决定如何出现。一个视觉风格对应的变量块也可以应用于任意元素，因此影片可以并排展示三种视觉风格。

Workflow

工作流程

Ask at most one question before starting, and only if the thing to explain is missing. Say the defaults you took.

Write Explainer.md: what it is, the one idea someone should leave believing, who it's for, every fact the film may state with where it comes from, and the ask. Read the product's own site, docs or source for those facts. A film can only say what's on this list.
Set the look (
```
references/looks.md
```
):
```
scripts/read-look.mjs <their site> --name brand
```
measures it into
```
brand.css
```
and
```
brand.md
```
; or they name a style and you write the block. Compare it with their page by eye. Collect their real logo and real pictures now, sized for where they'll be drawn.
Write the script (
```
references/format.md
```
): hook, benefit, quick tutorial, try it. About 2.6 words a second, so 140 to 155 words a minute. Write for the ear. Under each line, say what the picture does and the word it lands on.
Build on a free clock.
```
scripts/words.py --draft script.txt --out words
```
times the script from its letters and punctuation, for nothing. Scenes on it are timed by name, so the real voice replaces it without changing a scene.
Build the scenes on
```
scripts/explainer.js
```
and
```
explainer.css
```
, one
```
<section class="x-scene">
```
each, about 4 to 8 s long. The first frame is the cover. Only variables and regions, no fixed colour or size that belongs to one look or one shape. Look at stills as you go:
```
scripts/render.mjs film.html --stills 0,3,8,16 --out stills
```
. At least three rounds, in at least two looks: a scene that only works in one look isn't finished.
Check.
```
scripts/check-film.mjs film.html
```
in every look, shape and camera setting you'll render: enlarged pictures, soft 3D, two headlines at once, words at the edge or under the camera, a frame that differs between runs.
Show the price, then make the voice. In Fil, an audio node on
```
eleven-v4
```
with
```
max_credits: 0
```
gives the price. Get the person's OK, then run it. Captions with
```
look: { max_words: 1 }
```
give word times (about ⚡1 a minute);
```
get_video
```
with
```
captions: "list"
```
, saved, goes through
```
scripts/words.py --voice voice.mp3
```
. Read the words against the script before going on: names and numbers above all.
Place the sound.
```
window.SFX
```
lists the cues, and
```
scripts/sfx.mjs film.html
```
gives each its take, sync point and level (
```
references/sound.md
```
).
Preview it.
```
scripts/preview.mjs film.html --voice voice.mp3 --music bed.mp3 --sfx sfx.json --out preview.mp4
```
: the whole film at 1×, 30 fps, with captions and sound at −14 LUFS, and a contact sheet. Judge it here: a change costs a minute.
Render.
```
scripts/render.mjs film.html --scene all --fps 60 --scale 2 --out final
```
writes one MP4 per scene. Run it niced and in the background; it takes minutes per scene.
Assemble in Fil over MCP (
```
references/fil-editor.md
```
): scenes in order, voice, captions in the look, music, sound effects, chapters.
Export and verify the file, not the timeline. Then score it with blind judges and fix what they both name (
```
references/checks.md
```
).

With a camera, steps 7 and 11 change and the person records last:

references/camera.md

开始前最多提出一个问题，并且仅在待讲解的内容缺失时提出。说明你所采用的默认值。

编写 Explainer.md：说明要讲解的内容、观众看完后应当相信的唯一观点、目标受众、影片可能提及的每一项事实及其来源，以及行动号召。阅读产品自己的网站、文档或源代码，以核实这些事实。影片只能陈述清单中的内容。
设置视觉风格（
```
references/looks.md
```
）：运行
```
scripts/read-look.mjs <their site> --name brand
```
，将网站风格测量为
```
brand.css
```
和
```
brand.md
```
；也可以由用户指定风格，再由你编写变量块。将结果与用户页面进行目视比较。现在就收集其真实 logo 和真实图片，并按照最终绘制位置调整尺寸。
编写脚本（
```
references/format.md
```
）：开场钩子、核心收益、快速教程、立即体验。每秒约 2.6 个词，即每分钟 140 至 155 个词。按听觉节奏来写。在每行下方说明画面执行什么动作，以及画面落在哪个词上。
基于免费时钟构建。 运行
```
scripts/words.py --draft script.txt --out words
```
，仅根据字母和标点推算脚本时间，不生成语音。场景按名称绑定到这些时间点，因此真实语音可以替换草稿时钟，而无须修改场景。
基于
scripts/explainer.js
和
explainer.css
构建场景，每个场景使用一个
```
<section class="x-scene">
```
，时长约 4 至 8 秒。第一帧就是封面。只使用变量和区域，不要硬编码只属于某一种视觉风格或画面比例的固定颜色或尺寸。制作过程中查看静帧：运行
```
scripts/render.mjs film.html --stills 0,3,8,16 --out stills
```
。至少迭代三轮，并覆盖至少两种视觉风格：如果某个场景只在一种风格下成立，就尚未完成。
检查。 对所有将要渲染的视觉风格、画面比例和镜头设置运行
```
scripts/check-film.mjs film.html
```
：检查放大的图片、模糊的 3D、同时出现两个标题、位于边缘或镜头区域下方的词语，以及两次运行结果不同的帧。
先显示价格，再制作语音。 在 Fil 中，基于
```
eleven-v4
```
的音频节点设置
```
max_credits: 0
```
即可得到价格。获得用户确认后再运行。使用
```
look: { max_words: 1 }
```
生成字幕可获得词级时间（约 ⚡1/分钟）；先使用
```
get_video
```
和
```
captions: "list"
```
获取并保存字幕，再通过
```
scripts/words.py --voice voice.mp3
```
处理。继续之前，将识别出的词与脚本逐字核对，尤其是名称和数字。
放置声音。
```
window.SFX
```
列出可用音效；
```
scripts/sfx.mjs film.html
```
会为每个音效给出片段、同步点和电平（
```
references/sound.md
```
）。
预览。 运行
```
scripts/preview.mjs film.html --voice voice.mp3 --music bed.mp3 --sfx sfx.json --out preview.mp4
```
：以 1×、30 fps 预览整部影片，包含字幕和响度为 −14 LUFS 的声音，并输出一张全片缩略图总览。在这里判断效果，因为一次修改只需约一分钟即可完成。
渲染。 运行
```
scripts/render.mjs film.html --scene all --fps 60 --scale 2 --out final
```
，每个场景写出一个 MP4。使用 nice 机制在后台运行；每个场景需要数分钟。
通过 MCP 在 Fil 中组装影片（
```
references/fil-editor.md
```
）：按顺序排列场景，并加入语音、字幕、音乐、音效和章节。
导出并检查最终文件，而不是时间线。 然后交给盲审评分，并修复两位盲审都指出的问题（
```
references/checks.md
```
）。

启用镜头后，步骤 7 和 11 会发生变化，用户需要最后补录：参见

references/camera.md

。

Rules, each with the failure it prevents

规则，以及每条规则所防止的问题

Every claim comes from Explainer.md. Helpers on the source films found "one button" (three presses), "one click" (two), "your own address" (the free plan's is random), "pull the frame wider" (shape chips): each sounded fine and each was false. Check every claim on screen and in the voice against the product, and report what it contradicts rather than papering over it.
The first frame is the cover. Grids, feeds and Fil's edit node all show a film's first frame. At
```
t = 0
```
the hook's headline and its best picture are already drawn, with no entrance. A hook that opens on an empty frame opens on nothing.
The hook is something no screen recording could show. Result first, then how. In the source films it's a set piece that fills the frame; here it's the frame itself taken apart into its layers.
Something changes on nearly every phrase, on its word. That's what "engaging" came to mean. Calm camera: eased moves, never chasing. Hold on a result long enough to read it.
Times come from words, always by name. Draft 1 of any film timed by reading speed lands every beat early or late.
```
T.clock
```
, never
```
35.63
```
.
A scene names no colour and no font. Fixed values belong in a look. If you need a value only one look wants, add a variable. Otherwise the second look shows you everything you hard-coded.
Two looks must differ in composition, not only colour. Blind judges called the first pass of this film's looks reskins: same layouts, other fonts. Move the headline (
```
--x-head-at
```
), redraw the windows, treat the pictures differently. Then they scored them apart.
Never a wireframe. Grey bars standing in for "your site" read as an unfinished film, and they did to both judges. Show a real page from the first frame, and ring what's being named.
Keep the end moving, and make the address big. A name held for 7 seconds with a faint address under it is dead air at the one moment that matters. Land things on the words after the name.
Scenes lay out from regions, not coordinates.
```
--pic-x
```
,
```
--pic-w
```
and container units, so 9:16 and the camera's corner just work. A position measured in one shape is wrong in the other three.
Nothing scaled above 1 under 3D. Chromium rasterises anything under
```
perspective
```
,
```
preserve-3d
```
or a 3D matrix at its layout size and stretches the bitmap, so
```
scale(1.7)
```
on a card goes soft however large the file and whatever the device scale. Lay it out at the size it's drawn and push it back in Z. The hooks are where this shows first.
Pictures are never enlarged past their real pixels. At a 2× render a picture reads 2.0 at most. Show it smaller, or use a bigger real file. Never CSS sharpening, an upscale, or a blur over a picture.
Highlights fit what they mark.
```
ring()
```
: a 1.5 px line by
```
outline
```
and
```
outline-offset
```
, with 4 to 6 px of even clear space. Never a band, and text never touches the line. A fill behind a word hugs it, with about 0.14 em at the sides. It must never be clipped by a window.
Real logos and real pictures only. Copy them from the person's own files. Never draw or approximate a company's mark, and never use lorem or stand-ins. Where there's no picture, draw the thing in HTML: a window, a chart, type.
Real words in any UI you draw. Copy every label, menu item and number from the product. One invented word ("Processing…") and someone who uses it stops believing the rest. Anything you had to write for the film, say so in your report.
Pointers land on real targets.
```
pointer()
```
aims at selectors, measured as drawn. Arrive 0.3 to 0.6 s before a click, press 0.15 s. A hard-coded point misses in the next look.
Headlines never overlap. A headline's leave plus 0.22 s is at or before the next one's start.
About one sound a second. On presses, arrivals you can see and the hook's beats, at measured sync points, never more than two in 150 ms, with quiet stretches under the voice. Fewer and better.
A caption edit must keep its word count. A longer
```
text
```
eats the next caption's id and merges them. Read
```
get_video
```
with
```
captions: "list"
```
first; if it merges, set the whole text and
```
split_after
```
.
Never remove a caption under big type. Hide it with a caption range at offset 400. Removing deletes words the teleprompter reads, and renumbers the rest.
No generated person, ever, unless asked. The stand-in for a camera is a drawn silhouette. A film that needs a face has a camera slot, and the person records.
Spend nothing without the price and an OK.
```
max_credits: 0
```
first, every time. A voice is about ⚡7 a minute. Everything else in this skill is free, including all of the rendering and the whole edit.
Post nothing. The film is finished when it's exported and checked. Publishing it is the person's step.

所有主张都必须来自 Explainer.md。 源影片中的辅助 Agent 曾发现“一个按钮”（实际需要按三次）、“一键”（需要按两次）、“您自己的地址”（免费方案的地址是随机的）、“把画面拉得更宽”（实际是比例选项）等表述。这些话听起来都没问题，却全都不符合事实。将屏幕和语音中的每项主张与产品核对，并报告相矛盾之处，而不是掩盖问题。
第一帧就是封面。 网格、信息流和 Fil 的编辑节点都会显示影片的第一帧。在
```
t = 0
```
时，钩子的标题和最佳图片必须已经绘制完成，不能带入场动画。钩子若以空白画面开场，就等于什么都没呈现。
钩子应当呈现任何屏幕录制都无法展示的内容。 先展示结果，再说明方法。在源影片中，这是一套铺满画面的场景；在本 skill 中，则把画面本身拆分成多个图层。
几乎每个短语都要有变化，并且在其对应词出现时发生变化。 这就是“引人入胜”最终应有的含义。镜头要克制：使用缓动运动，绝不追着画面跑。结果画面要保持足够久，让人能够读完。
时间点始终按词名获取。 仅按阅读速度估算时间的初稿会让每个节拍提前或延后。始终使用
```
T.clock
```
，绝不要使用
```
35.63
```
。
场景不得指定颜色或字体。 固定值应属于视觉风格。如果需要某个仅有一种风格使用的值，应添加变量。否则第二种风格会直接暴露所有硬编码内容。
两种视觉风格必须在构图上有所不同，而不只是颜色不同。 盲审曾把本片第一版的不同风格称为“换皮”：布局相同，只换了字体。移动标题位置（
```
--x-head-at
```
）、重绘窗口，并改变图片的处理方式。随后，他们才认为这些风格有明显区别。
绝不能使用线框图。 用灰条代替“你的网站”会让人看出影片尚未完成，盲审也有同样感受。从第一帧开始展示真实页面，并圈出正在讲解的对象。
结尾也要持续运动，并把地址放大。 一个名称停留 7 秒、下方只有一行很淡的地址，会在最关键的时刻形成冷场。名称之后的词要安排画面元素的落点。
场景根据区域而非坐标进行布局。 使用
```
--pic-x
```
、
```
--pic-w
```
和容器单位，使 9:16 和镜头角落自然适配。在一种比例中测量得到的位置，用在其他三种比例中必然错误。
在 3D 环境中，任何超过 1 的缩放都不允许。 Chromium 会以布局尺寸栅格化位于
```
perspective
```
、
```
preserve-3d
```
或 3D matrix 下的任何内容，并拉伸位图，因此无论文件多大、设备缩放比多高，卡片上的
```
scale(1.7)
```
都会变软。应按最终绘制尺寸布局，再沿 Z 轴将其向后推。钩子场景最容易暴露这个问题。
图片绝不能放大到超过其真实像素数。 在 2× 渲染中，图片的显示倍率最多只能为 2.0。要么缩小显示，要么使用更大的真实文件。绝不要使用 CSS 锐化、放大，或在图片上叠加模糊。
高亮效果必须与其标记对象相适配。
```
ring()
```
：使用
```
outline
```
和
```
outline-offset
```
绘制 1.5 px 的线条，并留出 4 至 6 px 的均匀空白。绝不能使用色带，文字也绝不能贴住线条。词语背后的填充应紧贴文字，两侧约留 0.14 em，并且绝不能被窗口裁切。
只使用真实 logo 和真实图片。 从用户自己的文件中复制。绝不能绘制或近似模仿企业标识，也绝不能使用 lorem 或占位素材。如果没有图片，就用 HTML 绘制对象，例如窗口、图表或文字。
绘制的任何 UI 都必须使用真实词语。 复制产品中的每个标签、菜单项和数字。只要出现一个虚构词语（“Processing…”），熟悉产品的人就会不再相信其余内容。凡是为了影片而自行编写的内容，都必须在报告中说明。
指针必须落在真实目标上。
```
pointer()
```
瞄准选择器，并按实际绘制尺寸进行测量。指针应在点击前 0.3 至 0.6 秒到达目标，按下持续 0.15 秒。硬编码坐标在另一种视觉风格中就会偏离目标。
标题绝不能重叠。 当前标题的退场时间加上 0.22 秒，必须早于或等于下一标题的开始时间。
平均每秒约一个声音。 用于按键、可见元素的出现以及钩子的节拍，并采用经过测量的同步点；150 ms 内绝不能出现两个以上声音，同时在人声下方保留安静段。少而精优于多。
字幕编辑必须保持词数不变。 更长的
```
text
```
会占用下一条字幕的 ID 并导致合并。先使用
```
captions: "list"
```
读取
```
get_video
```
；如果发生合并，则设置完整文本和
```
split_after
```
。
大字号文字下方绝不能删除字幕。 使用偏移量 400 的字幕范围将其隐藏。直接删除会一并删除提词器读取的词语，并重新编号其余字幕。
绝不生成人物，除非用户明确要求。 镜头画面的替代物是绘制的剪影。需要人脸时，影片应提供摄像头录制槽位，由用户亲自录制。
未显示价格并获得确认前，绝不产生任何费用。 每次都先使用
```
max_credits: 0
```
。语音约为 ⚡7/分钟。此 skill 中的其他所有环节均免费，包括全部渲染和完整剪辑。
不要代为发布。 影片导出并检查完毕即告完成。发布由用户自行执行。

Numbers from the source films and this one

源影片和本片的量化参数

what	value
length	57 to 60 s, about 2.6 words a second, 146 to 155 words
stage	short side 1080: 1440 × 1080, 1920 × 1080, 1080 × 1080, 1080 × 1920; rendered at 2×
frames	60 fps for the edit; 30 fps at 1× for a draft
parts	hook 3 to 6 s; benefit 12 to 20 s; quick tutorial 22 to 30 s; try it 6 to 14 s
scenes	10 to 12, about 4 to 8 s each
end	the last word's end plus about 2.4 s
headlines	62 px on 4:3, 76 px on 16:9, 78 px on 9:16; two-tone: a lead-in and a statement
sounds	about 1 a second; 64 in this film's 59 s, 18 of them keys under typing
voice	⚡7 for 146 words on ElevenLabs v4, in a stock voice
captions	⚡1 for one minute
corner camera	374 × 210, 40 px from the right and the bottom (4:3, 16:9)
loudness	−14 LUFS

项目	数值
时长	57 至 60 秒，约每秒 2.6 个词，共 146 至 155 个词
舞台	短边 1080：1440 × 1080、1920 × 1080、1080 × 1080、1080 × 1920；以 2× 渲染
帧率	成片剪辑使用 60 fps；1× 草稿使用 30 fps
部分	钩子 3 至 6 秒；收益 12 至 20 秒；快速教程 22 至 30 秒；立即体验 6 至 14 秒
场景	10 至 12 个，每个约 4 至 8 秒
结尾	最后一个词的结束时间加约 2.4 秒
标题	4:3 为 62 px，16:9 为 76 px，9:16 为 78 px；双色：引导语加结论陈述
声音	约每秒一个；本片 59 秒内共 64 个，其中 18 个是打字时的按键声
语音	使用 ElevenLabs v4 的现成语音生成 146 个词，费用约 ⚡7
字幕	一分钟约 ⚡1
角落镜头	374 × 210；4:3、16:9 距右侧和底部各 40 px
响度	−14 LUFS

Verify

验证

The first frame is the cover: headline and best picture, already drawn.
```
check-film.mjs
```
is all clear in every look, shape and camera setting rendered.
Every claim on screen and in the voice is on Explainer.md's list, and checked against the product.
Scenes were looked at as stills in at least two looks, and it holds up in both.
The voice's words match the script, names and numbers above all.
Moves land on their words in the export (scrub a few at 0.25×).
Full-size crops of every highlight, and of the hook: nothing soft, nothing clipped.
Frames every 0.5 s from the export: no text cut off, no caption under big type.
Integrated loudness −14 LUFS ± 1, true peak under −1 dBTP.
Chapters name the parts.

第一帧就是封面：标题和最佳图片已经绘制完成。
在所有将要渲染的视觉风格、画面比例和镜头设置下，
```
check-film.mjs
```
均未发现问题。
屏幕和语音中的每项主张都列在 Explainer.md 中，并已与产品核对。
场景已在至少两种视觉风格下以静帧方式检查，并在两种风格中都表现良好。
语音中的词与脚本一致，尤其是名称和数字。
导出文件中的动作落在对应词上（以 0.25× 速度拖拽检查若干处）。
每个高亮和钩子的全尺寸裁切图均正常：没有模糊，没有裁切。
每隔 0.5 秒检查导出帧：没有文字被截断，大字号下方没有字幕。
整体响度为 −14 LUFS ± 1，真实峰值低于 −1 dBTP。
章节名称准确标出各个部分。

Files

文件

```
scripts/explainer.js
```
,
```
scripts/explainer.css
```
: the engine and its parts:
```
film()
```
,
```
times()
```
, regions by shape and camera,
```
show()
```
,
```
ring()
```
,
```
view()
```
,
```
pointer()
```
, captions and a stand-in for previews, the controls.
```
scripts/render.mjs
```
: scenes to MP4, the whole film, or stills and a sheet, in any look, shape and camera setting.
```
scripts/check-film.mjs
```
: enlarged pictures, soft 3D, two headlines, edges, the camera's corner, repeatable frames.
```
scripts/read-look.mjs
```
: a site's look, measured, as a block of variables and a note of what's left for you.
```
scripts/words.py
```
: the clock: from Fil's captions list, or a free draft from the script.
```
scripts/sfx.mjs
```
: the cues as placed, levelled takes, and the commands to add them in Fil.
```
scripts/preview.mjs
```
: the whole film with captions, voice, music and sound, locally.
```
references/format.md
```
: the four parts, the script, the scene patterns, and explaining an idea rather than a product.
```
references/looks.md
```
: every variable, how to read or name a look, and worked looks.
```
references/camera.md
```
: turning the camera on: slots, layouts by keyframes, titles, the teleprompter, the take.
```
references/fil-editor.md
```
: every command to assemble it in Fil's video editor over MCP.
```
references/sound.md
```
: the takes, their sync points and levels, music, and listening.
```
references/checks.md
```
: what to look at, what the checker can't see, and the blind judges.
```
sounds/
```
: 24 sound effects from earshot's launch kit, with their measured sync points (MIT licence).
```
demo/
```
: this skill's own film, live: its scenes, its four looks, its words and voice, with switches for look, shape and camera.

Without Fil. The edit is Fil's, but the film doesn't have to be:

scripts/preview.mjs

makes a finished MP4 on your own machine from any voice file and its word times (

words.py --json

```
scripts/explainer.js
```
、
```
scripts/explainer.css
```
：引擎及其组成部分：
```
film()
```
、
```
times()
```
、按画面比例和镜头划分区域、
```
show()
```
、
```
ring()
```
、
```
view()
```
、
```
pointer()
```
、字幕、预览占位画面以及控制项。
```
scripts/render.mjs
```
：将场景渲染为 MP4，可输出整部影片、剧照和拼版图，并支持任意视觉风格、画面比例和镜头设置。
```
scripts/check-film.mjs
```
：检查放大的图片、模糊的 3D、两个标题、边缘元素、镜头角落以及不可重复的帧。
```
scripts/read-look.mjs
```
：测量网站风格并生成变量块，同时说明仍需补充的内容。
```
scripts/words.py
```
：时钟工具；可读取 Fil 的字幕列表，也可仅根据脚本生成免费草稿。
```
scripts/sfx.mjs
```
：提供音效位置、经过电平处理的片段，以及在 Fil 中添加音效的命令。
```
scripts/preview.mjs
```
：在本地生成包含字幕、语音、音乐和声音的完整影片。
```
references/format.md
```
：四个组成部分、脚本、场景模式，以及如何讲解创意而非产品。
```
references/looks.md
```
：所有变量、如何读取或命名视觉风格，以及完整示例。
```
references/camera.md
```
：如何启用镜头：录制槽位、基于关键帧的布局、标题、提词器和录制流程。
```
references/fil-editor.md
```
：通过 MCP 在 Fil 视频编辑器中组装影片所需的全部命令。
```
references/sound.md
```
：音效片段、同步点和电平，以及音乐和收听要求。
```
references/checks.md
```
：需要检查的内容、检查器无法发现的问题，以及盲审流程。
```
sounds/
```
：来自 earshot 发布工具包的 24 个音效，附带经过测量的同步点（MIT licence）。
```
demo/
```
：这个 skill 自己的讲解影片，可实时运行；包含场景、四种视觉风格、词级时间、语音，以及视觉风格、画面比例和镜头的切换开关。

不使用 Fil 时。 剪辑在 Fil 中完成，但影片本身并非必须如此：

scripts/preview.mjs

可以根据任意语音文件及其词级时间（

words.py --json

），在本地机器上生成成品 MP4。