HTML 运动图形 是做什么的？
构建影院级、确定性的运动图形，作为一个零服务器、独立的 index.html 文件，由 GSAP、定向 SVG 运动模糊、统一的 #world 相机平台和可选的 Three.js WebGL 背景驱动。
何时使用
- 在
index.html中创建宣传视频、产品发布开场、预告片或品牌片头。 - 构建动态文字排版、SaaS UI 产品导览或多场景视觉解说。
- 将静态的幻灯片式网页动画转换为真正的相机驱动的动态设计。
- 交付一个可移植的
index.html，可直接通过file://打开，并支持逐帧精确拖拽和无头 MP4 渲染。
核心工作流程
第一步：锁定创意简报和概念框架
在编写代码之前，定义一个简洁的风格简报，确保输出看起来不像通用幻灯片模板：
- 宽高比和分辨率：桌面/YouTube 默认为
1920x1080(16:9)，Reels/TikTok/Shorts 为1080x1920(9:16)（内容应包裹在transform-origin: 50% 45%处缩放至0.78的.safe容器中，以适配 9:16 社交 HUD 安全区域）。 - 概念架构：根据主题选择一个清晰的结构概念，而不是默认使用“钩子 -> 3 个图标平铺 -> CTA”：
- 连续世界/相机旅程：一个统一的空间，相机在其中进行推拉、环绕或穿越场景。
- 生动的 UI 导览：重建的 DOM/SVG 产品组件，光标/点击进行交互，面板展开，数据确定性地动画化。
- 问题到清晰：视觉混乱逐渐累积，然后一个产品动作将框架清扫干净，呈现品牌标志。
- 纯动态文字排版：单词从不同的轴向进入，改变粗细/缩放，并组装成最终标志。
- 舞台卡通/连续动作：角色或主体保持活动状态，而背景、乐器和叙事标签在其周围变化。
- 颜色和表面系统：定义 CSS 自定义属性（
--base、--ink、--accent、--accent-lit）。切勿留下纯色背景。至少组合两层（例如，径向地平线辉光 + 线性渐变、柔和网格斑点，或 WebGL 星云 + 飘浮尘埃 + SVG 胶片颗粒覆盖层）。 - 音频和时序计划：锁定总时长（
DURATION，以秒为单位），并将每个节拍映射到以秒为单位的绝对时间戳。
第二步：构建独立的 index.html 架构
交付一个自包含的 index.html，包含内联 <style> 和 `<script type=