AIが書いたアニメーションを、動画ファイルに
ChatGPT、Claude、Geminiが返すのはコードですが、SNSやスライド、編集ソフトで使えるのは動画ファイルです。コードをここに貼り付けて、動画をダウンロードしてください。
チャットから動画まで
- 1
HTMLファイル1つで依頼する
何を動かしたいかを伝え、1つのHTMLファイルにまとめるよう依頼します。下のプロンプトを添えると、そのまま書き出せるHTMLになります。
- 2
コードをコピーする
ChatGPT、Claude、Geminiでは、コードブロックのコピーボタンを使います。プレビューが表示されている場合は、先にコード表示に切り替えてください。
- 3
貼り付けて書き出す
このページ上部に貼り付け、投稿先に合った縦横比(Reels、Shorts、TikTokは9:16、YouTubeとスライドは16:9)を選んで書き出します。
書き出しやすいHTMLをAIに書いてもらう
依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。一度で問題なく描画できるHTMLになります。
このアニメーションを、htmlto.videoで動画に書き出せるよう、単体で動作する1つのHTMLファイルに書き直してください。 - 16:9 のフレームを前提にデザインしてください。ブラウザのウィンドウにぴったり収まるようにし(100vw × 100vh、スクロールなし)、どの解像度でも拡大縮小できるよう、サイズはすべて vw と vh で指定してください。 - ページの読み込みと同時に自動で始まり、マウス、キーボード、スクロールの操作を必要としないこと。 - 長さを固定してください。長さは1行目に <!-- duration: 8s --> のようなコメントで記載してください。 - アニメーションには、CSSアニメーション、Web Animations API、GSAP、またはタイムスタンプ引数を使った requestAnimationFrame を使ってください。video、audio、iframe は使わないでください。 - CSSとJavaScriptはすべてインラインで記述してください。画像はインラインSVGまたはデータURLで埋め込んでください。フォントとライブラリは、Google Fonts、cdnjs、jsDelivr など、クロスオリジンでの読み込みを許可しているCDNのものだけを使ってください。 - 完全なHTMLを、1つのコードブロックにまとめて返してください。
画面録画やコマンドラインではだめな理由
画面録画は動きがカクつき、カーソルが映り込み、サイズも思いどおりになりません。コマンドラインのツールは正確ですが、Node、ヘッドレスブラウザ、FFmpegのインストールが必要です。このページでは、同じ1フレームずつの描画を、何もインストールせずに行えます。
描画できるもの
- 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シーンは、性能の低いパソコンでは失敗することがあります。