bb-video

BB Video

用代码绘制的视频：HTML + CSS / SVG / canvas 帧，在 Chrome 中逐帧渲染，用代码合成声音，再用 ffmpeg 组装。每一帧都是纯函数 renderFrame(t)，因此可以单独渲染任意帧，而且每次渲染的结果都相同。

此文件中的相对路径均相对于此技能文件夹。

一个选择：风格

风格是用户唯一需要选择的内容。它决定视频的外观、动态和声音，而不会改变视频的内容。如果用户指定了风格，就采用该风格；否则，根据主题或产品推荐一种风格，并在分镜脚本中说明原因。当用户说“试试另一种风格”时，用新风格重新制作相同内容。

风格	外观	最适合	说明视频	宣传视频
whiteboard 手绘白板	一边在无限白板上绘图讲解，一边移动镜头，并加入卡通角色	问题讲解、推导、现象，以及需要角色的故事	✓	✓
riso 孔版印刷	杂志页面采用专色叠印、半色调和套印错位效果；页面随着滚筒转动而翻动	日常趣闻、心理学、新闻、金融、数据、食物、词汇	✓	✓
ink 水墨	宣纸上的一幅长卷：逐笔书写，描绘山水、人物和印章	中国历史和典故、古典诗词、成语、文化、自然	✓	✓
launch 发布会动态效果	舞台色彩根据产品选择（浅色／深色／品牌色），文字踩着节拍重重落下，浏览器窗口中展示真实 UI，镜头推进、甩镜、闪光	大多数软件、SaaS、AI 工具和发布活动；适合有优质真实截图的情况	✓	✓
origami 折纸	带有光影和折痕的纸张：展开揭晓内容、卡片落在桌面上、立体书、翻页、纸鹤	温暖亲切的消费产品、创作、教育、文档和内容	✓	✓
pop 波普艺术	20 世纪 60 年代漫画风格：粗线条、班戴点、分格、对话气泡、爆炸式拟声词、沃霍尔式重复	面向年轻群体、轻松活泼的内容、社交、AI 助手和聊天（对话变成漫画对白）	✓	✓
op 欧普艺术	黑白条纹、圆环、棋盘格和螺旋围绕“透镜”凸起；百叶窗式揭示	科技、AI、开发者工具、音乐；强调“精准”“并行”或催眠感	✓	✓
cutout 马蒂斯剪纸	用剪刀剪下水粉纸片，贴在奶油色纸张上；整张纸覆盖画面，再被撕开	创作、学习、社区、教育、生活方式	✓	✓
ascii ASCII 字符艺术	所有内容都用等宽字符绘制：产品图像从字符噪点中显现，镜头推进时逐渐清晰，随后扫描成真实照片；键入的行文、框线字符边框	开发者工具、硬件和产品阵容，以及任何强调“精准”的内容；适合配有优质产品图的科技发布活动	✓	✓
shadow 皮影戏	木质舞台框架内，一盏灯照亮布幕；雕刻而成的半透明皮影侧身出场，四肢由关节连接并用操纵杆控制，可以行走、交谈、鞠躬、骑马、跌倒；红纸牌挂下，写着名字和日期；场景变化时灯光渐暗	有人物和冲突的中国历史与故事（谁对谁做了什么）、民俗文化、创始人的故事	✓	✓
bauhaus 构成主义／包豪斯	奶油色印刷纸上的红黑配色，搭配包豪斯黄和蓝；大圆形、粗横条和楔形斜向排列；醒目的口号倾斜排版，逐字盖印；用圆形、正方形和三角形拼装物件；红色楔形从场景之间扫过	宣言和发布活动、拆解事物的构成、流程与比较、设计／建筑／工业史、工具与生产力	✓	✓
pixel 像素艺术（8 位游戏）	低分辨率游戏画面放大至全屏：抖动效果的天空色带、视差山丘和城市逐像素后退；带轮廓的精灵角色行走、跳跃、交谈和战斗；通过游戏 UI 传递信息——对话框逐字显示，菜单带有 ▶ 光标，HP 条逐格填满，分数计数器，关卡地图；方块溶解和虹膜转场；芯片音乐	游戏、开发者和生产力工具、AI 产品、分步流程与选择、带有角色的小故事、科技和游戏史、面向儿童的说明视频	✓	✓
chat 聊天记录	故事或信息在聊天应用中展开：有人正在输入，消息弹出并将对话往上推，附有来源的引用卡片，逐行亮起的诗歌、接力清单、投票、地图上的路线、“X 加入了群聊”、撤回的消息；镜头推进到某条消息，其他内容变暗。横屏：大型聊天窗口配侧边栏；竖屏：应用铺满画面宽度	以对话形式讲述的典故和简短历史故事、引用来源较多的“谁说了什么”说明视频、AI 助手、客服和协作产品	✓	✓
toy3d 玩具 3D	昏暗温暖的桌面上，产品的真实屏幕以实体板片的形式呈现（上面印有截图），旁边是哑光乙烯基玩具——用其 SVG 立体挤出的品牌标志、吉祥物或问题中的角色——玩具用身体操作 UI：落下就是点击，沿着一行跳跃就是输入，搬运就是拖动；按键从板片上升起，又沉入板片；键帽拼出数字和公式。分别拍摄低机位、长焦、极浅景深的镜头；剪辑踩着节拍，玩具在每个切点都处于腾空状态；仅为正在展示的内容添加辉光。机器支持时用 Blender 制作玩具（无缝乙烯基材质），否则用相同的零件清单通过 three.js 制作	有真实 UI 和分步流程的软件（编辑器、看板、IDE、应用）；带有标志或吉祥物的品牌；让事物亲自行动（计数、分组、交换）的说明视频	✓	✓（仅手写）
newsreel 老新闻片	以 1.37:1 画幅呈现的 20 世纪 30 年代影院新闻片，背景为黑色：缓慢推进的许可清晰档案照片，附有年代和来源标签；印在胶片上的字幕、印章、双线分隔的字幕卡、可撕式日历、秒表、印刷价目表、是否发生的结论，以及用制图网格绘制的“动画示意图”（注明为复原画面），用来呈现没有影像记录的内容；颗粒、划痕、画面抖动、闪烁；干练的播报员通过光学音轨配合铜管进行播报。以虚构的新闻片品牌开场和收尾	重新讲述新闻和事件（发布活动、纪录、核查说法）、配有档案照片的历史故事、拥有真实照片的复古产品发布活动	✓	✓（仅手写）
filmroom 录像分析	在昏暗的转播室中播放许可清晰且注明来源的真实录像：分析员暂停录像，在定格画面上画出球员脚下的圆圈、她即将跑出的路线、传球路线、空当和聚光灯；然后倒带，用混合慢动作重播并让圆圈跟踪她，再推进镜头展示细节；根据录像校准的俯视战术板；根据比赛数据生成的投篮图	体育比赛分析（一次攻防、一个要点：无球跑动、空间布局、步法）、任何位置关系重要的录像、屏幕录制形式的产品演示	✓	✓（仅手写）
mystery 悬疑探秘	一档冷面风格的伪科学节目，在一台饱和蓝色的老式 4:3 电视上播放（显像管暗角、划痕、电视台标志、滚动显示的“虚构，仅供娱乐”文字）：白色描边标题，关键词用红色显示；用笔刷字体标出编号“症状”，每项都由橡皮管风格的卡通贴纸演绎（大脑、戴着白手套的灯泡人、手机、闹钟、电量为 19 % 的电池）；全屏聊天窗口配绿色气泡；大片浅色文字席卷而来——随后信号切换到测试卡。第二种外观（look: 'case'）改为播放案件档案：迷雾、划掉的猜测、青绿色复原图、红线串联的证据板、监控画面，最后在日光下揭晓有来源依据的答案	“如何判断你的朋友是否……”这类日常习惯清单、令人有共鸣的伪科学、破除迷思和“为什么会……”之类的谜团、轻松有趣的宣传内容	✓	✓（仅手写）
isometric 等距微缩世界	从固定的 45° 等距视角呈现一个完整的小世界：厚实底座上的地砖彼此留有间隙，搭配低多边形圆角建筑、传送带、货架、厢式货车和自行移动的小人；沿着整个系统追踪一件物品（由人递给传送带，再交给卡车），沿途逐段在地面绘出路线，每个阶段放置一张时钟卡片，并用成串包裹展示数量；正在讲解的阶段升起，其余部分逐渐淡出；镜头连续摇移、推进和拉远；长途运输途中夜幕降临	流程与系统（物流、供应链、城市／电网／支付／互联网如何运作）、“追踪一件物品在系统中的流转”、价值来自系统的产品	✓	✓（仅手写）
trailer 电影预告片	以 2.39:1 宽银幕画幅呈现的好莱坞预告片：具有纵深层次的代码绘制电影镜头（太空、行星、山脊、走廊、屏幕，以及边缘光勾勒的人物剪影），配以青橙色调、颗粒和暗角，镜头缓慢推进，带有视差和移焦；黑底卡片上用宽体金属字展示短句；先是一声孤独的钢琴音和滴答作响的时钟，随后响起 BRAAM 和太鼓，剪辑逐渐加快，穿插闪帧、猛切、短暂的绝对静默、震撼的标题登场、上映日期、精简的演职员名单和片尾彩蛋。仅使用文字卡片和少量对白（某句台词可单独配音色，例如通过收音机播放），或使用深沉的预告片旁白。使用虚构的制片厂标识；切勿仿用真实制片厂或电影的商业外观	故事预告片（虚构电影、书籍、游戏、历史篇章）、以戏剧化方式讲述的发布活动（之前的世界 → 直到…… → 有何变化 → 名称和日期）	✓	✓（仅手写）
dossier 剪报解说	用纸张制作的现代金融／新闻解说：灰色新闻纸上的剪报（醒目的标题配黄绿色荧光笔痕迹、根据事实撰写的真实简短报道、半色调照片），以及重新排版并冠以虚构报头的真实来源文件（新闻稿、申报文件、央行声明）；镜头从页面推进到被引用的句子，红色／蓝色翻译条、标签或标记落在相应文字上；纸张飞过图片，镜头之间以墨刷拖痕转场，缩略图风格标题卡，数据标注；顶部的章节栏、加粗描边字幕、颗粒和暗角	解读财报、市场、政策和申报文件；以文件为证据的新闻评论；“这份公告真正说了什么”	✓	✓（仅手写）
manga 日漫／动态漫画	黑白漫画页面（白纸、墨线、网点和渐变网点纸）切分为带间隔的分格，使用倾斜分格和出血分格，让人物冲破画框；速度线和集中线、作为画面组成部分绘制的音效字（ドン / ゴゴゴ / 轰）、圆形／喊叫／思考气泡和旁白框、竖排文字；镜头逐格阅读（从右向左），推进到关键分格并在冲击时震动；分格逐渐显墨，页面翻动或被划开，高潮处出现整页跨格画面；用代码绘制原创角色（表情、眼部特写、拳头、剪影、Q 版反应）、战斗漫画介绍框、墨绘图表	将科学和概念讲成对决或较量（分子对受体、漏洞对修复方案）、带反转的故事、面向年轻受众的角色驱动型宣传内容	✓	✓（仅手写）
map 动态地图	根据真实地理数据绘制的设计型印刷地图（纸感陆地、沿海岸线刻画的水域线条、公园、街道纹理、地图标签）：路线逐笔绘出，有轨电车／火车／飞机沿线路行驶，并在讲到相应站点时抵达；车站弹出，区域像墨水般扩散，印刷标注卡片钉在地点上，年份计数器，定位地球仪；镜头转动地球仪、俯冲至街道、在地点之间飞行、倾斜并跟随交通工具；主体保持明亮，其余部分变暗	地点及其连接方式：公共交通与城市、历史战役与旅程、贸易和迁徙路线、事物的扩散过程、“在哪里”开场介绍、带年份标注的前后对比	✓	✓（仅手写）
包含具名人物的故事在所有风格中都遵循 styles/CHARACTERS.md（固定角色阵容、一眼区分人物、面对面场景、接力）；只有 whiteboard、ink、shadow、pixel、chat 和 manga 有角色，建议为以角色为核心的故事选择其中一种。

