用途
HyperFrames 的 lottie 运行时适配器可以同时对 lottie-web 和 dotLottie 播放器进行 seek（定位）。Lottie 之所以适合，是因为动画时间线已经编码在素材内部，HyperFrames 只需要一个可被定位的播放器对象即可。该技能用于在 HyperFrames 中嵌入 lottie-web JSON 动画、.lottie 文件以及 @lottiefiles/dotlottie-web 播放器。
约定（Contract）
从本地项目文件加载素材，通常放在 assets/ 目录下。 设置 autoplay: false。 除非用户明确要求循环，否则优先使用 loop: false。 将返回的每个动画或播放器注册到 window.__hfLottie。 使用 CSS 保持 Lottie 容器尺寸稳定。 适配器对 lottie-web 使用 goToAndStop(timeMs, false) 进行定位，对 dotLottie 则根据播放器形态使用帧或百分比 API。
lottie-web 模式
使用 lottie.loadAnimation 加载动画，容器为指定 div，renderer 设为 "svg"，loop 与 autoplay 均为 false，path 指向本地 assets 目录下的 JSON 文件，并将返回的动画推入 window.__hfLottie 数组。容器层使用 CSS 设置为 width: 100%、height: 100%。
dotLottie 模式
使用 canvas 元素与 DotLottie 构造函数创建播放器，传入 canvas、src（指向 assets 下的 .lottie 文件）、autoplay: false、loop: false，并将播放器推入 window.__hfLottie 数组。canvas 使用 CSS 设置为 width: 100%、height: 100%、display: block。
多个动画
将每个播放器推入同一个注册表 window.__hfLottie，例如依次 push 背景动画、图标动画、彩带动画。HyperFrames 会将它们全部定位到同一个合成时间。
适用场景
已确认能在 lottie-web 中正确渲染的 After Effects 导出素材。 Logo 揭示、图标循环、装饰性点缀以及产品 UI 动效。 将 Remotion 的 Lottie 用法转换为纯 HyperFrames HTML。
应避免的做法
在渲染时依赖远程 path URL。 使用 play() 开始播放。 假设不受支持的 After Effects 效果能在导出后保留；应先在浏览器中测试 JSON 或 .lottie 文件。 异步加载播放器，并在 HyperFrames 校验已经检查过页面之后才注册它。
校验
编辑 Lottie 合成后运行： npx hyperframes lint npx hyperframes validate
参考
HyperFrames 适配器源码位于 packages/core/src/runtime/adapters/lottie.ts。 lottie-web（Airbnb）：https://github.com/airbnb/lottie-web lottie-web loadAnimation 选项：https://github.com/airbnb/lottie-web/wiki/loadAnimation-options dotLottie web 播放器方法（LottieFiles）：https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods