• Y AnimationPlayground
研究工作台
  • 实验总览
    • 生产与选型
    • HyperFrames 原理
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

代码视频生产

v0.5 参考实现

用同一份生产契约驱动 Remotion 与 HyperFrames,比较从预览到成片验收的完整路径。

返回视觉运行时指南
当前结论
默认选择 Remotion;需要 HTML 原生交付或 Agent 主导创作时重点评估 HyperFrames。
两者不是网页动画库,而是独立的视频生产工程。共享 brief、设计 token 与源素材即可;渲染实现、依赖和运维生命周期应继续隔离。
Remotion
帧驱动 React
pnpm --filter @yanimation/remotion dev
  • Composition 直接声明宽高、FPS、帧数与 typed props。
  • 适合复用 React 组件、数据层和既有 TypeScript 工程能力。
  • 本地 Studio 运行于 4405,横竖版都由同一个组件响应画布。
HyperFrames
可 seek HTML
pnpm --filter @yanimation/hyperframes dev
  • HTML data attributes 描述片段,GSAP paused timeline 描述运动。
  • 适合 HTML/CSS 资产、Agent 直接生成与可视化时间轴检查。
  • 横竖版保持两个合法单根工程,避免运行时入口与音轨互相污染。
共享生产契约
两套实现必须消费同一份输入,才能把比较重点放在渲染模型而不是内容差异。

时长

36 秒

帧率

30 FPS

横版

1920 × 1080

竖版

1080 × 1920

音频

48 kHz / 单声道

场景

5 个连续章节

从 brief 到成片
生产过程保持显式、可审查、可重复;不依赖手动拖拽才能恢复结果。
  1. 1

    修改契约

    先改共享 brief、场景时间、安全区与资产清单。

  2. 2

    同步输入

    生成确定性音轨,并把同一输入送入两个独立工程。

  3. 3

    分别预览

    在各自 Studio 中检查时间轴、横竖构图与关键帧。

  4. 4

    执行渲染

    四条命令输出两种运行时的横版与竖版成片。

  5. 5

    媒体验收

    用 ffprobe 校验尺寸、时长、帧率、视频与音频编码。

运行时比较
结论来自同一份 36 秒横竖双版参考作品,而不是孤立的 Hello World。
维度RemotionHyperFrames
创作模型React 组件 + 帧HTML + data attributes + 秒
动画驱动useCurrentFrame / interpolate可 seek 的 GSAP 时间轴
类型边界TypeScript props 天然完整数据契约在生成阶段校验
本地预览Remotion StudioHyperFrames Studio + 可视时间轴
复用优势复用 React 组件与前端工程能力复用 HTML、CSS、GSAP 与 Agent 产出
当前成熟度生态成熟、渲染与云端路径清晰迭代活跃、HTML 与 Agent 工作流突出
本项目默认结论生产型 React 视频的默认方案HTML/Agent 视频管线的重点观察方案
常用命令
输出目录不进入 Git;契约、生成器和验收报告进入版本控制。
pnpm video:prepare

校验契约并同步两套工程输入

pnpm video:check

枚举 Composition 并检查 HTML 时间轴

pnpm video:render

渲染四条横竖版 MP4

pnpm video:inspect

核对尺寸、时长、帧率与音轨