每种风格都位于 styles/<name>/：其中包含该风格的 STYLE.md（所有风格采用相同大纲：styles/TEMPLATE.md，中文版为 styles/TEMPLATE.zh.md）以及入门文件。选定风格后，先阅读其 STYLE.md，再编写任何绘图代码。

每种风格都能制作两种视频。每种风格都诞生于一种工作流，并通过通用接口延伸到另一种工作流（promo/runtime/kit.js：相同的动词——大字、句子、卡片、真实截图、标志性动作、转场、片尾卡——均以各自风格的材质绘制）：

	解说视频（带旁白）	宣传视频（跟随节拍，无旁白）
whiteboard riso ink	原生：node explainer/scripts/new.mjs <dir> --style … — 完整的白板 API、角色、公式	node promo/scripts/new.mjs <dir> --style … [--quick] — 白板在宣传影片中运行：场景是白板区域 / 页面 / 滚动区段，转场是平移 / 翻页 / 滚动移动
launch origami pop op cutout ascii shadow bauhaus pixel chat toy3d newsreel filmroom mystery isometric trailer dossier manga map	node explainer/scripts/new.mjs <dir> --style … — 创建按旁白节奏推进的项目（旁白 + 字幕；提示点按旁白计时，promo/references/kit.md，“跟随旁白”）	原生：node promo/scripts/new.mjs <dir> --style … — 该风格的完整组件集

