Communitygithub.com

Web Motion / 网页动效

把需要“变化过程”才能成立的内容做成可编辑网页动画、动态图解、GIF、短动画或解释型 B-roll。

网页动效 とは?

このスキル(Web Motion)は、変化の過程を必要とするコンテンツを、編集可能なWebアニメーション、動的図解、GIF、短編アニメーション、または解説用Bロールとして制作するためのものです。主なプラットフォームはWebブラウザ上での動作を前提とし、ユーザーが指定した出力形式(GIF、ビデオ、透過オーバーレイなど)を生成します。CheshireMew/visual-multimedia スイートの一部として動作し、コンテンツの真のソース、視聴者、出力アスペクト比、再生方法、時間軸の出所を明確にした上で、セマンティックな時間線を定義します。作業は、確認されたシナリオに基づき、editable-media v6 のWeb真ソースを使用して、window.editableMedia に構造化状態を保存し、window.__hf.duration/seek で決定論的な時間制御を行います。テキストアニメーション、技術的図解、解説Bロールなど、タスクに応じて最適なルートを選択し、最終的にWeb真ソース、時間線、キーステート確認画像、ユーザー指定のメディアファイル、およびブラウザソースフレームと最終ファイルの照合結果を提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add CheshireMew/visual-multimedia

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Web Motion / ウェブモーション

目的

「変化の過程」を必要とするコンテンツを、編集可能なウェブアニメーション、動的図解、GIF、短編アニメーション、または解説用 Bロールにします。デフォルトでウェブの真ソース(真のソース)1つと、確定した位置を特定できるタイムラインを残し、そこからユーザーが指定したメディアを派生させます。

本 Skill は、通常の静的カード、既存の実写素材の編集、オーディオ番組、またはテーマ調査を担当しません。リポジトリ内のリソースパスは Visual Multimedia スイートのルートディレクトリを基準とし、現在のルートに従って読み込みます。

動作方法

コンテンツの真ソース、視聴者、出力アスペクト比、再生方法、および実際の時間の出所を確認します。視聴者に表示されるタイトル、ラベル、字幕、またはナレーションの草案が明確に確認されていない場合は、先に $clean-copy に渡して確認を待ちます。本 Skill は AI の表現リストを保守しません。

実装前に、確認可能な計画を 1 回提出します。正確に確認できるテキスト、シーンまたは状態の順序、動きの媒体、開始→変化→結果、キャンバス仕様、フォントと配色の方向性、必要な実素材とその出所を含め、その後停止します。ユーザーが明示的に確認をスキップした場合のみ、直接実装します。動きは、進行、因果、比較、フィードバック、または状態変化を表現しなければなりません。タイトルの変更、ページ全体のフェードイン、またはカードの順番表示だけでは、動的図解とは見なされません。

確認内容を意味的な断片に分割し、各断片に新規情報、サウンド範囲、画面の役割、時間の根拠を記録します。editable-media v6 のウェブ真ソース 1 つを使用し、window.editableMedia に構造化状態を保持させ、window.__hf.duration/seek(seconds) で決定論的な時間を提供します。手動、自動、および混合再生はすべて同じ意味的タイムラインを読み取り、別のクロックを確立しません。

タスクに応じて必要なルートのみを選択します。テキストアニメーションはテキストアニメーションライブラリを読みます。技術メカニズムの変化は意味的グラフィックモーションのルールを読みます。解説用 Bロールは登録済みのアクティビティテンプレートを使用します。ユーザーが明示的に HyperFrames を選択した場合のみ、独立したレンダリングコピーを確立します。実写やサウンドと組み合わせて完全な動画にする必要がある場合は、ウェブ断片と実際の時間境界を $video-production に渡し、本 Skill 内で既存素材の編集を行わないでください。

実装後、開始、すべての重要な変化、および結果の状態を確認し、その後完全に再生します。ランダム位置の一貫性、結果が部分的なループでリセットされないこと、テキストが常に読み取り可能であること、カメラとオブジェクトが同じ transform を競合しないこと、GIF またはビデオのデコードフレームがブラウザのソースフレームと一致することをチェックします。エクスポートに失敗した場合は、ウェブ真ソースを保持し、具体的な箇所を報告し、静かにルートを変更しません。

リソース

  • ../../references/web-visual-production.md:ウェブ真ソース、シーン、再生、ローカルエクスポート。
  • ../../references/semantic-graphic-motion-production.md:オブジェクトの関係と状態変化がどのように動きになるか。
  • ../../references/text-motion-production.md、../../scripts/text-motion-library.mjs、../../assets/text-motion-library/text-motion-runtime.js、../../assets/text-motion-library/text-motion-binding.js:決定論的テキストアニメーションルート。
  • ../../references/explanatory-broll-production.md:解説用 Bロールのテンプレート選択、実際の時間投影、透過出力。
  • ../../references/technical-diagram-production.md:技術図解と安定した全体像アニメーション。
  • ../../references/hyperframes-rendering.md:ユーザーが明示的に HyperFrames を選択した場合のみ読み取ります。
  • ../../scripts/validate-editable-media.mjs と ../../scripts/render-web-media-local.mjs:構造検証とローカル正式エクスポート。

出力と完了

ウェブ真ソース、現在のタイムライン、キーステート確認画像、ユーザーが指定した GIF/ビデオ/透過オーバーレイ、およびブラウザソースフレームと最終ファイルの照合結果を提供します。要求がない場合、静的カード、完全な編集動画、またはその他のアスペクト比を追加で作成しません。

関連スキル