HyperFrames 动画知识体系全解析：原子规则、场景蓝图、转场与七大运行时适配器

HyperFrames 动画知识体系全解析原子规则、场景蓝图、转场与七大运行时适配器【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文是 HyperFrames 项目中skills/hyperframes-animation/SKILL.md的完整技术导读。该技能文件是 HyperFrames 全部动效知识的入口它把动画创作拆解为原子规则rules、多阶段场景蓝图blueprints、场景转场transitions、**通用动效技法techniques与运行时适配器adapters**五个层次并强制所有动画服从单一暂停时间线、可 seek、确定性渲染的框架契约。读完本文你将掌握如何在 SKILL.md 的指导下用 2–4 条规则快速拼装一个场景、何时该加载 22 个成品蓝图之一、如何为多场景组合挑选与实现转场、以及 GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU 七种动画运行时在 HyperFrames 中的正确打开方式。一、技能文件的定位一份路由表 契约型技能skills/hyperframes-animation/SKILL.md本身并不承载全部实现它是一张路由表按你想做什么 → 去读哪个文件的方式组织把创作时的心智负担分摊到五类文档上。层次入口文件职责原子规则rules-index.md rules/name.md可复用的单条动效配方入场、相机、计数器、SVG 描边……场景蓝图blueprints-index.md blueprints/id.md从 178 条黄金产品发布视频中逆向出的时间编码整场模板场景转场transitions/overview.md catalog.mdcss-*.md两个镜头之间如何衔接CSS 与 WebGL shader 两套实现通用技法techniques.md13 种更宏观的动效设计模式SVG 路径绘制、Canvas 2D、CSS 3D……运行时适配器adapters/*.md12 个文件每种动画运行时在 HyperFrames 约束下的 API 参考技能文件的 description 字段即 SKILL.md 的 frontmatter明确声明了它的适用范围任何动效任务——选 2–4 条规则组合或加载一个蓝图或查询运行时专属 APIGSAP eases / Lottie player / Three.js mixer。也涵盖对已有组合编舞动画映射的审计以及 24 个具名文字动画效果。HyperFrames 原生特性单一暂停时间线、seek 安全、确定性。二、创作路径一组合原子规则默认推荐SKILL.md 明确给出默认工作流从rules-index.md挑 2–4 条规则用一条暂停的 GSAP 时间线把它们粘起来即可。这比从蓝图起步更快、产出的代码更少。2.1 规则的共同契约rules-index.md开头把每条规则都默认遵守的契约集中陈述了一次各规则文件不再重复只运行在一条注册于window.__timelines的暂停GSAP 时间线上绝不自动播放绝不建第二条时间线双向 seek 安全使用fromTo显式声明起始状态保证 t0 时画面正确重新接管目标时用immediateRender: false使用绝对值而不用相对值补间动画状态必须是时间线时间的纯函数不引入可变跟踪器确定性禁止Math.random()、禁止Date.now()只允许基于索引的伪随机与预烘焙时间表重复次数必须有限绝不用repeat: -1只动画变换与纯绘制属性width/height/top/left补间被禁止改用 scale/translate 代理、遮罩或anchored-layout-expand规则组内 stagger 要有上限items × stagger ≤ ~0.5s让一次入场读起来像一个节拍动画元素上不得写 CSStransition它们脱离 seek 独立插值会产生闪烁大量补间同时运行时用will-change: transform提示合成器单场景组合可以在构建期量 DOMoffsetHeight、getBoundingClientRect多场景蒙太奇中靠后的 clip 可能尚未布局必须使用手工编写的 CSS 匹配常量规则代码片段只展示机制 DOM不包含classclipdata-*的场景脚手架脚手架属于hyperframes-core。2.2 规则库全景48 条rules-index.md按标签把规则分为八个族实际文件为 48 个rules/*.md文字与排版hacker-flip-3d字符级 3D 翻转 确定性字形替换解密、vertical-spring-ticker老虎机式纵向滚动、counting-dynamic-scale随数值放大的计数器、discrete-text-sequence按时间阈值整段换字的非线性打字、asr-keyword-glowASR 词时间戳驱动的关键词辉光、3d-text-depth-layers多层偏移文字堆叠出 3D 挤出、context-sensitive-cursor分段变色 方波闪烁的光标、dynamic-content-sequencing由脚本数组预计算时间窗的纯内容驱动时长、kinetic-beat-slam打击乐式动能排印、gradient-text-sweepbackground-clip: text渐变扫过字面、chromatic-glitchRGB 分离毛刺基于量化时间线的确定性哈希。数据与统计stat-bars-and-fills增长条 / 进度环 / 星级评分、chart-scrub-readout沿烘焙数据折线拖动的游标读数头。相机与视口coordinate-target-zoom双层包裹反平移的非中心缩放、camera-cursor-tracking锁定移动焦点的两阶段虚拟相机、multi-phase-camera拉远 / 聚焦 / 推近的顺序缩放、viewport-change单.world包裹层的translate scale复合变换、3d-camera-flight唯一在 Z 轴旋转飞行的透视相机、depth-of-field-blur选择性焦外虚化。布局与网络avatar-cloud-network椭圆环头像 SVG 连线、3d-page-scroll倾斜 3D 网页卡片内滚、center-outward-expansion从屏心向四周散开、split-tilt-cards对置rotationY的对称卡牌、orbit-3d-entry3D 翻转入轨后持续椭圆公转、ai-tracking-box黄色 L 形角标 AI 检测框、depth-scatter-assemble确定性 3D 深度云聚散、anchored-layout-expand锚定容器沿单轴伸缩 内容回流用遮罩/代理实现。SVG 与图标svg-icon-enrichmentSVG 内部元素微动画注意用setAttribute(transform, ...)显式旋转中心、svg-path-drawstroke-dasharray/dashoffset描边自绘。空闲与环境sine-wave-loop正弦呼吸空闲动效、ambient-glow-bloom无触发源的柔光辉光峰值透明度 ≤ ~0.45。转场与运动reactive-displacement物理碰撞置换、press-release-spring按键压缩 弹簧回弹、physics-press-reaction两段 scale 模拟点击弹簧、cursor-click-ripple光标移动 下压 扩散涟漪、cursor-drag拖拽动词全集、multi-cursor-choreography2–4 个确定性航路表协奏、control-target-sync控件与目标同拍联动、scale-swap-transition同中心双元素形变互换、card-morph-anchor容器形变锚定过渡、theme-crossfade-morph整主题原位换肤、spring-pop-entrance标准入场弹出原语、motion-blur-streak伪方向速度模糊、waterfall-entry瀑布级联入场二进制 0→1 显隐、particle-burst确定性粒子/彩带≤ ~40 个、nudge-curve慢-快-慢三阶段群组滑动。效果配方从 hyperframes-creative 移入gsap-effects打字机 / 音频可视化等可落地的 GSAP 时间线块、css-marker-patterns纯 CSS 马克笔高亮画法。2.3 展开一条规则spring-pop-entrance的标准入场以rules/spring-pop-entrance.md为例看规则文件的写法。它的核心观点非常明确顺滑优于弹跳——默认用power3.out或更快前段的expo.out长尾减速落到静止尺寸无过冲back.out弹跳是 Agent 生成视频中最常见的败笔仅在明确娱乐化场景中作为罕见例外使用。!-- 标准场景 clip 内部hyperframes-core 脚手架 -- div classpop-hero idhero{heroLabel}/div div classpop-grid div classpop-item{itemA}/div div classpop-item{itemB}/div div classpop-item{itemC}/div /div.pop-hero, .pop-item { transform-origin: 50% 50%; /* 原位弹出锚定变体才移到源点 */ will-change: transform; }// 单个 hero 弹出——顺滑长尾落定无过冲 tl.fromTo(#hero, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: POP_DUR, ease: power3.out }, ENTRY_AT, ); // 组内 stagger 弹出——读作一个到达节拍 gsap.utils.toArray(.pop-item).forEach((el, i) { tl.fromTo(el, { scale: 0, opacity: 0, y: Y_RISE }, { scale: 1, opacity: 1, y: 0, duration: POP_DUR, ease: power3.out }, GROUP_ENTRY_AT i * STAGGER, ); });规则附带的参数表给出可直接使用的取值范围token范围说明EASE默认power3.outexpo.out更猛back.out(OVERSHOOT)仅限娱乐变体POP_DUR0.4–0.7s越短越紧hero 必须在t ≤ 0.5s内可见STAGGER0.04–0.08smin(0.06, 0.5 / ITEM_COUNT)自封顶ITEM_COUNT3–9超过 9 个 stagger 就失效改用扫屏/扫掠揭示Y_RISE0–32px必须小不能读成上滑入场ROT_FROM−10°–10°仅娱乐变体按索引正负交替ENTRY_AT0–0.4s留一拍安静但主体 t ≤ 0.5s 落地关键约束还包括组内ITEM_COUNT × STAGGER ≤ ~0.5s入场必须在fromTo里显式声明折叠态绝不能依赖 CSS 隐藏起始seek 下会先渲染可见帧transform-origin: 50% 50%是原位弹出的前提入场是有限事件持续空闲动效要另起一条更靠后的sine-wave-loop补间。变体覆盖平静落定 / 坚实落定 / 精确物理落定springEase({ response: 0.4 })/ 源点锚定 / 落入已占槽位 / 罕见弹跳六种姿态。三、创作路径二加载多阶段场景蓝图SKILL.md 建议在两种情况下放弃手拼规则、改为加载蓝图场景恰好命中某个现成的多阶段模板品牌揭示、社会证明等复用其阶段流水线能节省大量创作时间或需要一个 4–5 阶段复杂编舞的可运行 ground-truth 代码。蓝图入口是blueprints-index.md每个条目指向blueprints/id.md的完整配方。3.1 蓝图是什么蓝图blueprint是产品无关的、时间编码的整场模板——形如Scene N (a–b s): …带[slots]和一个具名招牌动作signature move。它从两轮挖掘中的 178 条黄金产品发布视频逆向而来另有 13 个传统蓝图被反译成同格式。它编码了整场的完整时长——揭示节奏对齐口播VO而不是在 t0 一股脑倒出——所以实例化一个蓝图在结构上保证了内容持续到达而非冻结。blueprints-index.md明言Step 4视觉设计为每一帧实例化一个蓝图或当没有合适蓝图时从运动词汇表组合。3.2 22 个蓝图速览blueprints-index.md列出全部 22 个蓝图每个都标注了适用角色Hook / Problem / Product_Intro / Key_Feature / Benefits / Social_Proof / CTA / Brand_Outro与时长范围例如kinetic-type-beats3.0–12.9s6 个角色的万金油动作即换字——固定一行在屏内硬切换 token或整屏节拍构建到 spring-pop 收尾typewriter-reveal3.6–7s真人般打字含编辑→ 折叠 → 弹出品牌收尾或常驻品牌标记 子行打进 CTAspatial-pan-stations7–10s一张超大画布上预置命名站点单一虚拟相机横向/斜向平移逐一聚焦camera-journey5.6–11.1s真实视口相机当叙述者多段动机化旅程俯冲 → 节拍触发 → 飞向后果/重定位 → 落地推近zoom-out-workspace-reveal6.8–11s一次连续减速拉远从特写揭示所在整体设计工具工作区 / 多窗格 Agent 工作区constellation-hub5–8s图标节点围绕中心弹入成环再以相机推近 / 公转 / 点击坍缩三种方式收束grid-card-assemble3.0–10.5sN 个条目瀑布式自组装成网格或列表后定格logo-assemble-lockup4.4–11s品牌标记从零件拼装 / 零基础弹簧绽放 / 无缝变体链中存在于屏上cursor-ui-demo4.0–12.9s可见自定义光标驱动重建的应用 UI镜头追逐交互device-surface-showcase5–11.3s设备样机 / 悬浮窗口为 hero屏幕循环真实流程prompt-type-submit-generate5.2–12sAI 时代演示镜头——提示词打进真实产品输入框机器作答流式答案 / 动作日志 / diff 卡 / 图表 / 生成产物agent-progress-theater4.2–11.6sAgent 工作的状态剧场——加载器旋转、状态短语轮换收据级联打勾panel-edit-live-sync5.3–11.9s)双分舞台——检查器/编辑器面板与目标表面同拍联动transcript-scroll-artifact-reveal5–11.8s沿超长全出血内容表面纵向行进再以单个焦点交互转入产物揭示dataviz-countup4–12s数字与图表为 hero相机推穿数据后落在唯一主指标上titlecard-reveal3–5s一次克制移动 静帧的呼吸/落定镜头comparison-split4–6s两个等权重条目镜像翻书式倾斜入场内侧边缘药丸徽章弹跳收句overwhelm-surround6–9s堆积制造的窒息感中心元素变成观众自己的头像四周合围ticker-takeover5–7s打字引导 可选词轮换后hero 从屏外撞入物理推开文字fixed-anchor-cycle6.6–11.1s一个元素始终钉住不动周边区域轮换多种离散状态video-text-pivot6–8s产品视频滑开让位给 hero 统计再让位给动能文字cta-morph-press4–6s静止品牌标记同中心凝缩成 CTA光标到达并落地一次拟人点击。3.3 蓝图挑选流程Picking guidance在角色菜单中找到该帧的role与 storyboard 帧的type枚举 1:1 映射hook、pain_point、product_intro、feature_showcase、benefit_highlight、social_proof、cta、branding挑形状契合的蓝图——这是软菜单叙事优先蓝图只建议、不决定节拍打开blueprints/id.md读时间编码模板、[slots]与招牌动作选择姿态——Reproduce槽位干净映射、Adapt结构吻合但内容/表面不同保留招牌动作、或Compose无匹配则从运动词汇表构建切勿强行套用错误蓝图若菜单无匹配就自由组合——但仍须把揭示节奏对齐整场 VO。3.4 展开一个蓝图typewriter-reveal以blueprints/typewriter-reveal.md为例看蓝图文件的信息密度intent真人般打字含编辑随后折叠到一点并弹出品牌收尾或常驻品牌标记下子行打进最终 CTA——让有人在打字成为镜头引擎。roles servedHook打一行 relatable 的问题/陈述 → 折叠 → spring-pop 品牌Brand_Outrohero 标记整场钉在屏心/顶部子行换打最终 CTA。shot structure三场含变体Scene 10.0–~2.0s实心背景上光标逐字打字Hook 变体可包进圆角输入框并整体左移平移ticker 推挤Scene 2~2.0–4.5s原地修改文本退格重打 vs 硬切/遮罩擦除子行Scene 3 收束——Hook 变体折叠消失后品牌 spring-poplogo 锁版 / 产品 UI 子变体Brand_Outro 变体在子行槽位落定最终 CTA 辉光环。rule mapping每个动作动词都映射到具体规则——打字 →discrete-text-sequence光标闪烁 →context-sensitive-cursor描边入画 →svg-path-draw涟漪环 →cursor-click-ripple品牌弹出 →spring-pop-entrance同中心形变互换 →scale-swap-transitionUI 状态翻转 →hacker-flip-3d辉光 →asr-keyword-glow。这条映射就是蓝图实例化时把动作落到规则的活教材。camera modifier两种角色都不需要相机——Hook 的 ticker 推挤是元素平移而非相机运动由camera-cursor-tracking建模。四、场景转场多场景组合的强制规则transitions/overview.md开篇即声明多场景组合的四条不可协商规则SKILL.md 的路由表也要求转场创作必须从overview.md开始、动手前必读catalog.md每个组合都必须有转场没有例外——无转场就是跳切每个场景都必须有入场动画元素必须动进来透明度、位置、缩放等。必须用gsap.fromTo()而非gsap.from()——from()是动画到当前 CSS配上 CSSopacity: 0就成了 0→0 空操作元素永远不出现出场动画被禁用最后一幕除外绝不用gsap.to()把元素在转场触发前移出——转场本身就是出场出场景内容在转场开始时必须完全可见最后一幕例外最后一幕可以淡出元素例如片尾淡黑。// ❌ 禁止——先把出场景淡出下一场景再跑入场这是带下潜的跳切不是转场 tl.to(#s1, { opacity: 0, duration: 0.4 }, 4.0); tl.from(#s2 .headline, { y: 40, opacity: 0 }, 4.4); // ✅ 正确——出与入在同一个时间点 T 同时动画运动本身就是交接 const T 4.0; tl.to(#s1, { yPercent: -100, filter: blur(8px), duration: 0.5, ease: power3.in }, T); tl.fromTo(#s2, { yPercent: 100 }, { yPercent: 0, duration: 0.5, ease: power3.out }, T);overview 还给出三张实操决策表能量 → 主转场Calm0.5–0.8ssine.inOut/power1→ 模糊交叉淡化 / 焦点拉动Medium0.3–0.5spower2/power3→ 推动滑入 / 错落块High0.15–0.3spower4/expo→ 推穿缩放 / 过曝。选一个主转场占场景变化的 60–70% 1–2 个点缀绝不为每个场景换一种。情绪 → 转场类型暖/邀请 → 漏光、模糊淡化、焦点拉动冷/临床 → 挤压、拉远、百叶窗编辑/杂志 → 推动、纵向推动、斜向分割科技/未来 → 网格溶解、错落块、色差紧张/前卫 → 毛刺、VHS、涟漪戏剧/电影 → 推穿、重力下落、过曝奢华 → 焦点拉动、色彩沉黑。叙事位置开场用最有辨识度的转场0.4–0.6s相关点之间用一致的主转场0.3s话题切换用不同于主转场的点缀高潮用最大胆的 accent回落用轻柔转场0.5–0.7s结尾最慢最简0.6–1.0s。4.1 实现与 CSS / Shader 双轨转场分 CSS 与 WebGL shader 两条实现轨道类别对照见下表两者都是第一等公民且可以混用shader 由hyperframes/shader-transitions包提供不要在组合里手写原始 GLSL。类别CSSShader (WebGL)推动/滑动Push slide、vertical push、elastic push、squeezeWhip pan缩放/推近Zoom through、zoom out、gravity drop、3D flipCinematic zoom、gravitational lens揭示/遮罩Circle iris、diagonal split、clock wipe、shutterSDF iris溶解Crossfade、blur crossfade、focus pull、color dipCross-warp morph、domain warp覆盖Staggered blocks、horizontal/vertical blinds—光Light leak、overexposure burn、film burnLight leak (shader)、thermal distortion畸变Glitch、chromatic aberration、ripple、VHSGlitch、chromatic split、ridged burn、ripple waves、swirl vortex图案Grid dissolve、morph circle—var tl HyperShader.init({ bgColor: #000, accentColor: #6366f1, scenes: [s1, s2, s3, s4], transitions: [ { time: 4.0, shader: sdf-iris, duration: 0.7 }, // WebGL shader { time: 8.5, duration: 0.8 }, // 无 shader → CSS 交叉淡化 { time: 13.0, shader: domain-warp, duration: 0.6 }, ], });HyperShader负责所有场景的可见性管理无论转场类型让它创建时间线不要把timeline:传进init()之后把节拍动画加到返回的tl上。4.2 Shader 兼容的 CSS 规则html2canvas 捕获约束Shader 转场通过 html2canvas 把 DOM 场景捕获成 WebGL 纹理而 canvas 2D 渲染管线与 CSS 并不完全一致overview 列出 6 条防伪影规则渐变中禁用transparent关键字canvas 会插值成黑色零透明度细于 4px 的元素禁用渐变背景捕获期间可见元素禁用 CSS 变量var()不可捕获的装饰元素标data-no-capture渐变透明度不得低于 0.15每个.scenediv 必须显式声明background-color且与init()里的bgColor一致否则纹理渲染成黑。此外避免产生可见重复几何图案网格瓦片、六边形、均匀圆点阵——有机噪声FBM、域扭曲是好的几何重复一眼假。五、运行时适配器七种动画运行时SKILL.md 的路由表列出 12 个适配器文件覆盖七种运行时并给出运行时挑选原则GSAP95% 动效的默认选择——覆盖时间线编排、变换、缓动、stagger本技能所有原子规则均基于 GSAPLottie资产自带预制时间线通常是 After Effects 导出Three.js3D 场景、相机运动、shader 驱动视觉Anime.jsGSAP 杀鸡用牛刀时的轻量补间CSS简单重复母题、装饰、微光——零 JS 动画成本WAAPI原生浏览器关键帧无 GSAP 依赖TypeGPU / WebGPUGPU 渲染画布粒子、液态玻璃、自定义 shader。多运行时可以在同一组合中共存每个运行时把自己的实例注册到运行时专属全局上HyperFrames 就能一次性 seek 全部实例。5.1 GSAP 适配器被 HyperFrames 约束的 GSAPadapters/gsap.md是受 HyperFrames 约束的 GSAP 参考。核心契约通过 GSAP 运行时适配器同步创建一条暂停时间线注册到window.__timelineskey 必须与组合根的data-composition-id完全一致。script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); tl.from(.title, { y: 48, opacity: 0, duration: 0.6, ease: power3.out }, 0); tl.to(.accent, { scaleX: 1, duration: 0.5, ease: power2.out }, 0.25); window.__timelines[main] tl; // key 必须等于组合根的>div idorb classclip orb>node skills/hyperframes-animation/scripts/animation-map.mjs composition-dir \ --out composition-dir/.hyperframes/anim-map该脚本读取注册在window.__timelines上的每条 GSAP 时间线枚举补间在每条补间上采样 N 个点的包围盒bbox计算标志位输出animation-map.json。完整命令行选项包括--frames N每补间采样点数默认 6、--min-duration S低于此时长视为微补间跳过默认 0.15s、--width/--height默认 1920×1080、--fps默认 30经parseFps校验。依赖解析遵循先当前项目、后捆绑包策略HYPERFRAMES_SKILL_PKG_VERSION环境变量仅在技能运行于捆绑 CLI/技能安装之外、需要显式钉住 bootstrap 版本时设置。输出报告的组成对应animation-map.mjs的实现逐补间条目selector、drivertarget/onUpdate、targets 数、属性列表、起止时间与时长、ease、bboxes、flags、人读摘要describeTween生成的如 #heroanimates scaleopacity over 0.50s (power3.out). moves 0px up… fades in. ends at (…)标志位degenerate零面积、offscreen越界含半出界容差、invisible全程透明度 0.01、paced-fast 0.2s 且含位移/透明度/缩放属性、paced-slow 2s、collision与另一动画元素重叠面积 30%由markCollisions两两检测组合级分析ASCII 时间线图buildTimeline60 列字符 ≈ 时长、密度桶每 0.5s 的活动补间数、死区findDeadZones≥ 1s 无动画的区间标注刻意停顿还是漏了入场、stagger 检测detectStaggers≥ 3 个同属性、同时长、时间相邻的补间计算间隔一致性、元素生命周期buildElementLifecycles首现/末动时间、补间数、终态可见性与最终位置、快照captureSnapshots在 0/25%/50%/75%/end−0.1s 五处 seek 后枚举可见元素。脚本对两类特殊补间有专门的建模onUpdate 代理驱动补间一个普通对象、在 onUpdate 里施加运动targets()不含 Element——保留其时间跨度但不测几何driver 标记为onUpdate父级驱动的子补间——若子补间自身不改变任何值则跳过否则会把占位补间误报为活动掩盖真实死区。审计目标是死区、stagger 一致性、生命周期警告配套测试见scripts/animation-map.test.mjs与scripts/animation-map-sampling.test.mjs。七、必须遵守的确定性约束Critical ConstraintsSKILL.md 明确要求先满足hyperframes-core的 Non-Negotiable Rules单一暂停时间线、data-duration决定长度、无Math.random/Date.now/performance.now、无repeat: -1、无页面加载期对后场 clip 的gsap.set、无display或裸visibility补间、不在async/setTimeout/Promise内构建时间线并允许 core 认可的两个例外——GSAPautoAlpha与显式时间线边界的零时长可见性设置且只能用于非 clip 元素或 clip 内包装器框架拥有.clip生命周期。在此之上本技能补充两条动画工艺约束预计算布局常量——绝不在补间时用getBoundingClientRect()推导位置。补间时的 DOM 测量会失同步因为渲染器是并行采样的坐标必须在组合 setup 时算一次并复用。空间运动只用 GSAP 变换别名x、y、scale、rotation——core 的允许清单还放行非空间属性的opacity/color/backgroundColor/borderRadius但布局变化永远不用width/height/top/left。gsap.md的 Do Not 清单还补充同一 SVG 元素上不要同时用svgOrigin和transformOrigin能用时间线排序就不要用delay链式串联不要在 DOM 存在前创建补间不要用无限repeat: -1。八、实践工作流总览把技能文件与源码对照后可以总结出一条从需求到成片的完整链路选运行时默认 GSAP资产带预制时间线用 Lottie3D 用 Three.js轻量补间用 Anime.js重复母题用 CSS原生关键帧用 WAAPIGPU 画布用 TypeGPU。选创作路径命中现成多阶段模板 → 查 blueprints-index.md 按角色挑选 → 打开blueprints/id.md实例化Reproduce / Adapt / Compose否则从 rules-index.md 挑 2–4 条规则组合。写代码按 hyperframes-core 契约建classclip场景一条暂停时间线注册到window.__timelineskey 等于data-composition-id用fromTo 绝对位置 有限 repeat 保证双向 seek 安全与确定性。接转场多场景组合必须读 transitions/overview.md 选能量/情绪对应的主转场动手前再读catalog.md拿 GSAP 代码与定位新场景 → 动画出场景 → 交换 → 动画入场景 → 清理覆盖层的硬规则shader 转场注意 6 条 html2canvas 兼容规则。审计node skills/hyperframes-animation/scripts/animation-map.mjs composition-dir --out …/anim-map检查死区、stagger 一致性、碰撞与生命周期警告。校验用npx hyperframes lint / check / snapshot / preview / render见hyperframes-cli技能完成静态检查、基准快照对比与最终渲染。可运行的整场示例散落在skills/hyperframes-animation/examples/brand-reveal-assemble-zoom.html、comparison-split-cards.html、hook-counter-burst.html、proof-logo-chain.html、workflow-approve-press.html等 13 个文件它们是把规则与蓝图落到真实 DOM/GSAP 的最佳参考。整个技能体系与hyperframes-core组合结构、data 属性、子组合、确定性渲染契约、hyperframes-creative调色板、字体排印、旁白、节拍规划、hyperframes-clilint/check/snapshot/preview/render 命令互为补充共同构成 HyperFrames 面向 Agent 的完整动画创作知识栈。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考