原生工作流提供最丰富的工具（whiteboard 的公式和角色；origami 的折叠；op 的镜头……）；另一种工作流则涵盖大多数视频所需的内容。如果视频需要只有原生工作流才有的功能（例如剪纸风格解说视频中的公式、riso 宣传视频中的折叠动画），请说明这一点，并推荐该部分使用原生风格。

视频类型：根据请求判断

用户不会选择视频类型；应根据他们的需求判断。

用户想要……	工作流	指南
讲解某个内容：一种现象、一个问题、一个词、一个概念、一个故事、一篇教程或新闻——带旁白	解说视频（由叙述驱动：旁白 → 时间线 → 按每句话的节奏安排画面；字幕；背景音乐）	explainer/GUIDE.md
推广一款产品：一个网站、一款应用、软件或一次发布——无旁白	宣传视频（由节拍驱动：研究与事实清单 → 按节拍呈现画面；合成配乐和音效；16:9 + 9:16）	promo/GUIDE.md

两种工作流都使用同一个引擎（core/）：共享时钟和运行时核心、同一个渲染器和声音处理管线——旁白、音乐和音效混合在一起，音乐在旁白下方自动降低音量，响度经过标准化。因此，宣传视频可以加入旁白和字幕（promo/GUIDE.md，步骤 5），解说视频也可以按节拍剪辑（EV.beats）。使用另一侧风格制作的项目，遵循相应视频类型的工作流（解说视频遵循解说步骤），并使用绘制该风格的引擎渲染器（适用于宣传视频原生风格的 promo/scripts/render.mjs）。

