HyperFrames Skills Collection

82 个 HyperFrames 视频制作技能，涵盖动画引擎、运动规则、字幕模板和 10 大视频工作流。

什么是 HyperFrames？

HyperFrames 是 Heygen 开源的 HTML → 视频 框架。用 HTML + CSS + JS 编写视频，浏览器渲染每一帧，FFmpeg 编码为 MP4。

技能清单

🎬 主目录技能（20 个）

技能	用途
hyperframes	核心入口，路由选择工作流
hyperframes-core	核心运行时（Composition、Clip、Track）
hyperframes-cli	CLI 命令（init、preview、render、publish）
hyperframes-animation	动画系统总览
hyperframes-audio	音频处理
hyperframes-creative	设计规范与创意模板
hyperframes-keyframes	关键帧动画
hyperframes-registry	50+ 可安装的场景组件
media-use	媒体资源管理（图片/视频/音频/TTS）
motion-graphics	动效视频（<10s，无旁白）
product-launch-video	产品发布/网站展示视频
faceless-explainer	无脸解说视频
music-to-video	音乐节拍同步视频
pr-to-video	GitHub PR 代码讲解视频
slideshow	演示文稿/幻灯片视频
embedded-captions	字幕系统
talking-head-recut	访谈/播客图文叠加
figma	Figma 设计导入
general-video	通用视频工作流
remotion-to-hyperframes	Remotion 项目迁移

⚡ 动画适配器（12 个）

在 HyperFrames 中使用各种动画引擎：

适配器	引擎
gsap	GSAP 动画 API
gsap-easing-and-stagger	缓动与交错
gsap-timeline-and-labels	时间线与标签
gsap-transforms-and-perf	变换与性能
css-animations	CSS 关键帧
waapi	Web Animations API
animejs	Anime.js
lottie	Lottie 动画
three	Three.js / WebGL
typegpu	WebGPU / TypeGPU
html-in-canvas-patterns	Canvas 内嵌 HTML
animate-text	文字动画

🎨 动画规则库（48 个）

可直接使用的场景级动画配方：

3D 效果: 3d-camera-flight · 3d-page-scroll · 3d-text-depth-layers

交互效果: cursor-click-ripple · cursor-drag · context-sensitive-cursor · control-target-sync

数据可视化: chart-scrub-readout · counting-dynamic-scale · stat-bars-and-fills

文字效果: discrete-text-sequence · asr-keyword-glow · svg-icon-enrichment · svg-path-draw

过渡效果: scale-swap-transition · chromatic-glitch · theme-crossfade-morph

入场动画: spring-pop-entrance · waterfall-entry · center-outward-expansion · split-tilt-cards

视觉效果: ambient-glow-bloom · depth-of-field-blur · depth-scatter-assemble · motion-blur-streak

摄像机: camera-cursor-tracking · multi-phase-camera · coordinate-target-zoom

物理效果: physics-press-reaction · press-release-spring · reactive-displacement

其他: ai-tracking-box · avatar-cloud-network · anchored-layout-expand · card-morph-anchor · particle-burst · orbit-3d-entry 等

📝 字幕模板（2 个）

模板	用途
caption-template-anatomy	字幕结构骨架（FLOW_IN/OUT + CLIMAX_IN/OUT）
caption-template-motion	字幕运动语言（缓动、时序、情绪匹配）

快速使用

# 安装 HyperFrames CLI
npm install -g hyperframes

# 初始化项目
npx hyperframes init my-video --non-interactive --example blank

# 预览
npx hyperframes preview

# 渲染
npx hyperframes render

提示词模板

用 /motion-graphics 做一个 5 秒的 Logo 入场动画
用 /product-launch-video 做一个 30 秒的产品介绍视频
用 /faceless-explainer 做一个 60 秒的解说视频，主题是"什么是 RAG"
用 /music-to-video 做一个 30 秒的音乐可视化视频

安装到本地

# 克隆仓库
git clone https://github.com/haoxiaohaijohnny/hyperframes-skills.git

# 复制到 HyperFrames skills 目录
cp -r hyperframes-skills/* ~/.local/hyperframes-skills/

来源

• 主仓库: heygen-com/hyperframes
• 文档: hyperframes.heygen.com
• CLI: npm install -g hyperframes

License

MIT — 来自 Heygen HyperFrames 开源项目