# HTMLとGSAPで作る無料HyperFramesモーションテンプレート

AIチャット、デバイス、タイトル、グラフ、製品デモ向けの無料HyperFrames動画テンプレート65点。HTMLとGSAPを調整するかSubclipで編集できます。

Canonical URL: https://www.subclip.app/ja/motion-graphics-templates/hyperframes

HyperFramesテンプレートは、一時停止したGSAPタイムラインを持つ素のHTMLで書かれたモーショングラフィックスです。Webページのように読んで編集できる動画シーンが欲しい開発者や、AIエージェントを使う方に向けたページです。SNS投稿、通知、チャットのやり取り、地域の地図、グラフ、テロップ、手描き風の注釈、UIフローを収録し、どれも変数で内容を編集できます。

## 一時停止したGSAPタイムラインを持つHTML

HyperFramesテンプレートはそれぞれひとつのHTML文書です。レイアウトはHTMLとCSS、動きは一時停止状態で始まるGSAPタイムラインが担います。ブラウザにリアルタイムで再生させるのではなく、レンダラーがタイムラインを各フレームへシークしてキャプチャします。すべてのフレームが決定論的なので、レンダリング結果はプレビューと一致します。

編集できる値は変数として公開されています。フォロー系オーバーレイならname、handle、count、地図ならtitle、subtitle、values、Bar Chart Raceならperiodsとseries、その他多くのテンプレートではアクセントカラーです。変数を変えると、その値でシーンが描き直されます。ソースはふつうのHTMLなので、読んで理解したり、CSSでスタイルを変えたり、Webページと同じ感覚で要素を足したりもできます。

ここにあるテンプレートの多くはオーバーレイです。Instagram Follow、TikTok Follow、YouTube Lower Third、macOS Notification、Neon Borderは背景が透過なので、映像の上に重ねて使えます。

## HyperFramesセットでできること

得意分野はSNSアニメーションです。iOS Notificationは縦型の画面に4つのバナーを重ねて表示し、X Post CardとReddit Post Cardはいいねや賛成票の数が増えていく様子を動かします。Comment Cardsは2件のコメントが入力される場面を見せ、ChatGPT ExchangeとClaude Exchangeは台本どおりのアシスタントとの会話を9:16で再現します。

データや場所を扱うものとして、地域ごとの値を編集できるアメリカ、フランス、スペイン、インドの地図、都市間を太さの異なる弧で結ぶUS Flow Map、Bar Chart Race、Minimal Line Graph、Animated Bar、Data Chartがあります。手描き風の素材はHand Drawn Scribble、Squiggle Marks、Whiteboard Bulb、Stitched Text Drawなど。UIフローにはSettings Toggle、Skeleton Reveal、Swipe Rail、Parallax Zoomがあります。

## SubclipでHyperFramesテンプレートを使う

HyperFramesテンプレートはすべて無料で、MacとWindows向けのデスクトップAI動画編集ソフトSubclipにプリインストールされています。映像の上にあたるタイムラインに置いたら、AIエージェントに変更を頼めます。地図の値を州ごとの売上に差し替える、フォロー用オーバーレイを自分のハンドルに変える、テロップにチャンネル名と登録者数を入れる、といった具合です。エージェントが変数を書き換えてくれるので、準備ができたら動画を書き出します。

## ClaudeやCodex向けにHTMLを入手する

現在のHyperFramesテンプレートはすべてコード一式を用意しており、無料サインイン後に入手できます。プロンプト付きでコードをコピーすると、HTML全体とエージェント向けのプロンプトがクリップボードに入ります。ClaudeやCodexに貼り付けて、変えたい点を伝えてください。プロンプトには変数が列挙されているので、テキスト、色、データをどこに入れればよいかエージェントが把握できます。

zipをダウンロードすることもできます。index.html、変数の初期値を記したprops.json、HyperFramesプレイヤーでの動かし方を説明したREADME、編集可能な範囲を記したAGENTS.mdとCLAUDE.mdが入っています。これだけの情報があれば、コーディングエージェントはテンプレートのスタイル変更、シーンの追加、データ違いの複数バージョンの作成まで対応できます。

## 65件のテンプレート

