faizalmy/brand-film

品牌影片

一部关于品牌标识的60秒影片：标志、网站、产品、名称。首个获批影片：ReUI 「Refreshed」。template/是其代码：一个可供复制和改编的工作参考实现，而非通用库。

• brands/<brand>.md：品牌专属所有内容（调色板、字体、文本来源、标志、产品、音乐、规则、偏好）。请先阅读。对于新品牌，从 brands/_new-brand.md 编写一份。
• references/example-reui-refreshed.md：获批影片的镜头映射表，包含帧和节奏点。这是需要改编的蓝图。
• references/reui-frames/：视觉模板。包含获批影片的38张静态帧和 sheet.jpg。设计前查看sheet，检查时将静态帧与对应参考帧对比。
• references/review.md：弱点检查清单及子代理评审简报。

前置条件（先检查，缺少即安装）

在机器上首次构建前运行这些检查。仅安装缺失项，并告知你安装的内容。

需要	检查命令	安装方式
Node 20.19+	node -v	brew install node（或nvm）
Remotion及其渲染器	在项目中执行 npx remotion versions	在项目中执行 npm i（版本锁定在 template/package.json 中）；现有项目：npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media 使用同一版本
Remotion所需的Chrome	npx remotion browser ensure	同一命令；它会下载 Chrome Headless Shell
ffmpeg / ffprobe（最终文件检查）	ffprobe -version	brew install ffmpeg
Python 3 + Pillow（联系表）	python3 -c "import PIL"	pip3 install pillow
librosa + numpy（beat.py，仅限新音轨）	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium（屏幕捕获）	在项目中执行 node -e "require('playwright')"	npm i -D playwright && npx playwright install chromium
音乐背景音	文件位于 public/audio/ 下	来自品牌档案指定的来源；切勿自行编造

Remotion许可：个人和小团队免费；超出其规模限制的公司需购买公司许可 （https://remotion.dev/license）。当品牌为公司时，请提及一次。

视觉语言（每个品牌一致）

• 使用品牌自身中性色的单一画布和单一墨水。仅当品牌真正拥有颜色时，或在其真实UI内部使用颜色。无玻璃、金银、3D或发光效果，除非品牌本身由这些元素构成。
• 一个元素引导全局。 它在细线上飞行，承载转场，最终落入终版标志。每个镜头将其在同一屏幕位置传递给下一个镜头。在ReUI的标志中，这是圆点。在新标志中寻找该元素：一个圆点、一个角、一个笔画端点。
• 每条线都是真实的。 构造辅助线来自标志自身的路径。屏幕上每个数字都是测量值（标志单位、DOM框的像素）。没有装饰性内容。
• 品牌自身的字体（其网站使用的字体）。测量数据仅使用等宽字体。
• 标志或文字不覆盖产品UI。标签置于UI外部，留出清晰空间。
• 较长的静态保持是影片的一部分。平静可以接受，死板则不行。

故事结构（改编，而非盲目复制）

部分	节拍（共60个）	作用
线条	0-8	引导元素变为插入符，键入品牌自身的标语
标识	8-20	元素展开为标志；标志从其构造中绘制
网站	20-32	标志缩小成为网站自身的导航标志，随后快速浏览；在节奏点上执行一次真实网站交互
名称	32-36	文字商标，每拍一个字母
产品	36-49	3-4个真实产品视图，真实拖动，测量尺寸，硬切，每拍约3个
视觉	49-52	每拍以不同方式绘制标志；引导元素始终不动
结尾	52-60	标志落定，字母在最后一个节奏点上稳定，随后展示品牌标语和域名

将时间分配给品牌引以为傲的内容。在构造或产品展示之前修剪视觉效果。

硬性规则

• 品牌文本直接复制，绝不撰写。 标语、短语和名称直接从品牌网站或文档中逐字获取。绝不虚构、组合或缩写。
• 产品UI内的演示数据不得作为内容：不展示其名称、数字或人员。
• 仅使用真实UI，用真实鼠标捕获。绝不模拟产品。
• 音频：
  • 音乐来自品牌档案指定的来源，除非档案允许，否则不得新生成。
  • 节奏点为同步点上的少量撞击和重击声。
  • 除非档案要求，否则不添加点击或打字音效。
• 除非被要求，否则绝不渲染或导出。 编辑后，提供Studio预览，不主动提供渲染。当被要求时：4K，相同文件名，覆盖原文件。
• 试验性想法放在复制的合成中。通过比较静态帧证明获批版本未改动。“全部修复”或“移除X”直接应用于主合成。
• 用户指向某帧（“移除3150”）。先渲染该帧并命名该镜头，再更改任何内容。

计时系统（易出错）

所有内容位于 src/Refreshed.tsx 中：

