HyperFrames kinetic-type 动能排版实战指南：让文字成为主角的 motion-first 短片构建方法

HyperFrames kinetic-type 动能排版实战指南让文字成为主角的 motion-first 短片构建方法【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames motion-graphics 技能中的kinetic-type动能排版类别模块讲解如何把一句有力的文案/引言/标题变成一段文字即主角的短视频先由 Director 基于design.md/frame.md的风格约束完成分镜规划再由 Builder 以复用优先的方式优先caption-*注册组件其次手工书写 GSAP 时间线落地成可渲染的 HTML 合成。读完本文你将掌握 kinetic-type 的分镜数据模型scene / emphasis_words / emotion / motion / beats、完整的 motion 原语词汇表及其 GSAP 配方、HF 合成契约paused timeline、clip、seek-safe以及从npx hyperframes add到hyperframes check/render的完整交付链路。什么是 kinetic-type一种 asset-free 的表单类别在 motion-graphics 技能体系 的分类表中kinetic-type属于表单类别form category它的触发意图是一句有冲击力的文案 / 引言 / 标题以 motion-first 的方式呈现文字。核心文档 categories/kinetic-type/module.md 开宗明义Text is the hero; typography motion carry the message.它有两个关键属性通常无需素材asset-freeasset_needs: []。这意味着在 motion-graphics 的六步流水线中Step 2source 素材阶段会被直接跳过从 plan 直接进入 design。对比之下webpage/news/tweet/asset-fusion等搜索驱动类别必须走素材解析流程见 phases/source/guide.md。文字 运动承载信息与stat数字 count-up、charts数据可视化、logo-reveal品牌 sting等其他表单类别不同kinetic-type 的全部表达力都在字体排印typography与动画motion上。整个 motion-graphics 技能的设计哲学是autonomous by design最多问一个澄清问题然后计划 → 设计 → 构建 → 校验 → 渲染全自动推进。kinetic-type 由于没有素材依赖是这条自动流水线中最纯粹、最快的一种工作流。Director 规划从风格输入到分镜 IRStyle first先读设计规格绝不发明风格kinetic-type 的规划第一原则是风格优先。当项目存在设计规格文件时Director 必须按frame.md→design.md→DESIGN.md的优先级读取并严格采用其中给出的精确色板 / 字体 / 约束不得自行发明有 spec色板、字体、间距约束全部以 spec 为准。同一句文案放进两份不同的design.md产出的镜头应该看起来完全不同Style is an input the case must exercise。没有 spec选择一个命名的风格或者向用户提一个问题——情绪mood、亮/暗light/dark、以及任何品牌色/品牌字体。这一设计决策会被写入 shot-plan 的 envelope 字段。根据 references/shot-plan-ir.md 的 IR 契约Director Part 1 需要产出{ category: kinetic-type, duration_s: 6, fps: 30, canvas: { w: 1080, h: 1920, aspect: 9:16 }, style: free-form visual direction (mood / energy / reference), palette: [#…], // 或 derive-from-asset font: HF embed-list font, beats: [12, 37], // 可选的重音帧/秒 export: mp4, // 或 alpha-overlay透明 webm/mov asset_needs: [] // kinetic-type 恒为空跳过 source 阶段 }envelope 中canvas默认 1080×19209:16可依平台改为 16:9 或 1:1fps默认 30时长约束在 3–30 秒之间。按语义/呼吸切分场景并打上叙事标签分镜的核心动作是把文案按**意义meaning与呼吸breath**切分成多个场景scene并给出长度建议英文约3–7 个词/场景中文约4–12 个字符/场景。每个场景必须被打上四段式叙事标签之一Hook钩子→ Build铺垫→ Punch爆发→ Resolve收束。这一结构决定了节奏Hook 快速落地约前 0.5 秒Punch 是视觉重音Resolve 负责收尾。对应到 shot-plan IRkinetic-type 的 category-specificcontent形状为content: { scenes: [ { id: hook, start: 0, end: 1.5, text: One idea, emphasis_words: [idea], emotion: curious, motion: typewriter, beats: [12] } ] }每个 scene 的字段约束为字段含义要点id场景标识唯一start/end场景时间窗所有 scenes 必须无缝覆盖[0, duration_s]不得有间隙或重叠IR invariantstext该场景文案按 EN 3–7 词 / ZH 4–12 字控制emphasis_words[]强调词每场景 1–2 个Builder 会映射为word--emphasisemotion情绪标签自由文本motion运动原语自由文本但应取自 motion 词汇表beats[]重音时间点与 envelope 的beats呼应用于 emphasis 动画打拍Motion 词汇表原语 → GSAP 配方kinetic-type 的运动语言并非自由发挥而是集中定义在 references/motion-vocabulary.md。该文件把命名的 motion 原语映射为框架无关的物理描述code_hint与GSAP 实现配方HF implementationDirector 在motion字符串中引用原语Builder 按其实现。Entry 入场原语from CSS 终态原语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 }) 落地 shake冲击、沉重Emphasis 强调原语原位、常打在拍点上原语GSAP 配方适用气质scale_pulse在拍点to({ scale:1.12, yoyo:true, repeat:1, ease:sine.inOut })有节奏、峰值shaketo({ keyframes:[{x:-9},{x:9},{x:0}], ease:none })紧迫、强烈glowto({ textShadow:0 0 46px ink/accent, yoyo:true, repeat:1 })重要、奇幻color_shiftto({ color:accent })或在 CSS 中给词上 accent 色动态Exit 退场原语原语GSAP 配方适用fade_outto({ opacity:0, duration:.4, ease:power2.in })收尾slide_outto({ y/x: off, opacity:0, ease:power2.in })转场scale_outto({ scale:1.06, opacity:0, ease:power2.in })转场非文字装饰图形underline_sweepfromTo({scaleX:0},{scaleX:1}, transformOrigin:left center)、bar_wipe、hold_breathto({scale:1.015, ease:sine.inOut})用于配合文字但不属于文字本身。词汇表同时强调允许的缓动函数白名单是power1–4、back、bounce、circ、elastic、expo、sine.in/.out/.inOut并建议每个场景只使用一个主导母题one motif per scene。复用优先18 个 caption-* 注册组件词汇表与 catalog-map.md 都反复强调 kinetic-type 的构建默认值优先复用注册组件而不是手写动画。motion-graphics 生态中已存在18 个caption-*排版组件包括caption-kinetic-slam·caption-editorial-emphasis·caption-neon-glow·caption-glitch-rgb·caption-particle-burst·caption-weight-shift·caption-matrix-decode·caption-pill-karaoke·caption-highlight·caption-clip-wipe·caption-gradient-fill·caption-blend-difference等。这些组件是预制、生态内、且已通过渲染测试的pre-built, in-ecosystem, and already render-testedBuilder 应当先伸手取用而非重造轮子。使用方式npx hyperframes add caption-kinetic-slam # 或 npx hyperframes add caption-editorial-emphasisnpx hyperframes add block会把组件源码落到compositions/下见 registry/components/caption-editorial-emphasis/registry-item.json其files[].target为compositions/components/caption-editorial-emphasis.html。由于大多数组件把内容/数据烘焙进自身的脚本复用即add edit在组件内就地修改words/emphasis_words/palette/font/ 时序而不是做纯变量注入。实例剖析caption-kinetic-slam 的实现结构以 registry/components/caption-kinetic-slam/caption-kinetic-slam.html 为例可以看到一个完整的 HF 契约组件长什么样根元素带 composition 元数据data-composition-idcaption-kinetic-slam、data-start0、data-duration8、data-fps30、data-width1920、data-height1080词条数组 WORDS每个词条{ text, start, end }定义入场与退场时间窗例如HyperFrames在 2.1s 入场、2.65s 退场强调词集合 KEYWORDSnew Set([8, 12, 15, 24, 27])标记 HyperFrames / HTML / professional / code / cinema 为金色强调#FFD700入场模式轮换wi % 4在四种入场间轮换——back.out(1.7)下拉、expo.out左侧滑入、expo.out右侧滑入、back.out(2.2)缩放弹入确定性退场统一power2.in0.1s 淡出并隐藏全程无随机、无计时器单条 paused 时间线var tl gsap.timeline({ paused: true })最后tl.seek(0)并注册到window.__timelines[caption-kinetic-slam] tl。其中fitFontSize()使用离屏 canvas 的measureText按最大宽度1720px自动收缩字号配合mulberry32(seed)种子随机若需要伪随机种子固定保证确定性的可复现展示了 kinetic-type 组件文字为主角的工程细节确保任何长度的单词都能塞进安全区且不溢出。手工书写hand-author当没有组件覆盖时当 18 个 caption-* 组件都无法覆盖所需母题时Builder 才手工书写合成。kinetic-type 模块给出了精确的构形蓝图一个全时长的.clip整个文字短片放在一个贯穿全片的 clip 内每个场景一个.groupflex 居中justify-content: center文字以span承载每个场景按motion显式gsap.fromTo()入场强调词在拍点上做glow/scale_pulseseek-safe 的autoAlpha只用于 clip 内部的非 clip 元素整体遵循 references/builder-contract.md 与 agents/builder.md。Builder 契约要点HF 契约不可协商根必须定尺寸根#stage带data-composition-id需要position: relative; width: Wpx; height: Hpx。高度未解析时 flex 子元素会塌缩到约 0内容堆到左上角——自动化门禁可能漏检务必检查 proof 快照。先布局后动画先找出hero frame大多数元素同时可见的那一帧用纯 CSS 构建它的终态不加任何 GSAP.scene-content用 flex padding 填满场景禁止在内容容器上用position:absolute; top:Npx会溢出absolute 只留给装饰元素四周保留 ≥80px 的 title-safe 边距。入场纪律gsap.from()只用于从t0就激活的非 clip 元素在.clip内部、子合成内、以及延后入场的元素一律使用显式fromTo()——CSS 位置是 ground truthtween 只是通往它的旅程。退场纪律只有最后一个场景会动画化元素退场场景之间的退场就是转场本身。时间线/clip 契约唯一一条gsap.timeline({paused:true})注册到window.__timelines[id]结尾tl.seek(0)绝不tl.play()计时元素用classclipdata-start/data-duration/data-track-index 稳定id全程确定性——禁用Date.now()/Math.random()/ 网络。seek-safe 揭示对 clip 内延后出现的元素用注册时间线上的fromTo()显式设置{ autoAlpha: 0 }起点与{ autoAlpha: 1, ... }终点不要在页面加载时gsap.set()后续的.clip也不要直接操作.clip的可见性——生命周期由框架托管。数值动画count-up 类动画 tween 一个代理对象并经onUpdate渲染seek-safe绝不用墙钟计数器tween 边界要钳制防止 spring 过冲越过保持值。从 shot-plan 到成片完整流水线kinetic-type 走的是 motion-graphics 六步流水线的子集source 被跳过。以 SKILL.md 为准# Step 0 — 初始化仅当 $PROJECT_DIR/hyperframes.json 不存在时 PROJECT_DIRvideos/project-name mkdir -p $(dirname $PROJECT_DIR) npx hyperframes init $PROJECT_DIR --non-interactive --exampleblank --skillmotion-graphics # Step 1 — Director Part 1 产出 shot-plan.json 草稿categorykinetic-type, asset_needs[] # Step 2 — 跳过kinetic-type 为 asset-free # Step 3 — Director Part 2 基于 catalog-map.md 定稿 shot-plan.jsonblock customize scenes[] # Step 4 — Builder 产出 compositions/index.html复用 caption-* 或 hand-author # Step 5 — 验证 (cd $PROJECT_DIR npx hyperframes lint .) (cd $PROJECT_DIR npx hyperframes check .) (cd $PROJECT_DIR npx hyperframes snapshot --at proof-times) # Step 6 — 批准并渲染先问 preview first, or render? (cd $PROJECT_DIR npx hyperframes preview --background) (cd $PROJECT_DIR npx hyperframes render . --skillmotion-graphics -q high -o ./renders/video.mp4) # 透明叠加层变体--format webm或 mov约束与技巧所有 Bash 命令在(cd $PROJECT_DIR ...)子 shell 中执行禁止裸cd绝不在工作区根目录hyperframes init。Proof 快照时间点应覆盖开场状态、标志性运动signature move、最终保持帧。生成 contact sheet / snapshot 后必须目检。lint/check/ snapshot 失败时派发修复子代理做一轮就地修复再重跑失败的门禁修复期间绝不改变固定的data-duration来掩盖缺陷。渲染完成后核验输出存在、非空、时长正确。若引擎正确性存疑可在构建前运行npx hyperframes skills update motion-graphics刷新技能无更新时为快速 no-op。常见误区与正确姿势有 spec 却自创风格违反 Style-first。frame.md/design.md存在时必须执行其精确色板/字体/约束否则同一镜头在不同 spec 下应当不同的验收标准就无法满足。场景切分过密或过稀EN 建议 3–7 词、ZH 4–12 字/场景scene 必须无缝铺满[0, duration_s]。强调词失控每场景限 1–2 个emphasis_words过多会稀释 Punch。手写组件而非复用当 18 个caption-*中有合适者直接用npx hyperframes add 就地定制别重造轮子。tl.play()或gsap.set()控制 clip 可见性破坏 HF 的 seek 契约渲染主机无法驱动时间线。在内容容器上用 absolute 定位溢出风险应使用 flex padding≥80px。每个场景多个母题违反one motif per scene视觉会打架。小结kinetic-type 是 HyperFrames motion-graphics 中最能体现motion is the message的类别无素材依赖、纯排版与运动驱动。其核心资产是三层体系——Director 的分镜 IRscenes/emphasis_words/emotion/motion/beats、motion 词汇表原语→GSAP 配方、以及 18 个已渲染测试的caption-*组件。掌握本文的规划纪律、词汇表与 HF 契约后你可以把任何一句有力的文案快速变成一条 3–10 秒、可无缝 seek、可确定性渲染的文字动画短片。想继续深入可阅读 agents/director.md分类与规划规则、agents/builder.md构建契约、references/builder-contract.md组合细节以及在 registry/components/ 中逐个检视 caption-* 组件的实际实现。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考