用途：该技能面向原生 JavaScript/TypeScript 项目，说明如何将 Helios 集成到标准 HTML/JS 应用中，通过直接操作 DOM 和订阅时间线状态来构建合成内容，适用于不使用前端框架的场景，或简单的 DOM/Canvas 操作。
主要能力：
- 初始化 Helios 并设置时长、帧率、分辨率等参数，可通过 autoSyncAnimations 同步 WAAPI/CSS 动画。
- 将 Helios 实例暴露为全局对象，便于 Player/Studio 使用。
- 调用 bindToDocumentTimeline 绑定外部时间线，使 HeliosPlayer 或渲染器能够驱动动画。
- 使用 subscribe 在每一帧接收状态（如 currentFrame、fps、activeCaptions），并据此更新 DOM 元素样式、文本或 Canvas。
- 提供字幕示例：根据 activeCaptions 中的文本更新字幕框内容与透明度。
使用方式：
- 从 @helios-project/core 引入 Helios，创建实例并传入 duration、fps、width、height、autoSyncAnimations 等配置。
- 将实例挂载到 window 上，并调用 bindToDocumentTimeline。
- 在 subscribe 回调中获取状态，计算时间（currentFrame / fps），通过 style.transform、textContent 等直接修改 DOM。
- 字幕场景中读取 state.activeCaptions，有活动字幕时显示文本并设置不透明度为 1，否则清空并设为 0。
适用场景：无框架的网页动画、基于时间线的 DOM 动画、Canvas 简单动画、SRT 字幕驱动的字幕展示。
限制与注意事项：资料仅提供上述模式与示例，未说明安装命令、依赖版本、浏览器兼容性、收费或性能指标。示例中提示应避免在循环内进行昂贵的布局抖动（先读偏移再写样式）。源码示例位于 examples/vanilla-captions-animation/ 与 examples/simple-canvas-animation/。