Communitygithub.com

Juicy Motion

インターフェースやゲームにおける表現力豊かなモーションとフィードバック(報酬、発見、攻撃、弾丸、魔法、 elemental VFX)を作成・洗練します。アンティシペーション、インパクト、ディゾルブを含み、調整可能なタイミングでインタラクティブにプレビューできます。汎用的なレイアウトアニメーション、キャラクタースプライトの作成、ビデオ編集には使用しません。

Juicy Motion とは?

このスキルは、モーションデザイナーのように考え、アンティシペーション(予備動作)、インパクト、ディゾルブ(消失)を活用して、各イベントを表現力豊かで読み取りやすくするためのものです。主な参考例はQuinasのプロポーザル「03 · 給料が入った」で、封筒が命を吹き込まれ、報酬が階層的に明らかになります。再利用可能な原則は動作言語であり、オブジェクト、ブランド、強度はプロダクトに依存します。このスキルは、報酬・発見、インパクト・戦闘、魔法・元素という3つのファミリーに分類され、それぞれ専用のレシピリファレンスを持ちます。イベント設計では、トリガー、アクションの発生源、明らかになるコンテンツやターゲット、最終結果を特定し、各レイヤーを時間軸で適切に分離。頻度に応じた強度の調整が重要で、稀な祝福は派手に、頻繁な警告は控えめに。UIではHTML/CSS/SVGとWeb Animations API、ゲームでは既存のレンダラーを優先。スタンドアロンのプレビュー例として`assets/reward-envelope.html`が提供され、リプレイ、シーク、スロー再生、レイヤー表示切替が可能。常に共有タイムラインを使い、状態の一貫性を保つこと。統合時はドメインのイベントと契約を尊重し、アニメーションで実際の報酬やダメージを発生させないこと。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/johnnyzao/johnny-skills/tree/main/skills/juicy-motion

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

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

ドキュメント

Juicy Motion は何をしますか?

モーションデザイナーのように考えましょう。アンティシペーション、インパクト、ディゾルブを使って、すべての出来事を表現力豊かで読み取りやすくします。 ユーザーに評価されている参考例は、Quinasのプロポーザル 03 · 給料が入った です。 封筒が命を吹き込まれ、報酬が階層的に明らかになります。再利用可能な原則 は動作言語です。オブジェクト、ブランド、強度はプロダクトに依存します。

ファミリーを選択する

このスキルでは共通の核を維持し、必要なレシピのみを参照します。

qutsune/EgorV の7つのビデオは リファレンスカタログ にあり、観察結果と推奨される適用方法が記載されています。 リファレンスを選んだり、要求されたエフェクトに近づけるために参照してください。 宝箱はすでにQuinasのレシピの視覚的な起源です。 残りはインパクトとVFXのレパートリーを広げます。独自の本格的なワークフロー(例:特定のエンジンへのシェーダーやVFX統合)が できた場合は、別のスキルに分離してください。異なる視覚要素は、このスキル内のレシピとして十分です。

イベントをデザインする

  • トリガー、アクションの発生源、明らかになるコンテンツまたはターゲット、最終結果を特定します。金銭的利益の場合、宛先はウォレットになります。 アンロックの場合、利用可能になった新しいオプション。攻撃の場合、接触とターゲットの反応。
  • 適切な準備を選びます:開封時のぐらつきと圧縮、打撃の引き、またはエネルギー放出前のチャージ。 意味がある場合は、ストレッチを出力、オーバーシュートを到着、セトリングを読み取りと調整します。 すべての要素が一緒にフェードインするだけの状態は避けます。
  • レイヤーを時間で分離します。報酬の場合:開く → 光を放つ → オブジェクト/値を表示 → インパクトをマーク → 星を散らす → 塵で持続する。 攻撃の場合:準備 → 発射/打撃 → 接触 → 反応 → 消散。 ナラティブが、パーティクルの数やレイヤーの量よりも優先されます。
  • 強度を頻度に合わせます。まれな祝福はより派手にできます。 頻繁な警告は待機時間と占有を少なくします。インパクトをオブジェクト/カードに局所化し、 自動的な選択としてアプリケーション全体を揺らさないようにします。
  • 頻繁なエフェクトや戦闘エフェクトでは、アクション、ターゲット、およびコマンドの読み取りを維持します。 報酬の儀式的なタイミングを攻撃のタイミングに流用しないでください。
  • チュートリアルの構築順序はエフェクトの遅延を決定しません。 レイヤーを同じイベントに固定します:フラッシュ、反応、音は接触時に一致させることができますが、 軌跡と残渣は独自の持続時間を持ちます。また、ビデオの長さはデモンストレーションされたアクションの持続時間ではありません。

構築とプレビュー

