SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场hyperframes-motion-reel

hyperframes-motion-reel

设计与创作

查看项目

更新于 10-19 16:15

技能介绍

用途

hyperframes-motion-reel 是一个面向动态设计短片的创作技能。它把用户给出的主题、关键词或素材，扩展成具有世界观、叙事、色彩、字体、图形、数据表达、镜头运动和声音的完整视频方案，目标是达到 Behance / OFFF / Awwwards 及动态设计工作室展示卷的视觉水准，而不是普通的企业宣传片模板。

该技能是 remotion-motion-reel 的 HyperFrames 版本。资料明确说明：若需移植现有 Remotion 项目，应走 /hyperframes → remotion-to-hyperframes 路线，而非使用本技能。

主要能力

  • 将简短的用户指令补全为可成立的影像方案，包括概念、设计系统、时间线、运动设计与声音设计。
  • 以 HyperFrames（npm hyperframes）为运行基础，配合 GSAP 3、HTML/CSS、SVG、Canvas 2D、CSS 3D 实现动画。
  • 支持文字排版、线条与图表、3D 空间、粒子、运动模糊等多种表现方式，并按主题选择合适组合。
  • 以拍（BPM）为网格同步画面剪辑与音效；默认 120 BPM、60 FPS，一拍为 0.5 秒 / 30 帧。
  • 可用 Node.js 标准功能程序化生成 Kick、Hi-hat、Impact、Rise、噪声、Sub bass、UI beep 等音效，写入 WAV 并在合成中以 audio 元素引用。
  • 提供从脚手架、设计系统、音频生成、HTML/JS 实现，到 lint、check、snapshot、渲染与 ffprobe 校验的完整工作流。

使用方式

  1. 分析用户主题与素材；若指定了图片、音频或已有代码路径，需实际查看后再设计。
  2. 定义概念、写入 DESIGN.md（主色、强调色、背景色、字体、网格、形状语言、运动语言等）。
  3. 规划 DURATION_SEC 秒时间线，用秒、拍、帧编号描述，并注明各场景采用的动画规则或蓝图。
  4. 用 npx hyperframes init "<project-dir>" --non-interactive --example=blank --skill=general-video 初始化项目，按需组织 index.html、compositions/、src/config.js、src/lib.js、scripts/generate-audio.mjs 等结构。
  5. 实现动画：一条 paused 的 GSAP 时间线负责编排，另一层以时间为输入的纯函数负责粒子、网格、图表等连续变化；所有场景边界、冲击点和切点用拍辅助函数 b(n) 表达。
  6. 生成音频并以 audio 元素放入合成，音量与闪避通过 data-automation 音量轨道处理。
  7. 验证：先运行 npx hyperframes lint，最终以 npx hyperframes check 达到 0 项问题；用 npx hyperframes snapshot --at <秒> 检查关键帧画面；再渲染：
    • npx hyperframes render --fps 60 --quality draft --output out/draft.mp4
    • npx hyperframes render --fps 60 --quality delivery --output out/reel.mp4
  8. 用 ffprobe -v error -show_format -show_streams 核对时长、帧率与音轨，必要时用 ffmpeg 抽帧做最终检查。

适用场景

个人作品集短片、动态设计展示卷、品牌或主题概念片、字体与图形动态实验、数据可视化风格的短片、需要音画同步的节拍剪辑等。也适合作为以代码生成影像的创作流程模板。

限制与注意事项

  • 默认输出为 1920×1080、16:9、60 FPS、15 秒、900 帧、MP4/H.264；改尺寸或时长时需同步修改根元素的 data-width、data-height、data-duration 静态属性，脚本无法改写。
  • 时间线必须恰好一条、paused 且构建完成后注册；禁止调用 tl.play()，禁止 repeat: -1。
  • 不得对带 data-start 的 .clip 元素做 autoAlpha / visibility / display 补间；同元素同属性不要混用 CSS 初始 transform 与 GSAP 补间。
  • fromTo 的 from 侧属性必须在 to 侧以相同值重复声明，否则正式渲染可能丢帧。
  • 外部 script src 可能被提升到 DOM 之前，动画构建需在 DOMContentLoaded 后注册到 window.__timelines。
  • CSS 应写在 index.html 的内联 style 中，外部样式表的字体不会被打包，正式渲染会回退字体。
  • 不得依赖 Date.now()、performance.now()、运行时网络请求或悬停等输入状态；随机值须使用可复现的 seeded random。
  • 音效避免依赖额外音频生成 npm 包；audio 元素必须有 id，且不要手动调用 play() 或 seek。
  • 资料未提供具体收费、价格或效果保证信息。
  • 许可方面：HyperFrames 为 Apache-2.0，个人与企业均可免费商用；资料提到 Remotion 采用自有许可，员工 4 人以上的营利企业需付费 Company License。该技能要求成果仅使用 HyperFrames + GSAP + 原生 HTML/CSS/SVG/Canvas + Node.js 标准功能，不引入需付费许可的库。