阅读对应的指南，并从步骤 1 开始遵循其中的说明。每份指南中，故事讲述方式也由系统为用户选择，而非由用户选择：解说视频内容模式见 explainer/references/modes.md，宣传视频叙事方式见 promo/references/structure.md。

指南中的路径均相对于该指南所在文件夹：制作解说视频时，运行 node explainer/scripts/… / python3 explainer/scripts/tts.py …；制作宣传视频时，运行 node promo/scripts/…（从此技能文件夹运行，或使用完整路径）。

每个视频的规则

• 事实优先。 绘制前核实事实、数字和引文，并将它们写入项目的 brief.md。所有屏幕文字都必须能在其中找到出处。
• 允许使用动画库（GSAP、Three.js、Matter.js、opentype.js……），但时间始终由我们的时钟决定：动画库必须根据 t 进行定位，不能自行使用内部时钟或回调运行（promo/references/motion.md，“动画库”）。
• 交付前自行检查：按照各自指南完成自动检查、联系表／静帧检查，以及渲染视频的帧检查。
• 语言：除非另有说明，视频应使用用户所用的语言。
• 绝不登录，绝不在你研究的网站上输入密码；研究仅限只读操作。

添加样式

根据模板编写 styles/<name>/STYLE.md，并在其运行的工作流中加入运行时、起始文件和音效。对于 promo 样式，还要在 promo/runtime/kit.js 中注册该样式的通用接口（promo/references/kit.md）。将该样式添加到上方的表格中。