关于 hyperframes-to-remotion
将现有 HyperFrames HTML 合成迁移为基于 React 的 Remotion 代码的工作流，适用于需要迁移场景布局和时间线的创作者或开发者，并使用 Remotion 的逐帧动画原语。
主要功能
- 01解析 HTML 结构和时间线
- 02将场景重建为 React 组件
- 03用 Remotion 原语替换 GSAP 插值
- 04在 Remotion Studio 中核验结果
适用场景
- 01迁移旧版 HyperFrames 合成
- 02在 Remotion 中重建时间线动画
- 03在 Remotion Studio 检查转换结果
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hyperframes-to-remotion确认已加载。
详细介绍
HyperFrames 到 Remotion 迁移工作流
将旧版或现有的 HyperFrames HTML 合成内容迁移为纯 React Remotion 代码。
映射表
| HyperFrames 概念 | Remotion 对应项 |
|---|---|
GSAP 时间轴 .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
<video> 元素 | <OffthreadVideo src={staticFile('...')} /> |
<audio> 元素 | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
迁移步骤
- 解析 HyperFrames HTML 结构和时间轴值。
- 将场景布局重新创建为 React
<AbsoluteFill>组件。 - 将 GSAP 插值替换为基于帧确定的 Remotion
spring()和interpolate()原语。 - 在 Remotion Studio 中验证输出。
评论
支持 Markdown