企业官网建设流程全解析

jevgrep 仓库的 video/README.md 描述了一套自成体系的视频资产目录：两支短片分别用于项目启动（launch reel）与 v0.4 版本发布（release film），各自是拥有独立依赖的 Remotion 工程，且不导入仓库内任何代码。本文以该文档为骨架，结合 video/launch/ 与 video/v0.4/ 两个子工程的源码，完整讲解其工程结构、共享时间轴机制、代码合成配乐、渲染审查流程与数据声明规范，读者可据此理解并复刻"用代码驱动音画同步视频"的完整生产方案。

一、视频资产总览：两个独立 Remotion 工程

video/README.md 用一句话点出了整个目录的设计原则：

Each video is a standalone Remotion package with its own dependencies; none imports repo code.

这带来两个工程约束：

• 独立性：每个视频是独立的 npm 工程，拥有自己的package.json、tsconfig.json与依赖，位于 Bun workspace 之外，因此 CLI 永远不会依赖 Remotion；
• 零耦合：视频代码不导入仓库源码，宣传片中的jg命令、指标数字均以"数据文件 + 字符串"的形式手工注入。

目录下有两个子工程，各有独立 README：

两者的共同点是：配乐（soundtrack）完全由代码合成——没有采样、没有库存音乐、没有插件。

二、工程骨架与 npm 脚本

以 video/launch/package.json 为例，脚本构成了一条从预览到成片的完整链路：

{ "scripts": { "studio": "remotion studio src/index.ts", "music": "node --experimental-strip-types scripts/music.mjs", "render": "npm run music && remotion render src/index.ts Reel out/jevgrep-reel.mp4 --crf=16 --audio-bitrate=320k", "poster": "remotion still src/index.ts Poster out/poster.png", "check-types": "tsc -p ." }, "dependencies": { "@remotion/cli": "4.0.529", "@remotion/google-fonts": "4.0.529", "@remotion/noise": "4.0.529", "react": "^19.3.0", "react-dom": "^19.3.0", "remotion": "4.0.529" } }

各脚本职责：

• npm run studio：在浏览器中打开 Remotion Studio，可拖动时间轴逐帧预览；
• npm run music：先运行配乐生成脚本（下文详述），产出public/music.wav；
• npm run render：先重新生成配乐，再渲染Reel合成到out/jevgrep-reel.mp4（1080p60，CRF 16，320k AAC 音频）；
• npm run poster：单独渲染Poster合成，输出out/poster.png作为 README 主视觉；
• npm run check-types：TypeScript 类型检查。

video/v0.4/package.json 则增加了 three.js 技术栈（@react-three/fiber、@react-three/postprocessing、n8ao、three），并多出一个draft脚本：

"draft": "npm run music && remotion render src/index.ts Release out/draft.mp4 --scale=0.5", "render": "npm run music && remotion render src/index.ts Release out/jevgrep-0.4.mp4 --crf=14 --x264-preset=slow --audio-bitrate=320k"

草稿以半分辨率（--scale=0.5）快速迭代，正式成片用更慢的 x264 预设换取质量（CRF 14）。

入口文件 video/launch/src/index.ts 仅做一件事——registerRoot(Root)；video/launch/src/Root.tsx 注册两个 Composition：主片Reel（时长(DURATION + PRE) * FPS帧）与单帧的Poster主视觉，分辨率统一 1920×1080、60fps。

三、共享时间轴：cues.ts 是唯一的"时间真相源"

两支短片最核心的架构决策是：所有时间只存在于一个文件里。

video/launch/src/cues.ts 的文件头注释写得很明确：

Single source of truth for timing. Both the music renderer (scripts/music.mjs) and every scene read from here, so every hit on screen lands on a hit in the mix. All times are in seconds. 120 BPM: beat = 0.5s, bar = 2s.

即场景代码读cues.ts取动画事件，配乐脚本 scripts/music.mjs 也读同一份 cues 来摆放每一个 kick、riser、impact 和 UI 音效。改一处时间，画面与声音同步移动。细节设计：

• 绝对时间而非帧：场景代码使用以秒为单位的绝对时间t，cue 数值保持字面可读，不会散落在帧计数换算中；
• 节奏常量派生：BPM = 120，BEAT = 60 / BPM（0.5s），BAR = BEAT * 4（2s），拍点、小节全部由此派生；
• 幕结构：SCENE定义六幕——problem(0) / reveal(4) / engine(8) / jev(14) / bench(20) / outro(26)，对应 30 秒片长；
• 和声进行：CHORDS每小节一个和弦（Am F Am F C G Am F C G G Am F C Am，第 10 小节保留属和弦撑住 breakdown 直到 22s 的 slam）；
• 打击乐：KICKS从 4s 到 19.75s、22s 到 27s 每拍一脚，CLAPS由 KICKS 过滤出 offbeat 位置；
• 音效 cue 表：SFX数组把每一帧画面事件映射为{ t, type, v?, p?, d? }的音效指令，类型多达 15 种（impact、riser、suck、whoosh、pop、tick、blip、key、stamp、accept、reject、tok、chatter、count、ding、crack）。

