AIエージェントに「Apple風のタイトル演出を作って」と頼んでも、毎回異なる結果が返ってくる。曖昧な言葉でアニメーションを指定する限り、再現性は得られない。
この記事でわかること:
- animate-text SKILLとは何か、なぜ生まれたか
- 収録されている24種のアニメーション一覧
- Remotion・GSAP・Motion・WAAPIなど複数ライブラリへの対応方法
- SKILLのインストールと使い方
AIエージェントにアニメーション仕様を渡す難しさ
アニメーションを自然言語で表現するのは難しい。「ふんわりとしたフェードイン」「シャープなスライド」——こうした言葉は人間には伝わるが、AIへの指示としては不十分だ。アニメーションには easing 関数、duration、stagger 間隔、transform の軸と量といった数値的なパラメータが不可欠で、それらが欠けた指示からは一貫した出力が生まれない。
もう一つの問題が「ライブラリの多様性」だ。Remotion でビデオを作る場合と、GSAP で Web ページにアニメーションを加える場合では、同じ「フェードイン」でも記述がまったく異なる。AIが毎回アドホックにコードを生成すると、効果がばらつく。
animate-text はこの課題を「JSON ベースの仕様書を SKILL として提供する」という方法で解決した。
animate-text SKILLの仕組み
animate-text は Pixel Point が公開したオープンソースの AI エージェント向け SKILL だ。SKILL.md 形式で配布されており、Claude Code や Codex、Cursor などの SKILL.md 対応エージェントにインストールして使う。
この SKILL の中核は「アニメーションカタログ」だ。24 種のテキストアニメーションが収録されており、各アニメーションには2種類のファイルが用意されている。
- ポータブル仕様（spec）: ライブラリに依存しない汎用の motion contract。easing、duration、stagger、transform などのパラメータが JSON で定義されている。
- 完全再現レシピ（effect）: WAAPI・Motion・GSAP の各ライブラリ向けに、完全に再現するためのコード実装ガイドを含む詳細レシピ。
エージェントはアニメーション名（例: soft-blur-in）を受け取ったら spec を読み込み、指定されたライブラリに合わせてコードに変換する。ユーザーが毎回一から説明する必要はなく、名前一つで意図を正確に伝えられる。
収録されている24種のアニメーション
カタログは「文字単位」「単語単位」「行単位」「テキスト全体」の4グループで整理されている。
文字単位（per-character）の代表例は soft-blur-in。文字ごとにブラーとフェードを加えながら上方向に現れる、Apple のヒーロータイトルでよく見られる演出だ。typewriter は1文字ずつ表示するタイピング効果、bottom-up-letters と top-down-letters はそれぞれ下・上から文字が積み上がる演出を提供する。
単語単位（per-word）では spring-scale-in が単語をスプリングのバウンドで表示し、kinetic-center-build が単語を中央から右→左に追加していきながらフレーズ全体を中央揃えに固定するダイナミックな構築演出を実現する。shared-axis-y は単語ごとにずれたタイミングでハードカットする、シャープな編集的な切り替えだ。
行単位（per-line）の mask-reveal-up はマスクを使って行を上方向に開示し、line-by-line-slide は各行を左からスライドインさせて右へと退場させる段落リビールだ。
テキスト全体（whole）では shimmer-sweep が見出しを横断する光の走りを、focus-blur-resolve がヘビーなブラーから鮮明なテキストへのフォーカスプルを提供する。マテリアルデザインに倣った fade-through と shared-axis-z も含まれる。
ウェブサイトには掲載されていない追加スペックとして、depth-parallax-words（奥行き感のある単語モーション）、stagger-from-center（中央から外側に向かって文字を開示）、stagger-from-edges（両端から中央へ収束）なども同梱されている。
対応ライブラリ
animate-text の SKILL.md には、各アニメーションを以下のライブラリで実装するためのアダプターが収録されている。
- WAAPI（Web Animations API）
- Motion（motion.dev）
- GSAP（GreenSock）
- CSS アニメーション
- Lottie
- Rive
- Framer Motion
エージェントがライブラリを指定された場合、対応するアダプターブロックのみを使用する。GSAP を指定したなら GSAP のコードだけを出力し、Motion と混在させない。ライブラリ固有の注意点（import 方法、時間単位の変換、easing の変換など）もアダプター内に記述されており、エージェントが独自に判断する余地を減らしている。
インストール方法
インストールは npx skills コマンド一行で完了する。
npx skills add pixel-point/animate-text --skill animate-text
インストール後、エージェントはカタログ内のアニメーション名を参照できるようになる。node scripts/list-specs.mjs で収録スペック一覧を確認でき、node scripts/find-spec.mjs "<クエリ>" でキーワードから近いスペックを検索できる。Node.js が使えない環境では、Markdown のリファレンスと JSON アセットを直接参照して同等の操作が可能だ。
GreenSock公式 gsap-skills との違い
同じ「AI エージェント向けアニメーション SKILL」として gsap-skills（GreenSock 公式）がある。
gsap-skills は GSAP の API を正しく使う方法をエージェントに教えることが目的だ。ベストプラクティス、プラグインの使い方、よくある実装パターンが中心で、「どのアニメーションを選ぶか」という設計段階は対象外だ。
animate-text はその手前のフェーズ、つまり「どの視覚効果を使うべきか」の選定から支援する。カタログから効果を選び、ライブラリを指定すれば、エージェントが実装コードまで生成できる。両者は補完関係にある。
まとめ
animate-text SKILL は、AI エージェントとのアニメーション実装で起きる「意図の伝達ロス」を構造的に解消するアプローチだ。24 種のキュレーションされたアニメーション仕様を名前一つで呼び出せるため、指示の曖昧さに起因する試行錯誤が減る。Remotion でのビデオ制作、GSAP を使った Web アニメーション、WAAPI ベースのネイティブ実装、それぞれのスタックで同一の設計意図を正確に再現できる点が強みだ。
GitHub リポジトリは pixel-point/animate-text で公開されており、ウェブサイト（https://pixelpoint.io/skills/animate-text/）では収録アニメーションをブラウザ上でプレビューできる。