インターフェースのオブジェクトやエフェクトにはHTML/CSS/SVGとWeb Animations APIを優先します。 プロジェクトのリソースとアーキテクチャを使用します。変形、開閉、調整可能な軌道に依存するエフェクトにビットマップを生成しないでください。 ゲームでは、ワールド内のエフェクトに既存のレンダラーと更新サイクルを使用します。 Webプレビューは、DOM/CSSを統合に強制することなくタイミングを研究できます。

スタンドアロンの報酬体験を開始するには、assets/reward-envelope.html をコピーして適応します。 これは自己完結型の例で、ライブラリ、画像、ネットワークは不要です:封筒、汎用メダリオン、 光、星、塵、利益、シミュレートされたウォレットが含まれ、リプレイ、スクラバー、速度、 レイヤー、モーション削減に対応しています。要求に応じて CONFIG、構成、軌道を変更します。 この例は製品固有のデザインを置き換えるものではありません。

プレビューでは、結果を体感し、タイミングを検査できる必要があります:リプレイ、 再生/一時停止、スロー再生、タイムライン。レイヤーの切り替えは、アンティシペーション、光、パーティクルの 貢献を理解するのに役立ちます。探索する際は、ベースアクションと追加されたレイヤーを比較し、 それぞれが解決する問題を特定します:発生源が不明確、接触が弱い、ターゲットが無反応、結果が読み取れない。 使用サイズとコンテキストを示します。孤立した大きなオブジェクトだけではありません。 バリエーションの数はリクエストとローカルルールに従います。承認されたものを洗練する際は、 例を保存し、探索を再開するのではなく洗練に集中します。

キャプチャは補助的なものであり、動きを証明しません。再生を確認し、 準備、アクション/接触、応答、完了の各時点でタイムラインを停止します。インタラクティブな例への 直接リンクを納品します。シミュレートされた値と実際のイベントおよび支払いを区別します。

有用な不変条件

  • レイヤーには共有タイムラインを使用します。リプレイ/シークは、同じ状態を生成し、 パーティクル、タイマー、リスナーの重複を避ける必要があります。 手続き的なバリエーションがある場合は、再現と比較のためにシードを保持します。
  • UIでは、主に transform と opacity をアニメーション化します。ラッパーを使用して、 複数のエフェクトが同じプロパティを競合する場合に、変形、変位、出力を分離します。
  • 遅延した出力は初期状態を上書きしてはいけません:WAAPIでは、その出力で fill: 'forwards' を使用するか、フェーズを単一のアニメーションに構成します。 t=0およびスクラバーを後ろにドラッグした後の状態を確認します。
  • コインの目的地は、シーン内のウォレットの実際の位置から計算し、 リサイズ時に再計算します。軌道を作成者のモニターに固定しないでください。
  • モーション削減時は、コンテンツと結果を直接読み取り可能にし、 ぐらつき、スカッシュ、パーティクル、飛行、シェイク、フラッシュを削除します。プレビューでは、 モーションを体験するための明示的なコマンドを提供できます。ユーザーの手動選択を維持します。
  • 音はオプションのレイヤーであり、インタラクションによって開始され、コントロールがあります。 既存の設定を維持し、同じ利益に対して2つの音を避けます。
  • 統合時は、ドメインのイベントと契約を尊重します。報酬は確認されたイベントから始まります。 アニメーションはお金を割り当てたり、インベントリを変更したり、残高の差やタイマー終了から利益を推測したりしません。 戦闘では、発射、接触、確定ダメージを区別します。既存の視覚的な予測を尊重し、 エフェクトの終了をヒットの証明に変えないでください。

保存と再利用

Quinasでは、リポジトリ内の docs/Identity/MOTION.md と docs/Identity/motion/recompensas-03/ を参照します。これが、選択、T01/Qリソース、承認された例の 正規のソースです。プレビュー、S2/T2、テーマ、アーティファクト保存に関する ローカルルールにも従います。

他のプロジェクトでは、メソッドを保存し、その製品のアイデンティティを使用します。 Quinasのブランド、通貨、コントロールを自動的に持ち込まないでください。

ユーザーが承認し保存を依頼した場合は、再現可能なコード、リソース、タイミング、選択範囲を アイデンティティの永続的な場所に保存し、さらにデザインインデックスへのリンクも保存します。 承認されたリファレンスと実際の統合を区別します。プレビューまたは保存のタスクはその範囲に留まります。 実装リクエストは既存の承認に従い、新しいゲートを発明しません。

最も関連性の低い範囲を確認します:再生、後方シーク、リプレイ、コンテンツの切り替え、 テーマ、小画面、軌道の宛先、リソース、コンソール。製品を変更する場合は、プロジェクトで要求される 統合チェックを実行します。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル