HyperFrames v0.7.43 深度解读drawElement 快速捕获可靠性、gsap_non_transform_motion 新规则与创作技能体系升级【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesv0.7.43发布于 2026-07-08是 HyperFrames 在渲染管线可靠性与创作工作流两条主线上的一次集中迭代一方面围绕 ChromedrawElement快速捕获做了系统性可靠性修复GPU 后端探测、Chrome 解析、arm64 固定、加速画布插桩、Worker 编码流水线另一方面在 lint 体系引入全新的gsap_non_transform_motion规则从源码规则层杜绝 GSAP 布局/文本重排动画在逐帧 seek 捕获引擎下的像素级抖动并将注册表组件批量迁移到 transform 写法。本文以该版本发布说明为主体结合 packages/engine 与 packages/lint 源码逐项还原这些变更背后的实现原理与实战意义。版本主题总览v0.7.43 的变更可以归纳为四条主线主线代表变更涉及包drawElement 快速捕获可靠性Chrome 解析补洞、arm64 固定 headless-shell、加速画布插桩、错误码分类cli / engine新 lint 规则gsap_non_transform_motion捕获 text-reflow 布局抖动并迁移注册表组件lint / catalog / skills创作技能体系mode-first briefs、按需安装 workflow skills、品牌 logo 四级级联解析skills / cli / media-useCLI 健壮性--no-clipboard修复、未知 flag 报告、WebM alpha 丢弃告警、对比度审计cli其中 Chrome/drawElement fast-capture reliability fixes 与 new GSAP lint rule catching text-reflow layout thrash 是发布说明明确点名的两大核心下文分别展开。drawElement 快速捕获原理与 v0.7.43 的可靠性收口HyperFrames 的快速捕获路径使用 Chrome 的canvas.drawElementImage(element, x, y)能力它把 DOM 元素的 paint 记录直接读进 canvas绕过完整合成器管线在本地 GPU 上比Page.captureScreenshot快约 46%且 alpha 输出在 GPU 上是像素级无损PSNR∞。核心实现位于 packages/engine/src/services/drawElementService.ts。捕获前置条件与画布注入drawElementImage要求 Chrome 开启--enable-featuresCanvasDrawElement并且合成根必须被一个canvas layoutsubtree包裹否则读不到 paint 记录。injectDrawElementCanvasdrawElementService.ts负责在[data-composition-id]根元素外围注入该画布并同时安装两套逐帧失效机制哨兵元素失效画布内放置一个 1px 的__hf_de_tick元素每次捕获交替切换其背景色。背景色切换是 paint 级 dirtylayout/transform 切换并不会触发 canvas 的paint事件因此即使静态帧也能保证产生一次新快照canvas.requestPaint()这是 html-in-canvas API 设计意图内的失效方式可刷新子树含合成器应用属性的 paint 记录。实现上做了存在性守卫若当前构建不支持则降级为仅哨兵失效。paint 事件同步与两套捕获模式drawElementImage绘制的是 paint 事件时记录的快照脱离 paint 事件调用会拿到上一帧的内容甚至抛InvalidStateError: No cached paint record即历史上 macOS 上的间歇性崩溃。captureDrawElementFramedrawElementService.ts通过syncToPaintEvent参数区分两条路径paint 同步模式macOS / 截图启动的浏览器强制失效后监听 canvaspaint事件在事件处理函数内绘制保证快照是当前帧同时带 250ms 兜底超时避免功能漂移或页面节流时渲染挂死BeginFrame 模式Linux headless-shellsyncfalse该环境下逐帧beginFrame已先行产出新快照直接绘制即可若等待 paint 事件反而会每帧烧掉超时时间。编码格式上png走toDataURL(image/png)保留透明通道jpeg走toDataURL(image/jpeg, q)——必须与下游编码器匹配producer 的流式编码器以 mjpeg 喂给 ffmpeg若误喂 PNG 字节会导致 ffmpeg 解码失败。v0.7.43 的可靠性修复点发布说明中的 Close review gaps in Chrome resolution fix 与 Resolve drawElement to a Chrome build that actually has it5f9ee0b67、8854bad8f表明此前通过某种启发式解析出的 Chrome 构建可能实际并不含drawElementImagev0.7.43 收紧了解析逻辑确保解析结果真正具备该能力Pin arm64 render Chromium to Playwright headless-shellcebce603d则把 arm64 渲染路径固定到 Playwright headless-shell消除平台差异导致的捕获行为漂移。SwiftShader 回退与后端探测resolveDrawElementCaptureModedrawElementService.ts是快速捕获的路由决策函数只要检测到 SwiftShader软件光栅化即 Docker/CI 无 GPU 环境一律回退到 screenshot 基线。原因注释里写得很清楚drawElement 的优势在于跳过 GPU→CPU 的 readback IPC而 SwiftShader 根本没有 GPU两条路径都阻塞在相同的软件光栅化上drawElement 反而多一次 CDP 往返且透明输出时 SwiftShader 还会丢弃提升的合成子层Chromium bug 521434899。实测中硬件 GPU 上 macOS 提速约 1.6×。detectGpuBackenddrawElementService.ts通过WEBGL_debug_renderer_info读取UNMASKED_RENDERER_WEBGL判断是否 SwiftShader并缓存在会话上classifyGpuRendererdrawElementService.ts则把原始驱动字符串归约为低基数桶如metal/apple、d3d11/nvidia、swiftshader/other用于遥测——因为 drawElement 的失败模式被证明与合成器后端强相关原始渲染器字符串是无界的驱动文本直接进遥测会产生高基数噪声。加速画布与 3D 内容的合成修正一个隐蔽问题是webgl/webgl2/webgpu 加速画布通过合成器纹理交换呈现元素从不重绘paint 记录永不失效drawElementImage会整段渲染都服务第一帧快照。instrumentAcceleratedCanvasesdrawElementService.ts在页面脚本运行前用page.evaluateOnNewDocument包装HTMLCanvasElement.getContext把加速画布记入window.__hf_accel_canvases捕获时先将它们设为visibility:hidden在 paint 记录中挖出透明洞再在 DOM paint 之下用drawImage合成实时内容WebGL 上下文还会强制preserveDrawingBuffer: true否则绘制缓冲在每次合成器 present 后被清空drawImage读到的是空白。v0.7.43 中捕获合成还补上了根元素 transform/opacity 修正快照从不烘焙被捕获元素自身的 transform即使静态 transform 也会被渲染为未缩放以及 3D 投影画布threeDProjection.ts的覆盖层合成。Docker 透明输出的截图回退由 frameCapture.ts 的会话初始化路由完成。Worker 编码流水线为了隐藏编码开销drawElementService.ts 实现了 in-page OffscreenCanvas Worker 编码主线程完成 seekpaintdrawElementcreateImageBitmapproduce 阶段后立即把 bitmap 转移给 WorkerWorker 在后台编码 JPEG用__hfFrameReadyPuppeteerexposeFunction绑定回传 base64 给 Node 侧还包含 30 秒编码看门狗、id-1的 worker 致命错误全量拒绝、以及会话复用时的陈旧 promise 清理。produceDrawElementFrameBatch进一步把连续 N 帧的 CDP 往返摊薄为一次drawElementService.ts 起的 P6 原型仅 macOS GPU 同步路径使用。gsap_non_transform_motion从 lint 规则层消灭布局抖动v0.7.43 最重要的新增能力是一条名为gsap_non_transform_motion的 lint 规则实现在 packages/lint/src/rules/gsap.ts。发布说明原文Flag text-reflow props in gsap_non_transform_motion。规则动机为什么布局属性在逐帧捕获下会抖动HyperFrames 的渲染引擎按帧 seek 时间轴捕获画面。当 GSAP 动画的是left/top/right/bottom/margin*这类布局属性时浏览器在布局阶段把子像素位置四舍五入到整数设备像素。快速 tween 下每帧位移大肉眼无感但慢速 tween 或 ease-out 收尾时子像素移动会在连续多帧里四舍五入到同一个像素然后突然跳一个整像素——表现为明显卡顿。而 transformx/y/scale在合成器内做子像素插值任意速度下都平滑。规则覆盖的三类问题规则源码把违规场景分为三类gsap.ts位置类布局属性LAYOUT_FIX映射left/right/top/bottom/margin/marginLeft/marginRight/marginTop/marginBottom每条都有对应的 transform 替换轴 | 布局属性 | transform 等价替换 | | --- | --- | |left/right|x| |top/bottom|y| |margin|x,y| |marginLeft/marginRight|x| |marginTop/marginBottom|y|文本重排属性REFLOW_PROPSletterSpacing、wordSpacing、fontSize。动画这些属性会触发文本重排字形位置被吸附到像素网格卡顿机制与位置属性相同且发生在浏览器布局阶段位于任何画布光栅化之前。width/height被刻意排除——它们有正当的动画用途进度条、揭示规则不想过度误报roundPropsGSAP 的取整选项把 tween 值四舍五入到整数同样产生像素级跳动。修复建议的忠实性规则不是简单报错而是给出逐属性的忠实修复提示gsap.ts位置属性tl.fromTo(#x, { x: -1300 }, { x: 0, ... })这类 transform 等价写法fontSize可替换为scale视觉等价、不重排letterSpacing/wordSpacing不能用统一 scale 代替缩放改变字形大小而非字间间隙需要把文本拆成逐字符元素、各自动画x展开或静态保持最终值。这一点在 Make the reflow-prop fix faithful, not a lossy scale swap6e21072f4中得到强化——修复提示必须是视觉忠实的不能是有损的 scale 交换。豁免机制html-in-canvas 元素规则解析canvas layoutsubtree标签范围通过选择器反查目标元素gsap.ts。对layoutsubtree之内的元素布局不由浏览器合成器完成而是由画布库读取getComputedStyle().left/top子像素值直接绘制到 bitmap因此位置类布局属性动画不会整数吸附、不会卡顿可以豁免。但豁免有两条硬性边界仅位置属性豁免roundProps值取整和文本重排属性字形布局在光栅上游吸附永不豁免分组 tween 不豁免只要分组 tween 还同时命中普通 DOM 元素仍然报错。测试用例 packages/lint/src/rules/gsap.test.ts 系统覆盖了这些语义错误于布局属性、不误报 transform x/y、不误报tl.set()、布局属性roundProps 单次报告、独立gsap.to()捕获、html-in-canvas 豁免、分组 tween 仍触发、字符串标签时间轴 tween、嵌套{}的 onComplete 体、fromTo from-object、文本重排属性、html-in-canvas 不豁免文本重排、字符串字面量 roundProps: 不误报。故意不提供关闭开关值得注意的是规则刻意没有per-line/per-file 的 opt-out区别于 eslint-disable。源码注释gsap.ts明确了立场理念是修复动画而不是静默规则——普通 DOM 上的布局属性动画总有忠实的 transform 等价物。作者即使主观接受卡顿也没有开关可翻这是有意设计而非缺失功能。注册表迁移与 kinetic-letter-in发布说明的 Catalog 与 Internal 部分对应两条迁移动作Add gsap_non_transform_motion rule, migrate registry comps to transforms619a603ea 与 registry/components 下的 HTML 组件Migrate kinetic-letter-in off letterSpacing; document rule design1c0eef835kinetic-letter-in组件从动画letterSpacing迁移到逐字形 transform 展开同时把规则设计文档化。Skills 侧也配套更新Teach transforms-over-layout-props up front58f7dc1c7让创作技能在一开始就灌输优先 transform 而非布局属性的准则。CLI 健壮性--no-clipboard、未知 flag 与 WebM alpha 告警--no-clipboard 的 citty 解析修复hyperframes add命令新增了--no-clipboard支持但修复过程本身很有代表性。命令参数声明packages/cli/src/commands/add.ts的注释揭示了根因参数必须以正向clipboard默认 true声明才能让 citty 的内置--no-name否定语法正确解析--no-clipboard若把字面量no-clipboard声明为参数名citty 会把它解析成不存在的clipboard参数的否定assertKnownFlags于是抛 Unknown flag: --clipboard尽管--help明明展示了该选项。修复后skipClipboard args.clipboard falseCI/headless 场景可以干净地跳过剪贴板复制。相关用法还出现在hyperframes add overlay --dir project --no-clipboard --jsonmedia-treatment.ts。未知 flag 报告与嵌套子命令覆盖Report unknown-flag errors cover nested subcommands (HF#2033)38b27c4d8测试见 packages/cli/src/commands/tts.test.ts。WebM 渲染静默丢弃 alpha 的告警Warn when a WebM render silently drops its alpha channel [P2]f5f94a949 与配套测试 packages/cli/src/utils/webmAlphaCheck.test.tsmp4 透明不适用不告警、mov 原生携带 alpha 不告警、alpha255的假阳性被排除。需要说明的是背景移除管线中.movProRes 4444同样携带 alphapipeline.ts而 alpha 捕获路径不支持 4k 超采样cloud/render.ts渲染 4k 请用 mp4或按合成分辨率渲染 alpha。对比度审计与渲染示例修复Contrast audit reads an elements own opaque background701ae9e9b对比度审计此前可能读到祖先背景导致误判v0.7.43 改为读取元素自身的不透明背景Fix render examples that pass a file as the project dirab129023d修正了 CLI 渲染文档里把文件当作项目目录传入的错误示例。Engine 与 Producer 修复变量作用域与 seek 语义v0.7.43 在渲染引擎层面有六项值得注意的修复音频轨相对data-start引用解析6f8bf5f36音频轨中的相对data-start引用此前可能解析到错误的绝对位置现已按相对语义正确解析子合成变量注入与作用域隔离Inject sub-composition variables on the render path41ad5b469把子合成变量注入放到渲染路径上Scope per-instance variables for repeated sub-composition mounts5ebc5bb10则修复了同一子合成被重复挂载时变量串扰的问题——每个挂载实例现在拥有独立变量作用域Composition CSS 变量在 eval 时到达渲染路径e2c88ef68此前合成级 CSS 变量可能未在求值期生效现在保证在 eval 时即作用于渲染渲染 seek 期间抑制 GSAP 调用副作用5b9b71df2逐帧 seek 时 GSAP 回调的副作用如 onComplete 内修改状态会污染后续帧v0.7.43 在 seek 期间抑制这类副作用ReDoS 安全的 slug 修剪与 getVariables 清理d9368ec05core 的 slug 修剪改为正则回溯安全实现避免恶意/超长输入触发灾难性回溯同时清理了getVariablesfigma 品牌 token 闭环def276524core/cli/lint 三包配合让 figma 品牌 token 以运行时 CSS 变量、--name参数、snippet lint 的完整链路落地。Skills 与 Media Use创作工作流的体验升级发布说明的 Features 首条即 Mode-first briefs, value-first storyboards, and destination defaults across creation workflows17b852784。所谓 mode-first指创建类技能的 brief 不再以通用脚手架开头而是先讲清创作模式mode与目标价值value再展开具体步骤让 Agent 一开始就理解为什么这样创作而非机械套模板value-first storyboards 则让分镜优先陈述视觉价值。其余相关变更按需安装 workflow skills81884a749 目录中的技能集品牌 logo 四级级联4d3cdc3e4Media Use 技能解析官方品牌 logo 时按四级级联逐层回退直到解析出可用的官方资源codex alias-vs-PATH 提示80271863d当 codex 不可用时提示信息解释了 shell alias 与 PATH 查找顺序的常见误区。文档、CI 与工程基建Modal 部署模板bb423dd21 部署指南新增 Modal 平台部署模板与既有的 AWS Lambda、GCP Cloud Run 部署方案并列oxfmt 格式化与 skills manifest 同步b95f2ca25。总结v0.7.43 是一次典型的可靠性优先版本drawElement快速捕获路径在 Chrome 解析、arm64 平台、GPU 后端路由、加速画布合成、Worker 编码等环节全面收口使其在多种运行环境下可预测地工作新增的gsap_non_transform_motionlint 规则则以修复而非静默的强姿态从源头消灭了逐帧捕获引擎下的布局/文本重排抖动并带动注册表组件整体迁移到 transform 写法——这两条主线共同指向 HyperFrames 的核心理念写 HTML 动画就要以能被可靠逐帧捕获为前提。对组件作者而言v0.7.43 之后最值得养成的习惯就是动画优先 transformx/y/scale/opacity文本间距动画用逐字形展开而不是动画布局属性。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames v0.7.43 深度解读：drawElement 快速捕获可靠性、gsap_non_transform_motion 新规则与创作技能体系升级
HyperFrames v0.7.43 深度解读drawElement 快速捕获可靠性、gsap_non_transform_motion 新规则与创作技能体系升级【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesv0.7.43发布于 2026-07-08是 HyperFrames 在渲染管线可靠性与创作工作流两条主线上的一次集中迭代一方面围绕 ChromedrawElement快速捕获做了系统性可靠性修复GPU 后端探测、Chrome 解析、arm64 固定、加速画布插桩、Worker 编码流水线另一方面在 lint 体系引入全新的gsap_non_transform_motion规则从源码规则层杜绝 GSAP 布局/文本重排动画在逐帧 seek 捕获引擎下的像素级抖动并将注册表组件批量迁移到 transform 写法。本文以该版本发布说明为主体结合 packages/engine 与 packages/lint 源码逐项还原这些变更背后的实现原理与实战意义。版本主题总览v0.7.43 的变更可以归纳为四条主线主线代表变更涉及包drawElement 快速捕获可靠性Chrome 解析补洞、arm64 固定 headless-shell、加速画布插桩、错误码分类cli / engine新 lint 规则gsap_non_transform_motion捕获 text-reflow 布局抖动并迁移注册表组件lint / catalog / skills创作技能体系mode-first briefs、按需安装 workflow skills、品牌 logo 四级级联解析skills / cli / media-useCLI 健壮性--no-clipboard修复、未知 flag 报告、WebM alpha 丢弃告警、对比度审计cli其中 Chrome/drawElement fast-capture reliability fixes 与 new GSAP lint rule catching text-reflow layout thrash 是发布说明明确点名的两大核心下文分别展开。drawElement 快速捕获原理与 v0.7.43 的可靠性收口HyperFrames 的快速捕获路径使用 Chrome 的canvas.drawElementImage(element, x, y)能力它把 DOM 元素的 paint 记录直接读进 canvas绕过完整合成器管线在本地 GPU 上比Page.captureScreenshot快约 46%且 alpha 输出在 GPU 上是像素级无损PSNR∞。核心实现位于 packages/engine/src/services/drawElementService.ts。捕获前置条件与画布注入drawElementImage要求 Chrome 开启--enable-featuresCanvasDrawElement并且合成根必须被一个canvas layoutsubtree包裹否则读不到 paint 记录。injectDrawElementCanvasdrawElementService.ts负责在[data-composition-id]根元素外围注入该画布并同时安装两套逐帧失效机制哨兵元素失效画布内放置一个 1px 的__hf_de_tick元素每次捕获交替切换其背景色。背景色切换是 paint 级 dirtylayout/transform 切换并不会触发 canvas 的paint事件因此即使静态帧也能保证产生一次新快照canvas.requestPaint()这是 html-in-canvas API 设计意图内的失效方式可刷新子树含合成器应用属性的 paint 记录。实现上做了存在性守卫若当前构建不支持则降级为仅哨兵失效。paint 事件同步与两套捕获模式drawElementImage绘制的是 paint 事件时记录的快照脱离 paint 事件调用会拿到上一帧的内容甚至抛InvalidStateError: No cached paint record即历史上 macOS 上的间歇性崩溃。captureDrawElementFramedrawElementService.ts通过syncToPaintEvent参数区分两条路径paint 同步模式macOS / 截图启动的浏览器强制失效后监听 canvaspaint事件在事件处理函数内绘制保证快照是当前帧同时带 250ms 兜底超时避免功能漂移或页面节流时渲染挂死BeginFrame 模式Linux headless-shellsyncfalse该环境下逐帧beginFrame已先行产出新快照直接绘制即可若等待 paint 事件反而会每帧烧掉超时时间。编码格式上png走toDataURL(image/png)保留透明通道jpeg走toDataURL(image/jpeg, q)——必须与下游编码器匹配producer 的流式编码器以 mjpeg 喂给 ffmpeg若误喂 PNG 字节会导致 ffmpeg 解码失败。v0.7.43 的可靠性修复点发布说明中的 Close review gaps in Chrome resolution fix 与 Resolve drawElement to a Chrome build that actually has it5f9ee0b67、8854bad8f表明此前通过某种启发式解析出的 Chrome 构建可能实际并不含drawElementImagev0.7.43 收紧了解析逻辑确保解析结果真正具备该能力Pin arm64 render Chromium to Playwright headless-shellcebce603d则把 arm64 渲染路径固定到 Playwright headless-shell消除平台差异导致的捕获行为漂移。SwiftShader 回退与后端探测resolveDrawElementCaptureModedrawElementService.ts是快速捕获的路由决策函数只要检测到 SwiftShader软件光栅化即 Docker/CI 无 GPU 环境一律回退到 screenshot 基线。原因注释里写得很清楚drawElement 的优势在于跳过 GPU→CPU 的 readback IPC而 SwiftShader 根本没有 GPU两条路径都阻塞在相同的软件光栅化上drawElement 反而多一次 CDP 往返且透明输出时 SwiftShader 还会丢弃提升的合成子层Chromium bug 521434899。实测中硬件 GPU 上 macOS 提速约 1.6×。detectGpuBackenddrawElementService.ts通过WEBGL_debug_renderer_info读取UNMASKED_RENDERER_WEBGL判断是否 SwiftShader并缓存在会话上classifyGpuRendererdrawElementService.ts则把原始驱动字符串归约为低基数桶如metal/apple、d3d11/nvidia、swiftshader/other用于遥测——因为 drawElement 的失败模式被证明与合成器后端强相关原始渲染器字符串是无界的驱动文本直接进遥测会产生高基数噪声。加速画布与 3D 内容的合成修正一个隐蔽问题是webgl/webgl2/webgpu 加速画布通过合成器纹理交换呈现元素从不重绘paint 记录永不失效drawElementImage会整段渲染都服务第一帧快照。instrumentAcceleratedCanvasesdrawElementService.ts在页面脚本运行前用page.evaluateOnNewDocument包装HTMLCanvasElement.getContext把加速画布记入window.__hf_accel_canvases捕获时先将它们设为visibility:hidden在 paint 记录中挖出透明洞再在 DOM paint 之下用drawImage合成实时内容WebGL 上下文还会强制preserveDrawingBuffer: true否则绘制缓冲在每次合成器 present 后被清空drawImage读到的是空白。v0.7.43 中捕获合成还补上了根元素 transform/opacity 修正快照从不烘焙被捕获元素自身的 transform即使静态 transform 也会被渲染为未缩放以及 3D 投影画布threeDProjection.ts的覆盖层合成。Docker 透明输出的截图回退由 frameCapture.ts 的会话初始化路由完成。Worker 编码流水线为了隐藏编码开销drawElementService.ts 实现了 in-page OffscreenCanvas Worker 编码主线程完成 seekpaintdrawElementcreateImageBitmapproduce 阶段后立即把 bitmap 转移给 WorkerWorker 在后台编码 JPEG用__hfFrameReadyPuppeteerexposeFunction绑定回传 base64 给 Node 侧还包含 30 秒编码看门狗、id-1的 worker 致命错误全量拒绝、以及会话复用时的陈旧 promise 清理。produceDrawElementFrameBatch进一步把连续 N 帧的 CDP 往返摊薄为一次drawElementService.ts 起的 P6 原型仅 macOS GPU 同步路径使用。gsap_non_transform_motion从 lint 规则层消灭布局抖动v0.7.43 最重要的新增能力是一条名为gsap_non_transform_motion的 lint 规则实现在 packages/lint/src/rules/gsap.ts。发布说明原文Flag text-reflow props in gsap_non_transform_motion。规则动机为什么布局属性在逐帧捕获下会抖动HyperFrames 的渲染引擎按帧 seek 时间轴捕获画面。当 GSAP 动画的是left/top/right/bottom/margin*这类布局属性时浏览器在布局阶段把子像素位置四舍五入到整数设备像素。快速 tween 下每帧位移大肉眼无感但慢速 tween 或 ease-out 收尾时子像素移动会在连续多帧里四舍五入到同一个像素然后突然跳一个整像素——表现为明显卡顿。而 transformx/y/scale在合成器内做子像素插值任意速度下都平滑。规则覆盖的三类问题规则源码把违规场景分为三类gsap.ts位置类布局属性LAYOUT_FIX映射left/right/top/bottom/margin/marginLeft/marginRight/marginTop/marginBottom每条都有对应的 transform 替换轴 | 布局属性 | transform 等价替换 | | --- | --- | |left/right|x| |top/bottom|y| |margin|x,y| |marginLeft/marginRight|x| |marginTop/marginBottom|y|文本重排属性REFLOW_PROPSletterSpacing、wordSpacing、fontSize。动画这些属性会触发文本重排字形位置被吸附到像素网格卡顿机制与位置属性相同且发生在浏览器布局阶段位于任何画布光栅化之前。width/height被刻意排除——它们有正当的动画用途进度条、揭示规则不想过度误报roundPropsGSAP 的取整选项把 tween 值四舍五入到整数同样产生像素级跳动。修复建议的忠实性规则不是简单报错而是给出逐属性的忠实修复提示gsap.ts位置属性tl.fromTo(#x, { x: -1300 }, { x: 0, ... })这类 transform 等价写法fontSize可替换为scale视觉等价、不重排letterSpacing/wordSpacing不能用统一 scale 代替缩放改变字形大小而非字间间隙需要把文本拆成逐字符元素、各自动画x展开或静态保持最终值。这一点在 Make the reflow-prop fix faithful, not a lossy scale swap6e21072f4中得到强化——修复提示必须是视觉忠实的不能是有损的 scale 交换。豁免机制html-in-canvas 元素规则解析canvas layoutsubtree标签范围通过选择器反查目标元素gsap.ts。对layoutsubtree之内的元素布局不由浏览器合成器完成而是由画布库读取getComputedStyle().left/top子像素值直接绘制到 bitmap因此位置类布局属性动画不会整数吸附、不会卡顿可以豁免。但豁免有两条硬性边界仅位置属性豁免roundProps值取整和文本重排属性字形布局在光栅上游吸附永不豁免分组 tween 不豁免只要分组 tween 还同时命中普通 DOM 元素仍然报错。测试用例 packages/lint/src/rules/gsap.test.ts 系统覆盖了这些语义错误于布局属性、不误报 transform x/y、不误报tl.set()、布局属性roundProps 单次报告、独立gsap.to()捕获、html-in-canvas 豁免、分组 tween 仍触发、字符串标签时间轴 tween、嵌套{}的 onComplete 体、fromTo from-object、文本重排属性、html-in-canvas 不豁免文本重排、字符串字面量 roundProps: 不误报。故意不提供关闭开关值得注意的是规则刻意没有per-line/per-file 的 opt-out区别于 eslint-disable。源码注释gsap.ts明确了立场理念是修复动画而不是静默规则——普通 DOM 上的布局属性动画总有忠实的 transform 等价物。作者即使主观接受卡顿也没有开关可翻这是有意设计而非缺失功能。注册表迁移与 kinetic-letter-in发布说明的 Catalog 与 Internal 部分对应两条迁移动作Add gsap_non_transform_motion rule, migrate registry comps to transforms619a603ea 与 registry/components 下的 HTML 组件Migrate kinetic-letter-in off letterSpacing; document rule design1c0eef835kinetic-letter-in组件从动画letterSpacing迁移到逐字形 transform 展开同时把规则设计文档化。Skills 侧也配套更新Teach transforms-over-layout-props up front58f7dc1c7让创作技能在一开始就灌输优先 transform 而非布局属性的准则。CLI 健壮性--no-clipboard、未知 flag 与 WebM alpha 告警--no-clipboard 的 citty 解析修复hyperframes add命令新增了--no-clipboard支持但修复过程本身很有代表性。命令参数声明packages/cli/src/commands/add.ts的注释揭示了根因参数必须以正向clipboard默认 true声明才能让 citty 的内置--no-name否定语法正确解析--no-clipboard若把字面量no-clipboard声明为参数名citty 会把它解析成不存在的clipboard参数的否定assertKnownFlags于是抛 Unknown flag: --clipboard尽管--help明明展示了该选项。修复后skipClipboard args.clipboard falseCI/headless 场景可以干净地跳过剪贴板复制。相关用法还出现在hyperframes add overlay --dir project --no-clipboard --jsonmedia-treatment.ts。未知 flag 报告与嵌套子命令覆盖Report unknown-flag errors cover nested subcommands (HF#2033)38b27c4d8测试见 packages/cli/src/commands/tts.test.ts。WebM 渲染静默丢弃 alpha 的告警Warn when a WebM render silently drops its alpha channel [P2]f5f94a949 与配套测试 packages/cli/src/utils/webmAlphaCheck.test.tsmp4 透明不适用不告警、mov 原生携带 alpha 不告警、alpha255的假阳性被排除。需要说明的是背景移除管线中.movProRes 4444同样携带 alphapipeline.ts而 alpha 捕获路径不支持 4k 超采样cloud/render.ts渲染 4k 请用 mp4或按合成分辨率渲染 alpha。对比度审计与渲染示例修复Contrast audit reads an elements own opaque background701ae9e9b对比度审计此前可能读到祖先背景导致误判v0.7.43 改为读取元素自身的不透明背景Fix render examples that pass a file as the project dirab129023d修正了 CLI 渲染文档里把文件当作项目目录传入的错误示例。Engine 与 Producer 修复变量作用域与 seek 语义v0.7.43 在渲染引擎层面有六项值得注意的修复音频轨相对data-start引用解析6f8bf5f36音频轨中的相对data-start引用此前可能解析到错误的绝对位置现已按相对语义正确解析子合成变量注入与作用域隔离Inject sub-composition variables on the render path41ad5b469把子合成变量注入放到渲染路径上Scope per-instance variables for repeated sub-composition mounts5ebc5bb10则修复了同一子合成被重复挂载时变量串扰的问题——每个挂载实例现在拥有独立变量作用域Composition CSS 变量在 eval 时到达渲染路径e2c88ef68此前合成级 CSS 变量可能未在求值期生效现在保证在 eval 时即作用于渲染渲染 seek 期间抑制 GSAP 调用副作用5b9b71df2逐帧 seek 时 GSAP 回调的副作用如 onComplete 内修改状态会污染后续帧v0.7.43 在 seek 期间抑制这类副作用ReDoS 安全的 slug 修剪与 getVariables 清理d9368ec05core 的 slug 修剪改为正则回溯安全实现避免恶意/超长输入触发灾难性回溯同时清理了getVariablesfigma 品牌 token 闭环def276524core/cli/lint 三包配合让 figma 品牌 token 以运行时 CSS 变量、--name参数、snippet lint 的完整链路落地。Skills 与 Media Use创作工作流的体验升级发布说明的 Features 首条即 Mode-first briefs, value-first storyboards, and destination defaults across creation workflows17b852784。所谓 mode-first指创建类技能的 brief 不再以通用脚手架开头而是先讲清创作模式mode与目标价值value再展开具体步骤让 Agent 一开始就理解为什么这样创作而非机械套模板value-first storyboards 则让分镜优先陈述视觉价值。其余相关变更按需安装 workflow skills81884a749 目录中的技能集品牌 logo 四级级联4d3cdc3e4Media Use 技能解析官方品牌 logo 时按四级级联逐层回退直到解析出可用的官方资源codex alias-vs-PATH 提示80271863d当 codex 不可用时提示信息解释了 shell alias 与 PATH 查找顺序的常见误区。文档、CI 与工程基建Modal 部署模板bb423dd21 部署指南新增 Modal 平台部署模板与既有的 AWS Lambda、GCP Cloud Run 部署方案并列oxfmt 格式化与 skills manifest 同步b95f2ca25。总结v0.7.43 是一次典型的可靠性优先版本drawElement快速捕获路径在 Chrome 解析、arm64 平台、GPU 后端路由、加速画布合成、Worker 编码等环节全面收口使其在多种运行环境下可预测地工作新增的gsap_non_transform_motionlint 规则则以修复而非静默的强姿态从源头消灭了逐帧捕获引擎下的布局/文本重排抖动并带动注册表组件整体迁移到 transform 写法——这两条主线共同指向 HyperFrames 的核心理念写 HTML 动画就要以能被可靠逐帧捕获为前提。对组件作者而言v0.7.43 之后最值得养成的习惯就是动画优先 transformx/y/scale/opacity文本间距动画用逐字形展开而不是动画布局属性。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考