HyperFrames motion-graphics 路线用 HTML 制作 10 秒内的设计主导运动图形【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读motion-graphics是 HyperFrames 路由体系中的一条专职工作流面向运动即信息的短视频单元——动态字排kinetic type、数字滚动、图表冲击、Logo 片尾、标题动画、下三分之一字幕条、地图动效与真实素材融合镜头。本文将围绕这条路线的输入/输出契约与访谈规则展开并结合skills/motion-graphics工作流的分类体系、七步执行管线与源码级约束说明如何从一句触发语到一份可渲染的 MP4 或透明覆盖层。路线契约输入、输出与触发词HyperFrames 的路由体系为每条工作流维护一个小型契约文件供路由层在惰性安装工作流技能之前读取。motion-graphics路线的契约记录在 routes/motion-graphics.md其定义如下输入Input一个短的设计主导单元通常小于 10 秒无旁白运动本身就是信息。典型形态包括kinetic type动态字排、统计数字滚动stat/count-up、图表冲击chart hit、Logo 片尾logo sting、动画标题、下三分之一字幕条lower-third、地图动效、推文/标题/网页高亮以及素材融合镜头asset-fusion。输出Output一个短 MP4或带透明通道的 alpha WebM/MOV 覆盖层。触发词Triggersan 8s logo sting一个 8 秒 Logo 片尾、animate this stat让这个数字动起来、kinetic-type intro动态字排开场、animate this title让这个标题动起来、transparent lower-third overlay透明下三分之一覆盖层。工作流技能层面的完整描述与上述契约一致并做了扩充motion-graphics/SKILL.md 将其归纳为短、设计主导、无旁白、运动即信息通常 10s最长约 30s、无配音、无真人主体输出 MP4 或透明覆盖层更长/有旁白/多场景 →/general-video。为什么它是一条独立路由在 HyperFrames 的创作路由表中hyperframes/SKILL.md 的## 2. Route fresh creation表按优先级匹配交付物而非措辞motion-graphics排在第六位优先级请求特征工作流6创建明确的短、无旁白、运动优先单元通常 10s/motion-graphics同表还给出了消歧规则直接划定了这条路线的边界当单元无旁白且运动即信息时短动画标题、Logo 片尾、统计冲击、图表冲击、地图冲击或独立下三分之一 →/motion-graphics静态标题卡、有旁白序列、较长蒙太奇或自定义循环 →/general-video。明确的短运动图形可以使用 URL、推文、文章或截图作为素材来源而泛化的把这个网站做成视频请求 →/product-launch-video。在 capability-menu.md 的能力菜单中真实地图场景Real map scenes一行将地图能力的主场明确挂靠在motion-graphics下通过grounding/locate.mjs地理编码与categories/maps/含bake-basemap.mjs得到确定性烘焙底图 定位标记。访谈规则自主设计的边界与动辄多轮提问的叙述型路线不同motion-graphics的访谈条目 routes/motion-graphics.md 明确规定天然自主Autonomous by design整个流程中至多一个问题且该问题由 director 步骤拥有。除确认输入外没有任何 must-have确认后直接路由。Run-shape两者皆非——成片只有几秒storyboard分镜板与 companion 会话共作模式对此毫无增益。Front-door capability offer跳过——director 的一问题上限具有权威性前端能力推荐轮被整体略过。这与 intent-interview.md 第 7 步当所选路线文件要求跳过前端能力推荐时跳过此步的规则相互印证。工作流执行层面motion-graphics/SKILL.md 亦声明意图层直接路由至此不做 run-shape 提问渲染仍由用户把关——校验与证明快照通过后必须询问先预览还是直接渲染问题原文规范见../hyperframes-core/references/brief-contract.md。分类体系先决定是否需要搜索motion-graphics工作流的第一步决策是这个镜头是否需要搜索该分叉将全部类别一分为二motion-graphics/SKILL.md。形式类别Form categories——无需搜索内容由用户提供类别意图依赖kinetic-type有力的台词/引言/标题文字优先的运动caption-*系列 block 动画规则stat单一英雄数字 / 滚动计数 圆环apple-money-count/rules/{counting-dynamic-scale, stat-bars-and-fills}charts由数据驱动的柱/线/饼/竞赛/百分比data-chartblocklogo-revealLogo 片尾 / 品牌锁版用户提供 Logologo-outro/rules/svg-path-drawlower-thirds姓名/标题条、标注、社交覆盖层caption-* registry 覆盖层 blockmaps地理动效——高亮区域、连接地点、缩放到位置矢量车道或烘焙底图车道us-map/world-map家族 bake-basemap.mjs搜索驱动类别Search-driven categories——先搜索再按内容类型动画RWA 路径返回内容类别动画方式网页 / 链接webpage网页/UI 动画滚动、揭示、光标、标注新闻文章news标题揭示 来源卡片 关键事实标注推文tweet动画推文卡片图片 / 实体asset-fusion素材的几何形状变成图表RWA 叙境融合纯代码/文字类别如kinetic-type、多数charts/stat的asset_needs为空直接从计划跳到设计只有声明了素材的类别才走素材获取阶段。七步执行管线motion-graphics/SKILL.md 以阶段表定义了完整管线所有产物写入videos/project-name/阶段执行者主产物initBashhyperframes.jsonplan子代理——先决定是否搜索 分类 素材策略shot-plan.json草稿source ◇Bash——media-use 解析asset_needs为空则跳过assets/assets/index.mddesign子代理——围绕已解析素材设计镜头shot-plan.json最终版build子代理——复用优先的合成compositions/index.htmlverifyBash——lint、check、证明快照失败则修复snapshots/contact-sheet.jpgapprove询问预览还是渲染等待回答明确的渲染批准renderBash——hyperframes renderrenders/video.mp4或透明覆盖层Step 0 — 初始化项目目录使用用户给定的目录名否则用意图生成短横线命名subject-motion。仅当$PROJECT_DIR/hyperframes.json不存在时PROJECT_DIR${MOTION_GRAPHICS_DIR:-videos/project-name} mkdir -p $(dirname $PROJECT_DIR) npx hyperframes init $PROJECT_DIR --non-interactive --exampleblank --skillmotion-graphics约束绝不在工作区根目录执行hyperframes init绝不在PROJECT_DIR内嵌套另一个hyperframes/每条 Bash 命令都以(cd $PROJECT_DIR ...)子 shell 形式执行。Step 1 — 计划Director 第一部分派发一个子代理prompt 为完整agents/director.md 派发上下文其任务决定是否需要搜索不需要 → 选形式类别内容用户提供asset_needs: []需要 → 在asset_needs[]中输出搜索计划news/web/tweet/image 双极查询具体搜索驱动类别由 Step 2 返回的内容类型确认。写出草稿shot-plan.json信封 已选形式类别或搜索意图 asset_needs 一段镜头简介schema 见 shot-plan-ir.md。Step 2 — 素材获取 ◇Bash条件执行若asset_needs非空通过 media-use 解析素材搜索/生成/抓取 → 冻结的项目本地路径 台账。若为空直接跳到 Step 3。搜索/提供商不可用时优雅降级类别回退为无素材模式并记入context.log。Step 3 — 设计Director 第二部分派发子代理围绕可用素材设计镜头挑选 catalog block hyperframes-animation规则/蓝图、布局、运动、节拍对asset-fusion还需产出element_positions与取色板。最终确定shot-plan.jsoncontent.blockcontent.customize 各类别专属content。Director 的设计启发式agents/director.md强调运动即信息钩子在约前 0.5 秒内落地一个主导母题超过约 2.5 秒需做模式打断只改变一件事关键元素保持可读 ≥ 约 0.3 秒节拍可提前约 0.1 秒以获得感知同步。Step 4 — 构建Builder复用优先派发子代理复用优先npx hyperframes add block后就地定制仅手写 gap 与 asset-fusion 的 affordance 绑定。输出compositions/index.html须遵守 HyperFrames 契约暂停的 GSAP 时间线挂在window.__timelines、classclip 稳定 id、tl.seek(0)、确定性。Step 5 — 校验(cd $PROJECT_DIR npx hyperframes lint .) (cd $PROJECT_DIR npx hyperframes check .) (cd $PROJECT_DIR npx hyperframes snapshot --at proof-times)证明时间点需覆盖开场状态、标志性动作与最终定格。检查生成的 contact/snapshot 图。任一关卡失败则派发修复子代理agents/finalize.md做一轮就地修复后重跑失败关卡绝不通过修改固定时长来掩盖缺陷。Step 6 — 批准与渲染问一个问题先预览还是直接渲染选预览则打开 Studio(cd $PROJECT_DIR npx hyperframes preview --background)获得明确渲染许可后才执行(cd $PROJECT_DIR npx hyperframes render . --skillmotion-graphics -q high -o ./renders/video.mp4) # 透明覆盖层变体--format webm 或 mov续跑表管线支持从任意中断点续跑motion-graphics/SKILL.md## Resume table无shot-plan.json→ Step 1有asset_needs无assets/→ Step 2shot-plan.json已定稿无compositions/index.html→ Step 3/4index.html存在但无证明快照 → Step 5校验通过但无已批准渲染 → Step 6已批准渲染存在 → 校验输出后汇报。类别模块的纵深实现每个类别对应categories/id/module.md规划 构建规则。以下为仓库中已确认的类别实现要点。kinetic-type文字即主角kinetic-type/module.md 规定样式优先若项目有frame.md/design.md/DESIGN.md优先级frame.md→design.md→DESIGN.md必须读取并使用其精确调色板/字体/约束无规格时选择命名样式或提问。文案按意义/气息切分为场景英文约 3–7 词、中文约 4–12 字标记Hook → Build → Punch → Resolve每场景 1–2 个emphasis_words配emotionmotionbeats。构建时优先选用 18 个caption-*block 之一如caption-kinetic-slam、caption-editorial-emphasis否则手写一个全时长.clip、每场景一个 flex 居中的.group、场景入场用显式gsap.fromTo()。stat单一英雄数字stat/module.md内容为{ value, prefix ($), suffix (% / x / K-M-B), label, ring }约 4–6 秒。优先复用apple-money-count金融风$ 计数器 绿色闪光 金币爆发 SFX否则手写计数滚动由时间线驱动——用onUpdate将代理对象{v:0}补间到目标并写出格式化数字可 seek 安全绝不使用 setInterval/墙钟font-variant-numeric: tabular-nums减速缓动约 1.2–1.6 秒后定格终值圆环经stroke-dashoffset与计数同步完成标签在数字落地之后淡入先值后义。charts一个图表一条信息charts/module.md内容为{ type: bar|line|pie|race|pct, data[], labels[], headline, axes }race类型要求累计/分阶段数据。复用data-chart动画柱线、交错揭示、数值标签其数据烘焙在脚本内而非--variables标志因此复用 add 就地编辑。data-chart未覆盖的 gap饼/环、bar-chart-race、环/百分比手写D3/visx 做数据→几何GSAP 做运动。典型签名动画柱交错生长、线stroke-dashoffset绘制、饼径向扫过、环填充、KPI 计数、竞赛重排。另有dashboard-skeleton 变体顶栏放真实测试 Logo 标题网格排 3–4 张 KPI 卡每张即一个stat计数 一个data-chart面板揭示顺序为头部 → 卡片交错 → 图表动画。maps矢量车道与烘焙底图车道modules/maps/module.md 的第一决策是是否需要真实底图矢量车道默认风格化区域形状无真实影像HF 内原生运行且廉价asset_needs: []。复用us-mapbubble/hex/flow、world-map、spain-mapgeo-highlight国家着色 标签 边界脉冲、geo-flow世界弧线/枢纽网络、flag-borders旗帜剪裁进国界、pin-rollout城市顺序脉冲 计数器需按签名手写不在 catalog 中。底图车道需要真实卫星/暗色瓦片、地球仪或缩放至真实地点时asset_needs: [{ type: map-bake }]。由于 HyperFrames 禁止渲染期网络并要求确定性影像必须在 Source 阶段烘焙冻结。bake-basemap.mjs全环境参数驱动NAME STYLE COUNTRIES CENTER ZSTART ZEND PITCH BEARING FPS DUR以easeInOutCubic驱动相机 zoom→hold每帧截图前await map.once(idle)RemotiondelayRender技法杜绝瓦片闪现随后自编码为全 intra MP4ffmpeg -framerate FPS -i f%04d.png -c:v libx264 -g 1 -pix_fmt yuv420p并导出map.project()的coords.json各国家 SVG 路径 bbox 近似标签锚点。构建时底图video放 track 0hold 期间在 SVG 覆盖层上动画国界stroke-dashoffset绘制 填色揭示 标签/图钉/卡片全部经coords.json地理对齐同一投影路径还可作 SVGclipPath把旗帜或任意纹理剪进真实国界已验证暗色底图上法国三色旗。模块还以每条硬规则都咬过我们的立场列出工程约束真实底图影像必须烘焙署名元素Esri 卫星 → Esri, Maxar, Earthstar GeographicsCARTO → © CARTO, © OpenStreetMapSVG 缩放动画 viewBox 而非手算 group 变换原点居中元素只动画 opacity 或外包一层居中 divGSAP 覆盖整个 transform 会杀死居中用经度/纬度盒过滤国家几何world-atlas 打包的海外领地会撑爆 bbox如法国圭亚那Esri/CARTO 栅格需tileSize:256跨 ±180° 的要素在投影前需按相机中心 ref 解卷经度叠加层只能在静止相机上投影动画仅在 hold 期间进行hold 时才揭示的叠加层必须在构建期gsap.set到隐藏态裸fromTo在补间开始前不应用 from 态。asset-fusion素材几何变成图表asset-fusion/module.md 是搜索驱动、全网新增能力吸管变成量表、杯中的液体变成饼图约 5–8 秒。融合逻辑先分类数据类型时间/定量/比例/空间再读取素材的几何 affordance线性 → 时间线/量表体积/纹理 → 饼高度 → 柱容器 → 爆炸视图然后用定位协议接地element_positions最后从素材取色绝不用泛化的 #FFF/#000。定位协议在 grounding/PROTOCOL.md作者模型在杂乱全图上回归像素坐标不可靠弱视觉模型中心误差约 16–24%圆环会落偏但离散选格可靠约 3–4%。因此绝不目测坐标而走网格循环overlay打 9×9 编号网格选条带 →region裁剪放大再打 6×6 细网格再选 →final输出{box, center}→mark画框校验红色框落在目标上才算完失败仅一次廉价重试。实现仅依赖 node ffmpegHyperFrames 本就要求实测端到端中心误差从目测的 6.5% 降到 2.3%。常见用例在真实图中圈出/聚光物体 X可直接套用samples/asset-fusion/_ref-circle-highlight.html模板填CFG.box来自定位协议、CFG.label、CFG.asset、CFG.W/H、CFG.modefull 环连接线标签角括号扫描线circle 仅圆环渲染即得。模块还固化了渲染坑位宽高必须为偶数奇数会令 ffmpeg 编码失败/变形data-width/data-height必须是舞台上的静态 HTML 属性渲染器 StaticGuard 在 JS 运行前读取setAttribute太晚会回退到竖屏 1080×1920 并变形stroke-dashoffset绘制必须用autoAlpha:0门控getTotalLength()在布局前可能读 0 导致 t0 出现实线CSS 变量补间要作用在元素自身元素内联--x会屏蔽:root补间固定叠加层下不做相机推近推近会让目标脱出圆环无损交付用--format movProResMP4 有损。shot-plan IRDirector 与 Builder 之间的唯一契约shot-plan-ir.md 定义PROJECT_DIR/shot-plan.json的完整 schema信封每类别通用category、duration_s3–30、fps30、canvas默认 1080×1920按平台 16:9 / 1:1、style、palettehex 列表或derive-from-asset、fontHF embed 列表、beats可选强调帧/秒、exportmp4或alpha-overlay透明 webm/mov。素材接缝Director 第一部分asset_needs[]每项{ role, kind: image|icon|logo|svg|news|web|tweet, query|source, treatment: cutout|recolor|vectorize|none }空数组 跳过素材阶段。构建指令Director 第二部分复用优先blockcatalog block id如data-chart、caption-kinetic-slamcustomize。类别专属contentkinetic-type→scenes[] { id, start, end, text, emphasis_words[], emotion, motion, beats[] }stat→{ value, prefix, suffix, label, ring }charts→{ type, data[], labels[], headline, axes }logo-reveal→{ logo, tagline, url }lower-thirds→{ name, role, position, brand_colors[] }webpage→{ url, capture, highlights[] }news→{ outlet, headline, body, keyword, layout: A|B, ... }布局 A 9:16 纯文字居中强调、不缩放用标记带扫过关键词布局 B 16:9 全文 logodatesubjecttweet→{ author, handle, avatar, text, metrics }asset-fusion→{ data_type, asset, affordance, element_positions, derived_palette[], connectors[] }。不变量scenes划分[0, duration_s]且无缝隙重叠空asset_needs必跳过素材阶段命名的block意味着 Builder 复用定制而非手写。运动词汇从原语到 GSAP 配方references/motion-vocabulary.md 提供 Director 在motion字符串中引用、Builder 实现的具名原语表code_hint是框架中立物理GSAP 配方是 HyperFrames 实现原语GSAP 配方适用slide_bottom/top/left/rightfrom({ y:±150 / x:±200, opacity:0, ease:power4.out })沉稳、建构、专业scale_growfrom({ scale:0, opacity:0, duration:.6, ease:power2.out })沉稳、柔和scale_punchfrom({ scale:.6, opacity:0, ease:back.out(2.2) })冲击、能量fade_infrom({ opacity:0, duration:.4 })细微fade_blurfrom({ opacity:0, filter:blur(14px) })电影感、梦幻typewriter经 clip/SplitText宽度步进揭示技术、叙事word_reveal逐词from({opacity:0,y:..}, stagger:.1)讲故事wave逐字from({y:..}, stagger:{each:.04})流动、音乐性bounce_infrom({y:-120}, ease:bounce.out)俏皮slamfrom({ y:-300, ease:power4.out }) 落地抖动冲击、沉重强调原语常在节拍上scale_pulseto({ scale:1.12, yoyo:true, repeat:1, ease:sine.inOut })、shaketo({ keyframes:[{x:-9},{x:9},{x:0}] })、glowto({ textShadow:0 0 46px ink/accent })、color_shift。退出原语fade_out、slide_out、scale_out。非文字装饰underline_sweep、bar_wipe、hold_breath。当 HF registry 组件适用时优先使用caption-kinetic-slam、caption-editorial-emphasis、caption-neon-glow、caption-glitch-rgb、caption-particle-burst、caption-weight-shift、caption-matrix-decode、caption-pill-karaoke、shimmer-sweep——这些是生态内预构建、已渲染验证的组件。源码级构建约束确定性优先references/builder-contract.md 固化了合成规则根必须有尺寸#stagedata-composition-id需position: relative; width/height显式设定否则 flex 子元素塌缩到约 0、内容堆叠到左上角。先布局后动画先识别 hero frame多数元素可见的时刻用静态 CSS 构建它不写 GSAP.scene-content用 flex 居中 内边距padding: 120px 160px; gap: 24px绝不position:absolute; top:Npx定位内容容器保持 ≥80px 安全边距。时间线契约window.__timelines[id]上一条gsap.timeline({paused:true})tl.seek(0)永不tl.play()计时元素classclipdata-start/data-duration/data-track-index 稳定 id。只确定性无Date.now()/Math.random()/网络计数通过onUpdate补间代理对象seek 安全绝不使用墙钟计数器。评估发现的要点延迟元素在 clip 内必须用注册时间线的显式fromTo(){ autoAlpha: 0 }→{ autoAlpha: 1 }页面加载时gsap.set()或直接操作.clip可见性都会破坏框架生命周期计数在宿主带事件推进时间线时才渲染裸seek(t, true)会冻结在 0。调色板纪律所有颜色收敛到一个palette对象 / CSS 自定义属性不在标记中散落内联 hexasset-fusion则从素材取色。允许缓动power1–4、back、bounce、circ、elastic、expo、sine.in/.out/.inOut每场景一个母题运行hyperframes check刻意的溢出用data-layout-allow-overflowtrue标记。渲染与透明覆盖层产出阶段对应 hyperframes-cli/references/preview-render.md 的render命令。与 motion-graphics 输出契约直接相关的要点--format支持mp4, webm, mov, gif, png-sequence默认mp4WebM/MOV 携带透明通道正是路线输出契约中的透明 alpha 覆盖层。GIF 为两遍调色板编码、fps 上限 30、仅 1 位透明。--quality draft用于快速迭代--fps 60 --quality high用于最终交付60fps 渲染时间翻倍。默认--output为renders/project-name_YYYY-MM-DD_HH-MM-SS.ext每次渲染带时间戳互不覆盖传--output获得稳定名称。注意--resolution 4k不能与--format webm/mov组合——4k 超采样路径无 alpha 通道cloud.md4k 请渲染为 mp4或在本机分辨率渲染 alpha。preview支持--background持久会话与--port自定义端口是渲染前的审批界面play则提供轻量的hyperframes-player预览。路线定位与进一步阅读motion-graphics是 HyperFrames 路由体系中短、无旁白、运动即信息的唯一归属。路由决策的完整上下文见 hyperframes/SKILL.md状态表、路由表与消歧规则、intent-interview.md意图层八步与 capability-menu.md能力菜单与借用规则——跨工作流借用能力前须npx hyperframes skills update workflow-name并以绝对路径调用脚本、显式传入项目根。深入本路线的实现可依次阅读motion-graphics/SKILL.md执行管线与续跑表→ agents/director.md分类与设计启发式→ catalog-map.md类别 → block 映射与复用机制→ shot-plan-ir.mdIR schema→ builder-contract.md合成硬规则→ motion-vocabulary.md运动原语表→ grounding/PROTOCOL.md定位协议。真实可安装的 registry 素材包括data-chart、logo-outro、apple-money-count及north-korea-locked-down标注套件registry/blocks/目录可在构建阶段通过npx hyperframes add block直接引用。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考