• 时钟。
  • BPM 为音乐背景音的节拍数。SLOW = 2：故事以音乐一半速度运行。本地 useCurrentFrame() 返回减速后的帧数。
  • T = 一个故事节拍。b(n) = 第n个节拍，锁定到半拍：b(0.25) 不是四分之一拍，请使用 T / 4。
  • real(n) = b(n) * SLOW = 第n个节拍对应的影片帧。
• ramp(f, from, to, ease) 是唯一的动画方式。它将from/to锁定到 T / 8 网格，当它们对齐时返回1。永远不要传递0-1分数；使用 clamp01((x - a) / (b - a))。
• 镜头。 SHOTS = [[fromBeat, toBeat, Component]]。移动边界时，需同时移动该镜头内所有节拍常量。
• 声音。
  • HITS = 节拍上的音效。
  • BED_FROM = 音乐轨道的起始偏移量。BED_VOL，附带用于闪避的 volume 回调。
• 重音。 KickBump 在视觉部分之前按重音脉冲化帧。STILL = 无脉冲的节拍范围。
• 同步点是脊梁： 每个大变化都落在节奏点上。移动一个同步点意味着重新固定其周围的镜头。
• 新音轨： python3 scripts/beat.py <track.wav> 输出速度、首个节拍相位和高潮点。设置 BPM 和 BED_FROM，然后将同步点放在其重音上。

将模板适配到品牌

替换项	位置
标志路径（环形、内部形状、引导元素）、形状中心线和笔画、文字商标字母和位置、viewBox	src/logo.tsx（RING_D、U_D、DOT、U_LINE、U_STROKE、LETTERS、LETTER_X、VB、uPoint）
调色板、字体、字距	src/Refreshed.tsx 顶部（INK、PAPER、LIGHT_INK、DIM、FONT、TRACK）及 public/fonts
品牌标语和域名	LINE、DOMAIN
网站截图	类似 scripts/reui/site-object.mjs 的捕获脚本，写入 public/cap/site-object/
产品视图	类似 scripts/reui/live.mjs、dash.mjs、block-live.mjs 的捕获脚本。每个脚本为每个鼠标步骤写入一张截图及测量框到 public/cap/live/<dir>/ 和 meta.json。然后编辑 NAMES_UI/BLOCK_UI 条目以及 WITH_UI 中的 dir 联合
视觉效果	LOOKS：3-4种绘制标志的方式（如路径数据、半色调、构造线）
音乐和节奏点	public/audio/、BPM、BED_FROM、HITS

若标志结构不同（无圆点、无环形），需自行编写 Construct、Opening 和 Final。保持核心理念：从真实几何结构绘制标志，由一个元素引导。

工作流程

1. 读取 brands/<brand>.md（或编写一份）。测量标志SVG和网站；收集品牌的逐字文本。
2. 新影片：
   • cp -R ~/.claude/skills/brand-film/template <project> 并执行 npm i。
   • 将背景音乐放入 public/audio/。
   • 捕获脚本从项目文件夹加载Playwright（npm i -D playwright），或从 PLAYWRIGHT_FROM 指定的文件夹加载。
3. 捕获 网站和产品，使用真实鼠标。重新捕获前备份 meta.json。选择互不相似的产品视图，拖动真实对象；绝不进行悬停浏览。
4. 编辑 仅根据品牌更改表（上文）进行修改。保留辅助组件（Flight、Wipe、Dim、Lead、Disc、Live、LiveRun）。
5. 检查。
   • npx tsc --noEmit。仅允许未使用导入的 TS6192 错误。
   • 从项目文件夹：~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>，然后读取 sheet.jpg。
   • 检查每个镜头、每个连接处的两帧、每个同步帧以及结尾。
   • 将你的sheet与 references/reui-frames/sheet.jpg 放在一起。任何比模板对应镜头更稀疏、更嘈杂或更拥挤的地方，都是一个发现。
   • 单帧可能闪烁；修复前重新渲染该帧。
6. 评审（始终执行，在新版本首次交付前）：
   • 使用 references/review.md 中的任务摘要启动一个子代理。它获取代码，而非你的结论。
   • 它返回按排名排序的弱点，附带帧号和“不可触碰”列表。
   • 自行在帧中检查其排名靠前的发现，删除帧中未显示的项。
   • 向用户展示简短排序列表并询问修复内容，除非他们说了“全部修复”。
   • 重新检查已修复的帧。绝不撤销用户喜欢的内容（品牌档案）。
7. 在Remotion Studio中预览（http://localhost:<port>/Refreshed）。交付预览，而非渲染文件。
8. 渲染（仅在要求时）： npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error 在后台运行。然后执行 ffprobe：3840x2160，60 fps，帧数，音频流。

每次结束时告知

发生了什么变化（按帧），哪些未被检查（动态和音效在静态帧中无法显示），以及渲染的mp4是否已过期。