从对话到视频
- 1
让 AI 只给一个 HTML 文件
告诉助手你想要什么动画，并要求只给一个 HTML 文件。附上下面的提示词，拿到的代码就能直接导出。
- 2
复制代码
在 ChatGPT、Claude 或 Gemini 里，点代码块上的复制按钮。如果助手显示的是实时预览，先切换到代码视图。
- 3
粘贴并导出
粘贴到本页顶部，按平台选好画幅（Reels、Shorts 和 TikTok 用 9:16，YouTube 和幻灯片用 16:9），然后导出。
让 AI 直接写出能导出的版本
把这段话加在你的需求后面，或者和现有代码一起发给 AI。这样拿到的代码最有可能一次就渲染成功。
请把这个动画改写成一个自包含的 HTML 文件，我要用 htmlto.video 把它导出成视频： - 按 16:9 的画幅设计。画面要正好铺满浏览器窗口（100vw × 100vh，不出现滚动条）。所有尺寸都用 vw 和 vh，这样任何分辨率都能适配。 - 页面加载后自动开始播放，不需要点击、按键或滚动。 - 时长固定，并在第一行用注释写明，例如 <!-- duration: 8s -->。 - 动画用 CSS 动画、Web Animations API、GSAP，或者基于时间戳参数的 requestAnimationFrame 来实现。不要用 video、audio 或 iframe。 - 所有 CSS 和 JavaScript 都写在这个 HTML 文件里。图片用内联 SVG 或 data URL 嵌入。字体和库只从允许跨域加载的 CDN 引入，例如 Google Fonts、cdnjs 或 jsDelivr。 - 把完整的 HTML 放在一个代码块里回复。
为什么不录屏，或者用命令行工具？
录屏会卡顿，会录进鼠标指针，尺寸也对不上。命令行工具结果准确，但要先装好 Node、无头浏览器和 FFmpeg。这个页面做的是同样的逐帧渲染，却什么都不用装。
能渲染什么
- CSS 动画和过渡
- GSAP、anime.js、Motion 等 JavaScript 动画库
- Canvas 2D
- 用 CSS 或 JavaScript 驱动的 SVG 动画
- WebGL 和 Three.js
- Web Animations API 和 requestAnimationFrame
暂时还做不到的
- Safari、iPhone 和 iPad 不能导出，但可以预览。
- 页面里的视频、音频和 iframe 不会出现在导出结果里。
- 服务器不允许跨域读取的图片和字体会缺失。
- 要点击、悬停或滚动才会触发的动画不会播放。
- 用 <animate> 等 SMIL 标签做的 SVG 动画录不下来。
- 特别重的 WebGL 场景在较慢的电脑上可能会失败。