animate-text

テキストアニメーション

生成された JSON コントラクトを備えたテキストアニメーションカタログとして、このスキルを使用します。

移植可能なモーションコントラクトには assets/specs/<id>.json を使用します。コンテンツ、レンダラーのアルゴリズム、再生、ランタイム、ホスト要件、レンダリングコントラクト、ライブラリアダプターを含むアニメーションを正確に再現するには、assets/effects/<id>.json を使用します。

このスキルには、合計 24 個の仕様が含まれています。ウェブサイトでは現在、そのうち 20 個を紹介しています。

使用する場面

次のようなリクエストには、このスキルを使用します。

• 見出し、ラベル、カウンター、エディトリアルコピー、またはテキストの切り替えをアニメーション化する
• soft-blur-in、typewriter、shared-axis-y、kinetic-center-build など、名前付きのエフェクト ID を再現する
• 厳選されたカタログからモーションパターンを選び、対象のスタックに合わせて変換する
• サンプルコンポーネントに頼らず、別のスタックで現在のアニメーション動作を再現する
• WAAPI、Motion / motion.dev、GSAP、CSS、Lottie、Rive、または別のレンダラーを使って同じ仕様を実装する

ワークフロー

1. ユーザーが次のどちらを求めているかを判断します。
   • 表示されているエフェクトの、サイト上での正確なバージョン
   • モーションコントラクトの移植可能な変換
2. ユーザーがエフェクト ID を指定した場合は、assets/specs/<id>.json を読み込むか、node scripts/get-spec.mjs <id> を実行します。
3. それ以外の場合は、references/catalog.md を使用するか、必要に応じて次を実行します。
   • node scripts/list-specs.mjs
   • node scripts/find-spec.mjs "<query>"
4. ユーザーがモーションの意図を移植可能な形で変換することを求めている場合は、assets/specs/<id>.json を使用します。
5. ユーザーが生成されたアニメーション動作の正確な再現を求めている場合は、assets/effects/<id>.json または node scripts/get-effect.mjs <id> を使用します。
6. ユーザーが対象のアニメーションライブラリを指定した場合は、その指定を必ず守ります。showcase.library_selection に従い、そのエフェクトに対応する showcase.library_adapters.<library> ブロックのみを使用します。
7. 正確に再現する場合は、移植可能な仕様だけから推測せず、showcase.renderer、showcase.playback、showcase.timing、showcase.runtime、showcase.stage、showcase.rendering_contract、showcase.library_selection、showcase.library_adapters に従います。
8. showcase.stage はアニメーションのホスト要件としてのみ扱います。ユーザーが明示的にその UI を求めていない限り、元のウェブサイトのタイポグラフィ、色、パディング、カードの装飾、ページレイアウトをコピーしないでください。
9. 既存のセクションにエフェクトを適用する場合、そのセクションのテキストを維持します。ユーザーがショーケースの文面を再現するよう明示的に求めていない限り、showcase.content はデモ用またはフォールバック用の文面としてのみ使用します。

同梱リソース

• references/catalog.md：同梱された仕様ライブラリの簡潔な概要
• references/schema.md：移植可能な仕様と正確なショーケース用エフェクトレシピのフィールド単位のスキーマ
• references/selection-guide.md：適切なエフェクトファミリーを選ぶためのヒューリスティック
• references/implementation-notes.md：一般的なアニメーションスタック向けの変換メモ
• assets/specs/*.json：移植可能なモーションコントラクト
• assets/effects/*.json：生成されたアニメーションの正確なレシピ
• assets/catalog.json：ウェブサイトに表示されるカタログの順序とレンダラーのオーバーライド
• assets/samples.json：生成されたサンプルで使用される文面
• assets/runtime-presets.json：ランタイムの倍率とループのタイミングプリセット
• assets/stage-presets.json：アニメーションのホスト要件。プレゼンテーションのスタイル指定ではありません
• assets/renderer-recipes.json：共有レンダラーアルゴリズム
• assets/library-adapters.json：WAAPI、Motion、GSAP の実装マッピングに関するガイダンス

任意のヘルパースクリプト

ヘルパースクリプトは、決定論的なショートカットとして任意で使用できます。実行には Node.js 20+ が必要です。

• node scripts/list-specs.mjs は、同梱された仕様のメタデータを JSON として出力します
• node scripts/get-spec.mjs <id> は、移植可能なモーション仕様を 1 つ JSON として出力します
• node scripts/get-effect.mjs <id> は、生成されたアニメーションの正確なレシピを 1 つ JSON として出力します
• node scripts/find-spec.mjs "<query>" は、メタデータに基づいて候補をランク付けして返します

Node が利用できない場合でも、Markdown のリファレンスと JSON アセットだけで、このスキルの主要な機能を利用できます。

翻訳ルール

• target はそのまま保持してください：whole、per-character、per-word、または per-line。
• enter と exit の duration、easing、stagger は、対象スタックに合わせてそのままマッピングしてください。
• 対象スタックがサポートしている場合は、transform、opacity、blur、scale、rotation、spacing の各フィールドを保持してください。
• kinetic-center-build や short-slide-down などのレイアウトを考慮したエフェクトには、汎用的な stagger に置き換えず、エフェクトの正確なレシピを使用してください。
• アニメーションを正確に再現するには、assets/effects/<id>.json の showcase.renderer、showcase.playback、showcase.timing、showcase.runtime、showcase.stage、showcase.rendering_contract、showcase.library_adapters の各フィールドを保持してください。
• 指定されたアニメーションライブラリを別のものに置き換えないでください。ユーザーが GSAP を求めた場合は、GSAP をインポートして使用してください。Motion を求めた場合は、Motion をインポートして使用してください。WAAPI を求めた場合は、Element.animate を使用してください。
• Motion または GSAP を対象とする場合は、インポート、時間単位の変換、easing の変換、キーフレームの形式、完了処理、レンダラー固有の注意事項について、対応する showcase.library_adapters.motion または showcase.library_adapters.gsap ブロックを使用してください。
• showcase.engine_notes と showcase.reproduction_notes を注意深く確認してください。これらには、視覚的な一致に必要なスタック固有の詳細が記載されています。
• サイトの挙動を正確に再現するには、showcase.playback のループ全体を実装してください。ユーザーがワンショットの表示アニメーションを明示的に求めている場合を除き、最初の enter アニメーションだけで終わらせないでください。
• レンダラーレシピでフェーズの完了を待つよう指定されている場合は、アニメーション／トゥイーンの Promise を await するか、算出されたフェーズの合計時間だけ sleep してください。両方は行わないでください。

注意事項

• 公開ウェブサイトでは、バンドルされたライブラリの厳選されたサブセットを使用しています。このスキルでは、現在ウェブサイトに表示されていない追加のバンドル済み仕様も引き続き使用できます。
• assets/specs/*.json は、移植可能なモーション契約の正式な情報源です。
• assets/effects/*.json は、アニメーションを正確に再現するための契約の正式な情報源です。
• 非表示のエフェクトでは、正確なエフェクトレシピの "showcase": null となっています。
• 説明文の注記が JSON フィールドと矛盾する場合は、JSON を優先してください。