Your story starts here
STEP 01
放入你的内容
从已有文章、脚本或想法开始。
CLAUDE MOTION SKILLS · FOR CLAUDE CODE & CODEX
Claude Motion:
让文章动起来。
文章 → 脚本 → 笔记 → 灵感 → 下一支视频
值得分享的故事，属于你的视觉风格。用你已有的 Agent，把文字变成生动的视频。
CLAUDE MOTION SKILLSA STUDY IN MOVEMENT ↗
✳
FROM A SINGLE IDEAMake something
worth watching.
worth watching.
Words. Rhythm. A new perspective.
ORIGINAL MOTION STUDY
HTML → MOTIONWORKS WITH
✳ Claude Code CodexOpenCodeCursorKimi以及你喜欢的 Agent
就在你熟悉的工具里。
Claude Code · 流程示意
CLAUDE CODE
打开制作包文件夹，阅读 SKILL.md，将我的脚本制作成动效视频。保留原文和数字，渲染前先预览。
先创建项目并下载制作包，然后在你的 Agent 中打开文件夹。
使用流程
三个步骤，一个好故事。
带上内容，选好风格，让故事以恰当的节奏展开。
Make it your own
STEP 02
选择视觉风格
动态大字、安静演讲、纸张拼贴，选择适合故事的风格。
Ready when you are
STEP 03
预览、完善、分享
编辑分镜、预览动效，然后带走完整的制作工程。
MOTION · BUILT ON HYPERFRAMES
HTML 输入，动效故事输出。
开放的画布、精确的时间线、属于你的完整项目。
YOUR COMPOSITION
Small ideas.
Beautifully told.
Your agentBeautifully told.
Your headline · Scene 01
Layers & motion
The story, word by word
Add your own audio
代码清晰
可编辑 HTML，文字、配色和节奏由你掌握。
轻松修改
在编码 Agent 中继续完善同一个项目。
带走完整工程
下载源文件，用 HyperFrames 在本地渲染。
你的创作伙伴
配合你已经熟悉的编码工具使用。
基于 HeyGen 的 Apache-2.0 开源 HyperFrames 引擎，本站独立构建。
从草稿到作品
故事所需，尽在其中。
简单开始，自由创作，始终掌握创作权。
Make it move.
TYPE ↗动态排版
让文字更有表现力。
A clear perspective.
VISUALS ↗视觉叙事
让想法更直观、更易理解。
Scene 01 → 02
STORY ↗可编辑分镜
调整每个镜头的顺序、文字和节奏。
Your next story.
WORKSPACE ↗自己的工作区
保留本地草稿，或保存至账户。
Ready to share.
SHARE ↗分享预览
准备就绪后创建公开分享链接。
From HTML to MP4.
EXPORT ↗本地视频导出
在自己的电脑上将制作包渲染为 MP4。
CLAUDE CODE / CODEX
你的 Agent，你的创作流程。
在这里制作初稿，再用编码 Agent 打开工程。描述你想要的修改：更慢的揭示、更有力的开头、不同的节奏。每个项目始终可编辑。
| START HERE | CONTINUE LOCALLY |
|---|---|
| Article or script | Your coding agent |
| Editable scenes | Refined motion design |
| Animated HTML preview | MP4 via HyperFrames |
| Free beta workspace | Your own tools & plan |
动效风格
选择你的视觉风格。
选择符合你内容的视觉语言。从可编辑模板开始，或探索社区的动效技能。
24 个风格与资源
可编辑模板 · 免费
可编辑模板 · 免费
可编辑模板 · 免费
可编辑模板 · 免费
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
社区技能 · 查看来源
自由浏览，选择后再开始使用。
选择风格，开始创作适合谁
为有故事想说的人。
创作者
制作值得收藏的下一支视频。
教育者
把复杂知识讲得清楚直观。
独立开发者
展示产品的独特之处。
故事讲述者
为喜爱的文字找到新的节奏。
价格
简单开始，自由创作。
测试期间免费，无需信用卡，没有自动订阅。
为每位创作者
Creator
$0 测试期间
你的灵感，你的 Agent，你的下一支视频。
- 四种可编辑制作模板
- 不限数量的本地草稿
- HTML、JSON 与本地渲染制作包
- 注册账户即可保存云端项目
- 可选公开分享链接
后续计划
Studio
稍后推出
让故事焕发生命力的更多方式。
- 托管配音生成
- 更多模板集合
- 协作与品牌配置
- 更多发布方式
目前不收取费用，不开通自动订阅。
FAQ
一些常见问题。
这是 Anthropic 官方产品吗？+
不是。本站独立运营，Claude Code 和 Codex 仅用于说明工具兼容性。
这里可以制作什么？+
将文章或脚本拆分为可编辑分镜，预览 HTML 动效，并下载本地视频制作包。
需要 AI 订阅吗？+
浏览器中的分镜和模板不依赖 AI。使用编码 Agent 进一步完善时，使用你自己的账户和套餐。
免费吗？+
当前测试版免费，没有自动续费。你使用的 Agent 和可选第三方服务按各自规则计费。
项目保存在哪里？+
草稿保存在当前浏览器。登录并选择保存到云端后，项目才会存入账户。创建分享链接后对应项目才会公开。
能导出 MP4 吗？+
下载制作包、安装依赖，然后在电脑上运行其中的 HyperFrames 渲染命令。浏览器可直接导出 HTML 和完整制作包。
你的下一个故事，从这里开始。
Claude Code · 流程示意
CLAUDE CODE
打开制作包文件夹，阅读 SKILL.md，将我的脚本制作成动效视频。保留原文和数字，渲染前先预览。
先创建项目并下载制作包，然后在你的 Agent 中打开文件夹。