Anthropic / V004

幕后内容上线｜The making of Claude Code

让历史资料逐层占据画面，最后放入主标题。标题停留时，周围窗口保留少量内部运动；结尾逐层撤去，回到档案。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 9.22 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>幕后内容上线｜The making of Claude Code · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f5f4ee}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素档案页面外围证据窗口角色窗口主标题窗口访谈窗口

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

主标题占据最上层

等宽档案文字、像素标题、深色窗口；竖屏中心堆叠。

窗口按先后层叠，中央标题最后覆盖上层；外围内容维持可辨认边缘。

窗口进出，内容继续播放

窗口进出，内容继续播放规则示例

0.00 / 3.20 秒

0.3–3.5 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>幕后内容上线｜The making of Claude Code · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f5f4ee}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="0.3" data-end="3.5"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

主标题停留期间，角色与访谈等内部内容继续变化；窗口外框与内容动画分开描述。

退出时撤去上层窗口，露出起始文档，让片段闭环。