video/v0.4/src/cues.ts 沿用同一套模式：40 秒片长、八幕结构（archive/title/bar/scope/clip/cut/payoff/outro）、KICK_REGIONS定义鼓区（4–28s 机制段 + 30–37s drop 段）、ROLLS定义段落切换前的军鼓滚奏，以及每幕的动画与音效事件。

四、配乐是代码生成的：music.mjs 就是一台合成器

video/launch/scripts/music.mjs 是一份约 590 行的纯 Node 脚本（无任何音频依赖），以 48kHz 采样率把整首配乐逐样本合成并写出 WAV。它的工程结构相当于一个小型 DAW：

4.1 总线与效果器

• 四条总线：drums/music/fx三条干声总线，外加revSend/dlySend两条发送总线；
• DSP 原语：Cytomic TPT 状态变量滤波器（SVF，支持逐样本调制 cutoff 且稳定）、带 BLEP 补偿的锯齿波振荡器（消除混叠）、Freeverb 混响（8 梳状 + 4 全通，含 damping）、ping-pong 延迟（间距 0.75 拍）；
• 侧链压缩：duck数组预先算出每次 kick 的包络（0.24s 衰减），所有旋律性乐器随鼓点"呼吸"；
• 滤波能量自动化：energy(t)按段落返回 0–1 的开度（intro 0.12→0.7、主段落 1、breakdown 压低、outro 回落），驱动 pad/bass/pluck 的截止频率。

4.2 乐器与编曲

脚本里每种乐器都是一个函数：kick（指数调频鼓）、clap（滤波噪声 + 3 次延迟反射）、hat（高通噪声，闭/开两种时长）、pad（每和弦 5 个 MIDI 音符 × 5 个 detune 声部）、bass（双锯齿 + 正弦 sub）、pluck（琶音）。编曲规则全部写成循环：

• pad 每小节进入，音量按段落分级（intro 0.55、breakdown 0.75、outro 0.7）；
• bass 在鼓区做 pumping 八分音符，breakdown 与 outro 改为长音；
• 琶音按ARP = [0,2,1,3,2,4,3,1]走十六分音符，高能段落整体升八度；
• 军鼓滚奏铺在 3–4s 与 21–22s 两个 drop 前。

4.3 母带与 WAV 输出

母带阶段按 99.5 百分位归一化，再经软膝限幅（0.7 阈值、tanh 膝）压顶，最后峰值归一化到 0.89。输出分两段：music.wav覆盖正片，pre.wav单独合成开场前的过渡（rising whoosh 落在正片第一个 impact 上）。

4.4 种子随机

随机数使用 LCG（seed 1337）固定种子，因此每次渲染配乐结果可复现。

五、场景实现：从 React 动画到 three.js 世界

5.1 launch：纯 React 场景

launch 的场景目录 src/scenes/ 用 React 组件实现六幕动画：problem 幕用文字逐个砸出 "Coding agents burn tokens just finding the right code."；reveal 幕逐字母拼出 logo、打出jg "where is connection pooling configured?"命令行；engine 幕演示目录修剪、文件打标、声明块定位、行级输出的引擎流程；jev 幕展示 stream 与 handoff；bench 幕做数字滚动对比；outro 幕打出安装命令npm i -g @dzhng/jevgrep。所有动画事件的时机都从 cues.ts 读取，例如 reveal 幕的打字时间由R.typeStart到R.typeEnd均分到命令字符串的每个字符上，对应音效表里逐字符的key声。

5.2 v0.4：一个连续的"书桌世界"

v0.4 的创意是"一张连续的书桌"：代理为读过的每一页付钱，所以jg是整理案卷的 clerk。v0.4 的每项变更在桌上都有自己的日常道具站——relavance 条的晾衣绳、relevance 与 scope 的两枚橡皮章、结构性上下文的剪刀与回形针、测试的牌面朝下的卡片、输出截断的铡刀、成本的收据——摄像机在各站之间穿行。场景基于 react-three-fiber，关键实现细节记录在 video/v0.4/README.md 的 Rendering notes：

• 无头渲染需要 ANGLE：WebGL 在 headless Chrome 中需要 GPU 后端 ANGLE 上下文，video/v0.4/remotion.config.ts 用Config.setChromiumOpenGlRenderer("angle")显式指定，并设并发 4；
• 命令式后期栈：src/three/Post.tsx 以命令式方式构建 AO（n8ao）、景深、bloom、色差、颗粒等后期效果——因为@react-three/postprocessing的 composer 是在 effect 里初始化的，发生在 Remotion 的一次性advance()之后，会把渲染标签页首帧的所有效果丢掉，命令式写法规避了这一点；
• 字体与纹理本地化：纹理绘制在 canvas 上，等待public/fonts中 vendored 字体加载完成后进行，因此任何一帧都不依赖网络。