- [Subclip Scenic Reel Composer](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, AIチャット入力): ガラス風の入力欄と回転する写真ギャラリーを使う動画テンプレートです。
- [Subclip Momentum Growth Headline](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, タイトル): 入力される見出しと伸びるグラフを使う動画テンプレートです。
- [Subclip Guided Word Spotlight](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, タイトル): カメラが追う単語ごとのテキストを使う動画テンプレートです。
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, 画面とデバイス): 開閉するノートPCと画面へのズームを使う動画テンプレートです。
- [Subclip Aurora Brand Signature](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, タイトル): 柔らかなグラデーション上のロゴと文字を使う動画テンプレートです。
- [Subclip Creative Brief Launcher](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, AIチャット入力): 依頼文の入力と送信完了の表示を使う動画テンプレートです。
- [Subclip Panorama Device Gallery](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, 画面とデバイス): 四つのスマホ画面と製品の見出しを使う動画テンプレートです。
- [Subclip Mobile Action Spotlight](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, 画面とデバイス): スマホのボタン拡大と締めのタイトルを使う動画テンプレートです。
- [Subclip Pocket AI Composer](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, AIチャット入力): 送信ボタンにズームするモバイルAI入力欄を使う動画テンプレートです。
- [Subclip Release-to-Video Assistant](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, AIチャット入力): 動画の結果表を含むAIの回答を使う動画テンプレートです。
- [Subclip Connected Creative Workspace](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, AIチャット入力): 素材の接続とクリエイティブ作業画面を使う動画テンプレートです。
- [Subclip Intent Search Animation](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, AIチャット入力): 選択して書き換える検索クエリを使う動画テンプレートです。
- [Subclip Production Progress Tracker](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, AIチャット入力): 進行状況と完了マーク付きのタスクリストを使う動画テンプレートです。
- [iOS Notification](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, SNSとチャット): 4 つの iPhone スタイルのバナーが次々に重なり、最後にヘッドラインとロゴ カードが表示される垂直方向の通知オーバーレイ。
- [Instant Carousel](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, SNSとチャット): 白い丸いカード内で 4 枚の写真を循環させる垂直方向の画像カルーセル。現在の画像の柔らかくぼかしたコピーが背景を埋めます。
- [macOS Notification](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, SNSとチャット): macOS スタイルの通知バナーが一度に 1 つずつ右上隅に表示され、列に積み重なるワイドスクリーン オーバーレイ。
- [Instagram Follow](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, SNSとチャット): コンパクトなプロフィール ピルを備えた透明な垂直オーバーレイ。[フォロー] ボタンが [フォロー中] に切り替わり、視聴者にアカウントのフォローを促すために作成されます。
- [TikTok Follow](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, SNSとチャット): 透明な 9:16 プロファイル オーバーレイ。ローズレッドの [フォロー] ボタンがチェックマーク付きのフォロー状態に切り替わります。
- [X Post Card](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/x-post) (HyperFrames, SNSとチャット): ダークテーマのワイドスクリーンソーシャルポストカード。プロフィール、投稿テキスト、アクション行が表示され、カウントが増加するアニメーションが表示されます。
- [Reddit Post Card](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, SNSとチャット): ワイドスクリーンのコミュニティポストカードには、サブレディットの行、太字の見出しと本文があり、最後に賛成票が湧き出てスコアが上がります。
- [Thread Message](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, SNSとチャット): ワイドスクリーンのテキスト会話。柔らかくぼやけたカラーフィールド上に、灰色の着信バブルと青色の発信バブルが次々と表示されます。
- [Comment Cards](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, SNSとチャット): 2 つの視聴者のコメントが順番に表示されるワイドスクリーン オーバーレイ。それぞれのコメントにはイニシャルのアバター、ユーザー名、タイム ラベル、入力されたテキスト、および反応行が含まれます。
- [YouTube Lower Third](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, ローワーサードとCTA): 透明なワイドスクリーンのテロップ に、チャンネルのアバターとチャンネル名が、チャンネル登録済み状態になるチャンネル登録ボタンの横に表示されます。
- [Grid Pixelate](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, トランジション): 正方形のタイルが成長してフレーム全体をカバーし、その後縮小してシーン間をカットするきれいな瞬間を残すピクセル グリッド トランジション。
- [Hand Drawn Scribble](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, 注釈): ぐらぐらする白い楕円が対象を囲み、マーカーのハッチングがそれを塗りつぶし、湾曲したコネクタが手書きのラベルにつながる手描きの吹き出し。
- [Squiggle Marks](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, 注釈): 3 つの行が波線の下線、二重取り消し線、および曲線括弧で順番にマークされている手書きのテキスト注釈。
- [Multiplayer Cursor](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, クリック): ネームタグが付いた 2 ～ 6 個の色付きカーソルが設定されたパスに沿って滑走し、光るフォーカス リングの周りに集まるコラボレーション アニメーションです。
- [Parallax Device Dive](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, 画面とデバイス): ダッシュボードを表示しているデバイスが上昇して保持し、UI レイヤーが引き離されるにつれてフレーム全体にズームする携帯電話のモックアップ アニメーション。
- [Parallax Unzoom](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, タイトル): プルバック トランジションでは、全画面カードが 3 行 3 列のグリッドの中心に縮小し、その周囲に 8 色の隣接カードが移動します。
- [Parallax Zoom](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, タイトル): 3 行 3 列のカラー カードのグリッドで開始され、フレームを満たすまで中央のカードに押し込まれるズーム トランジション。
- [Settings Toggle](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, UI): 白いカード上に 3 つのラベル付き行が表示され、それらのトグル スイッチがスライドしてオンまたはオフになる設定パネルのアニメーション。
- [Store Badge](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, ローワーサードとCTA): 最初に大きな見出しが表示され、その下に App Store および Google Play スタイルのバッジが続くアプリ ダウンロード エンド カード。
- [Neon Border](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, ローワーサードとCTA): 透明なテロップ に暗い名刺があり、その境界線が柔らかな光を放つ 2 つの対向するネオン アークによってなぞられています。
- [Skeleton Reveal](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, UI): きらめくスケルトンのプレースホルダーが、太字の名前と詳細行を持つカードにクロスフェードする短い読み込み状態のアニメーション。
- [Staggered Fade Up](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, タイトル): シンプルな単語ごとのテキストでは、各単語がどこでフェードインし、わずかにスケールアップして、短い距離をスライドして最後の位置に入るのかがわかります。
- [Text Stagger](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, タイトル): 一行の見出しが千鳥状に上昇して定位置に収まり、テキスト全体に色のきらめきが 1 回適用されます。
- [Intro Video](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, 製品デモ): スクリプト化された製品デモのイントロは、キネティック テキストで開き、アシスタント入力にプロンプトを入力し、送信をクリックするとプロジェクト結果カードが表示されます。
- [ChatGPT Exchange](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, AIチャット入力): 垂直方向のダークモード チャット アニメーション。質問が入力され、返信が 4 行のワークフロー テーブルで返され、ビューがスクロールしてそれを読みます。
- [Claude Exchange](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, AIチャット入力): 入力された質問が計画と検索のステップにつながり、長いセリフの答えが流れてスクロールする、縦型の温かみのあるダーク チャット アニメーションです。
- [Gallery Tunnel](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, 製品デモ): 明るい色のパネルと細いグリッド線が中央の消失点に向かって進む通路を並べる透視トンネル。
- [Chat Thread 2](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, SNSとチャット): タイプされた返信、リンクのプレビュー、絵文字の反応、クロージング カードで終わる開封確認を含む、縦型の電話フレームのテキスト会話。
- [Minimal Line Graph](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, グラフ): 透明な背景にきれいな 2 系列の折れ線グラフ。各点に値ラベル、下部に月ラベル、小さな凡例が付いています。
- [Spain Map](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, 地図): バレアレス諸島とカナリア諸島を含むスペインの地域を値ごとに色分けしたアニメーション マップ。タイトル、サブタイトル、色の凡例が付いています。
- [India Map](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/india-map) (HyperFrames, 地図): 各州と連合の領土を値、ラベル、タイトル、サブタイトル、低位から高位までの凡例で色分けした 12 秒のインド地図。
- [France Map](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/france-map) (HyperFrames, 地図): 値、地域名、タイトル、サブタイトル、カラー スケールによって各地域が陰影付けされた、フランス大都市圏のコロプレス マップ。
- [US Map](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/us-map) (HyperFrames, 地図): 地域を順番に表示し、アラスカ、ハワイ、州ラベル、色の凡例を使用して各州を値ごとに色分けした米国の州地図。
- [US Flow Map](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, 地図): 湾曲した青い円弧が主要都市を結び、小さな点がそれに沿って移動し、都市から都市への流れを示す暗い米国の地図。
- [ChatGPT Chat](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, AIチャット入力): 9 分 16 秒のアシスタント チャット アニメーション。入力された質問、箇条書きのストリームされた回答、最後の CTA カードが表示されます。
- [Animated Bar](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, グラフ): 成長するバー、滑らかなトレンド曲線、右上隅に大きなパーセンテージの吹き出しを備えたコンパクトなモノクロ チャート カード。
- [Bar Chart Race](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, グラフ): 追い越し、強調表示されたリーダー、再スケーリング軸、および期間カウンターを含む、期間を通じてアニメーション化されるランク付けされた水平棒グラフ。
- [Data Chart](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, グラフ): 月次収益バーとコンバージョン率線、値ラベル、凡例およびソース注記を組み合わせた編集用コンボ チャート。
- [Camera Follow Captions](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, タイトル): 動的キャプションでは、新しい単語が太字の大文字の成長ブロックに収まり、カメラが後ろに下がって文全体が表示されます。
- [Whiteboard Bulb](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, 注釈): 動くペンで一筆一筆描かれた電球のホワイトボード スタイルのスケッチ、色付きのアクセント マーク、その下にキャプション。
- [Whiteboard Rocket](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, 注釈): ペンで描かれたフィン、排気ライン、色付きの窓を備えたロケットのスケッチと、それに続く紙の背景に短い打ち上げのキャプション。
- [Chat Thread](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, SNSとチャット): 9 時 16 分のダークモード テキスト メッセージ スレッド。送受信バブル、ドット入力、リンク プレビュー カード、開封確認が表示されます。
- [CTA Lockup](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, ローワーサードとCTA): 大きな見出し、丸薬の形のボタン、黒地に小さな応援コピーが表示された、最後の CTA 画面。
- [Notes Typing](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, UI): スクリーン キーボードでタイトルと 7 行を入力する 9 分 16 秒の電話メモ アニメーション。その後、ブランドのチェックリスト カードで終わります。
- [Outline Draw](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, 注釈): 透明な中心を持つ時計回りに描かれた薄い丸い角のアウトライン。ビデオの一部をフレーム化してハイライトするために使用されます。
- [Oversized Cursor](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, クリック): ボタンに移動し、ボタンをクリックしてチェック マークが反応し、フレームから出る大きな矢印カーソル。
- [Social Proof Card](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, 社会的証明): ブランド名、5 つ星の行、顧客の声、3 つの機能アイコン、CTA ボタンを備えたクリーム色のクロージング カード。
- [Stitched Text Draw](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, 注釈): 黒い背景に、針穴と動く針を備えた破線の糸ステッチとして描かれた大文字の単語。
- [Swipe Rail](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, トランジション): 濃いネイビーの背景に、勢いよくスワイプして 1 枚のカードを中央にスナップする番号付きカードの水平レール。
- [Ask Subclip](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, AIチャット入力): AI ビデオ エディターのプロモーション シーン。見出しの下のプロンプト ボックスにリクエストが入力され、その後に結果と最後の行が続きます。
- [Build console](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/build-console) (HyperFrames, UI): いくつかの段階でレンダリング コマンドを実行する暗いターミナル ウィンドウ。チェック マーク、進行状況バー、準備完了バッジが表示されます。
- [Spatial deck](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, 製品デモ): 層状の 3D パースペクティブを通過する一連の青緑色の番号付きカード。それぞれにステップのタイトルと短い説明が表示されます。

## その他のHTMLとGSAPで作る無料HyperFramesモーションテンプレート

- [HyperFrames: タイトル](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: 画面とデバイス](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: グラフ](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: AIチャット入力](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: 地図](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: SNSとチャット](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: ローワーサードとCTA](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: 注釈](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: UI](https://www.subclip.app/ja/motion-graphics-templates/hyperframes/ui-animations)