title-sequence-3d

用代码构建 3D 标题序列

前 3 秒决定有多少人会继续看。这项技能会制作一段简短的电影感开场：镜头穿过灯光照亮的 3D 场景，最后呈现你的问题或标题。

开始之前： 如果 brand.md 和 MOTION.md 存在，请先阅读。如果不存在，请先运行 brand-intake，或询问十六进制颜色代码、字体和 Logo 文件。没有这些信息时，绝不要称作品符合品牌风格。

第 1 步：询问四项内容，然后等待

1. 最后呈现的文案。 示例：“为什么现在所有品牌 Logo 看起来都一样？”
2. 场景。 选择一个符合故事的场景：夜晚的街道、空荡荡的办公室、凌晨 5 点的书桌、舞台。默认场景：雨夜街道。
3. 场景中的物体。 用真实名称或 Logo，将它们呈现为招牌、屏幕或海报。必须附上 Logo 文件，绝不能凭记忆重绘。
4. 品牌和尺寸。 为关键词指定一种强调色。1920 x 1080 或 1080 x 1920。

评审规则（来自被否决的方案）

• 声音不是可选项。 无声的讲解视频会让人觉得没做完。用代码编写配乐：铺设低沉的背景音，每个新镜头都加入一次重击，在最后一行加入渐强。
• 用卡片和图像，而不是线条。 单根横条或线条在屏幕上移动会显得静止。每个镜头都要用卡片、真实图像或在纵深方向移动的物体。
• Logo 要铺满卡片，并且必须来自真实文件。Logo 小小地悬浮在大框里会显得不协调。
• 保持网格对称。 卡片尺寸相同、间距相等。布局歪斜会让人觉得是失误。
• 要惊艳，否则就不算完成。 如果前 3 秒不能让你自己停下滑动的拇指，就先重做这部分，再制作后续内容。

第 2 步：撰写制作简报（粘贴到 Claude Code 中）

Build one self-contained HTML file called index.html: a [SECONDS]-second cinematic 3D title sequence at [WIDTH] x [HEIGHT], using Three.js from a pinned version and only the files I attached.

Scene: [WORLD]. Low-poly buildings, wet reflective ground, fine rain. Each object I attached becomes a lit sign: draw the logo file onto a canvas texture, put it on a plane, and give it a soft bloom (UnrealBloomPass, subtle, never blown out).

Camera: one slow, steady dolly forward and slightly up, passing the signs. No shake, no spins.

Title: in the last third, [LINE] lands in bold condensed type, lower left, in white with [KEY WORDS] in [ACCENT]. Keep the ground under the title dark enough that reflections never show through the letters.

Sound (optional): a low drone plus soft rain, written in code, faded in over the first second.

Build rules: every frame is worked out from the time alone, including rain (seeded, never Math.random at render time). Add window.seek(seconds). Wait for seek when the URL has ?render.

After the build: capture frames at 1s, the middle and the last second. Check that every sign is readable at phone size, nothing mirrored sits behind the title, and every logo matches its file.

第 3 步：检查

• 第一秒看起来已经像电影，而不是幻灯片了吗？
• 标题在手机上看得清楚吗？
• 小号标签（日期、说明文字）是否至少是你认为所需大小的两倍？

第 4 步：导出

HyperFrames（免费、开源）：npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render。用于电子邮件或新闻简报时，还要制作一个小于 5MB、时长 9 秒的 GIF（8fps，宽 540px，轻度降噪，让雨景更易压缩）。