六、渲染与审查工作流

6.1 标准命令

# launch npm install npm run studio # 浏览器中拖动时间轴 npm run render # 重新生成配乐后渲染 out/jevgrep-reel.mp4（1080p60） # v0.4 npm run studio npm run draft # 半分辨率草稿 out/draft.mp4 npm run render # 正式成片 out/jevgrep-0.4.mp4（CRF 14、x264 slow、320k AAC）

6.2 草稿与分镜拼贴

video/launch/README.md 给出了草稿渲染与分镜检查的命令：

npx remotion render src/index.ts Reel out/draft.mp4 --scale=0.5 scripts/contact-sheet.sh out/draft.mp4 name 1.0 2.5 ...

scripts/contact-sheet.sh 会用 ffmpeg 在给定时间点各取一帧、缩到 960 宽，再按tile=3x2拼成 3×2 的接触印样（contact sheet），快速核对关键帧构图。

6.3 声音无法"听"审

配乐脚本不能在审查过程中听到，因此文档给出的替代方案是用 ffmpeg 看声音：

• ebur128滤波器检查响度（是否符合预期响度值）；
• showspectrumpic检查音色结构与 cue 摆放位置（频谱图可肉眼核对打击点是否落在该落的位置）。

6.4 缩略图友好设计

两支短片都刻意在正片前加了一段"关键视觉停留"：PRE（launch 0.5s / v0.4 0.3s）对应THUMB_T时刻的画面——因为社交信息流用早期帧做缩略图，而不是严格的第 0 帧。pre.wav覆盖这段停留，music.wav从 cold open 才开始。launch 的Poster合成是独立的 README 主视觉（输出out/poster.png），与正片互不干扰。

七、数据声明：宣传片里的每个数字都溯源

两支短片都在 README 里专设 "Claims" 一节，规定画面上数字的来源与披露边界，这是本项目数据纪律最值得借鉴的部分。

7.1 launch：复述 README 的测量结果并保留披露

launch 的 benchmark 场景与海报复述 README 的测量结果，且必须保留完整披露：一次 10 任务的 SWE-bench 重复、包含失败任务、排除 Jev 成本、7/10 解决 vs 8/10 基线。文档明确要求："Keep that disclosure if the numbers change"——数字一旦变化，披露必须同步更新。

7.2 v0.4：数据文件与评测报告一一对应

video/v0.4/src/data.ts 是 v0.4 片的数字来源，数据取自 evals/results/relevance-threshold-2026-09-27.md，文件头注释要求"Keep exact; do not round past the source"：

• 10 个任务逐条列出（django-15629、scikit-learn-13124、pytest-6197、requests-1142、astropy-13579、xarray-3305、sympy-16792、sphinx-8638、matplotlib-26466、pylint-4604），含每任务的 jg 与基线 Sol 成本及是否解决；
• 总量：TOTAL = { jg: 5.44, base: 7.62, reduction: "28.6%", rounded: "30%" }——实测降幅 28.6%，屏幕上按仓库 README 的取整口径显示为 "30% less"；
• 文件数：DJANGO_FILES = { before: 51, after: 10 }，来自同一报告中的单个 Django 任务（旧 >0.25 文件阈值 vs 新 >0.5 阈值下的候选文件数）。

v0.4 README 还明确了三个容易误读的口径：变更以"一个整体"出现，因为报告未隔离各变更的独立效果；对比对象是不带 jg 的 agent，而不是 jg v0.3；这是营销剪辑，画面上无披露，因此四舍五入的声明必须与报告绑定，数字变化时同步更新。

八、给读者的工程启示

纵观 video/README.md 及其两个子工程，这套视频生产线的设计可提炼为四个可复用的原则：

1. 音画同一时间源：cues.ts单一文件承载所有时间，场景与配乐都读它，杜绝"改画面忘改声音"；
2. 配乐进版本库：音乐由固定种子的纯代码合成器生成，无采样版权问题，且每次渲染可复现；
3. 数字必须溯源：宣传片中的指标直接引用评测报告与仓库 README，并明确披露口径（含失败任务、排除项、对比对象、取整规则），数字变化时披露同步更新；
4. 渲染可审查：半分辨率草稿、接触印样、ebur128/showspectrumpic音频可视化，构成一套不依赖听觉的完整审查流程。

若想深入实践，建议从 video/launch/src/cues.ts 读起——它既是时间轴、也是音效 cue 表、还是和声编曲表，一份文件即可理解整支 30 秒短片的叙事与节奏结构；随后对照 video/launch/scripts/music.mjs 观察每个画面事件如何映射为具体的合成音色，即可完整掌握"代码驱动音画同步"的实现路径。