Claude Code/Cursorにテキストアニメ20種を追加｜無料Skill「Animate-Text」の入れ方

この記事はClaude CodeやCursorで個人サイト・LPを作っている非エンジニア／個人開発者向け（npxコマンドを1回打てる前提で読めます）。

Animate-Text Skillとは何か

Animate-Text Skillは、Pixel Pointが2026年4月23日にGitHubで公開した、テキストアニメーション専用のAgent Skillです。

Claude CodeやCursorといったコーディングAIに「このSkillを入れて」と一度伝えると、20種類のテキストアニメ仕様をAI側が以後参照できるようになります。

Pixel Point公式の紹介ページにはこう書かれています。

Crafted text animations for AI workflows.（AIワークフロー向けに調整したテキストアニメーション）

出典: Pixel Point公式ページ

つまり、人間が手書きで詰めるためのCSSライブラリではなく、AIエージェントが解釈する用の仕様書セットです。

ここが要点。

個人的には、この「人間向けではなくAI向けのアニメ集」という位置付けが面白い。

これまでのAnimate.cssやGSAPの延長線とは違う配布のかたちだと感じます。

なぜAnimate-Text Skillに注目しているのか

私が注目している理由は、3点に集約されます。

• 制作元の実績がガチで強い（Neon・Huly・Unkeyの公式サイト制作）
• 「AIにスキルを足す」という配布方式の典型例として、Skillエコシステム全体の文脈を理解する教材になる
• Claude Codeで個人のLPを作る非エンジニア層にとって、費用ゼロでヒーロー文字の見栄えが上がる導線が用意されている

注目理由1: 制作元 Pixel Point の制作実績

Pixel Pointは、AIエージェント向けSkillをただ公開しただけの匿名チームではありません。

公式サイトのWorksセクションでは、以下のクライアント案件が確認できます。

• Neon（オープンソースのサーバーレスPostgres、開発者界隈で著名）
• Huly（チーム向けオールインワンアプリ）
• Unkey（API開発者向けプラットフォーム）
• Invertase（OSSのSDKや開発ツール）
• Gitness（コードホスティング・パイプラインエンジン）
• Novu（OSSの通知インフラ）

このリストは私の推測ではなく、Pixel Point公式トップページに並んでいる事実です（出典: pixelpoint.io）。

OSSスタートアップ界隈でビジュアルがいいと言われるサイトを実際に作っている会社が、その制作で培ったテキストアニメのレシピをSkillにまとめて配っている。

これが私が「とりあえず触っておく価値がある」と判断する一番の理由です。

正直、ここまで実績がはっきりしている発信元のSkillは珍しい。

注目理由2: 「AIにスキルを足す」配布方式の典型例

Animate-Text Skill単体の機能だけ見れば、テキストアニメの仕様書20種です。

けれども、配布のかたちが新しい。

Vercel公式のドキュメントは、Agent Skillを次のように定義しています。

An agent skill is a packaged capability that extends an AI agent with a specific, production ready behavior such as data access, automation, or domain logic.（Agent Skillとは、データアクセス・自動化・ドメイン知識といった本番運用品質の挙動でAIエージェントを拡張する、パッケージ化された機能です）

出典: Vercel公式 Agent Skills ドキュメント

従来のCSSフレームワークは、人間が読んで使う前提の配布物でした。

Animate-Text Skillは、同じドメイン知識を「AIエージェントが取り込んで使う形」で配っている。

コーディングAIで個人のサイトを組んでいる読者にとって、これは配布物の使い方が根本から変わるサインだと私は読んでいます。

注目理由3: 非エンジニアでも「ヒーロー文字の見栄え」が上がる導線

Claude CodeでLPを組んだことがある方なら覚えがあるはず。

テキストはちゃんと出るけど、ヒーローセクションの文字がパッと見ダサい。

あの問題に対する答えがここに揃っています。

20種類のうち、私が公式の仕様JSONを見て「ヒーロー文字に効きそう」と判断したのは soft-blur-in、per-character-rise、shimmer-sweep あたり。

それぞれ「文字単位でふわっと滲んで現れる」「文字単位で下から上がる」「光が走る」という動きです。

詳細仕様はsoft-blur-in仕様JSONに全部書いてあります。

料金・ライセンス・要件はどうなっているか

注目しているとはいえ、ノリで導入するのは危ない。

冷静に確認した数字をまとめます。

一番重要なのはライセンス欄。

Pixel Pointの別リポジトリ（pixelpoint-website）ではMITライセンスが確認できますが、今回のanimate-textリポジトリ直下にはLICENSEファイルがありません。

GitHubでLICENSEファイルがないリポジトリは、デフォルトでは「ソースを表示する権利しか付与されていない」扱いになります。

商用LPに即組み込むのは正直リスク高め。

様子見がフェアな判断です。

料金はSkill自体は無料、これは確定。

ただしPixel Point公式ガイドはNode.js v20以上を前提に書かれており、古いマシンでつまずく可能性があります。

私なら、触る前にまず手元のNode.jsバージョンだけは上げておきます。

20種類のアニメーションは何があるのか

公式リポジトリのcatalog.json（出典: catalog.json）には20種すべての名前が並んでいます。

記事ですべて読み上げると長くて疲れるので、用途で4つにグループ分けしました。

全名称はミニ辞書代わりに記事末に再掲しています。

本文中で覚えるべきは「ヒーロー大文字＝ふわっと出す系」「リード文＝上下移動系」「ロゴアニメ＝キネティック系」のざっくり対応くらいで十分。

例として soft-blur-in の仕様を覗くと、durationは900ミリ秒、文字間の遅延は25ミリ秒、推奨用途は48px以上のヒーロータイトルと数値まで書かれています。

ここまで細かいのは正直ありがたい。

AIに「48pxのヒーローでsoft-blur-in適用、durationだけ700msに短縮して」と頼めば、Skillを取り込んだAIは仕様に沿ったコードを返してきます。

読者にとっての具体的な強みはここ。

私の感覚だと、ヒーロー文字に効くのは20種のうち4〜5個。

残りはリード文や装飾用です。

Animate-Text Skillの入れ方は何をすればいいのか

公式READMEとskills.shレジストリの両方で、同じインストールコマンドが提示されています。

手順自体は1コマンドで完了します。

Pixel Point公式ガイドが示す導入手順を整理しました。

1. STEP1：Node.js v20以上を用意する。バージョンが古いとnpxが新しいSkill CLIを動かせません。ターミナルで node -v と打って20以上を確認します。期待結果：v20.x.x のような数字が返ってくればOK。詰まりどころ：v18以下だと後のコマンドが途中で止まるので、先にNode.jsを更新してください。
2. STEP2：プロジェクトのルートディレクトリに移動する。Claude Codeで開いているサイト・LPのプロジェクトフォルダで実行する想定です。期待結果：そのフォルダ内に package.json が見える状態。詰まりどころ：別のフォルダで実行するとSkillが目的のプロジェクトに紐づきません。
3. STEP3：インストールコマンドを実行する。npx skills add pixel-point/animate-text --skill animate-text をターミナルにそのまま貼り付けます。短縮形は npx skills add pixel-point/animate-text。期待結果：ダウンロードが走り、追加完了のメッセージが出る。詰まりどころ：初回はnpxがCLI本体を取りに行くため、数十秒待たされることがあります。
4. STEP4：Claude CodeまたはCursorのチャットで動作確認する。「ヒーローのh1にsoft-blur-inを適用して、duration 700ms」と頼みます。期待結果：Skillが入っていれば、AIはanimate-textの仕様にもとづいたコードを書いてきます。詰まりどころ：仕様を無視した汎用CSSが返ってきたら、Skillが読み込まれていない合図。AIを再起動して再度依頼します。

引っかかりやすい前提として、skills.sh のCLIはVercel社が運営するサードパーティの仕組みです（Anthropic公式が直接動かしているレジストリではありません）。

詳しい運営主体は次のセクションで補足します。

skills.sh は誰が運営しているのか

ここで一度整理しておきたい話。

Animate-Text Skillはskills.shレジストリ経由でも入手できますが、このskills.sh自体はAnthropic公式が運営する場所ではありません。

Vercel公式のchangelogにこう書いてあります。

Introducing Skills, the open agent skills ecosystem.（Skills—オープンなエージェントスキルのエコシステムを公開します）

出典: Vercel changelog

運営主体はVercel社（GitHubの実装は vercel-labs/skills 配下）。

Anthropic公式が定めたSkillフォーマット（SKILL.mdベース）を共通仕様として採用していますが、レジストリそのものは別組織の手で動いています。

Anthropicはanthropics/claude-codeという形で自社Skillをskills.sh上に置いている利用者の1つ、という関係。

ここを誤読すると、「AnthropicがAnimate-Text Skillをお墨付き付きで配っている」と勘違いしてしまう。

実際はPixel Pointが書き、Vercelが棚に並べている、という構造。

商用LPに使うべきか、個人サイトで触るべきか

読者像をClaude Codeで個人のサイト・LPを作る非エンジニア層と置いた前提で、私の判断を書きます。

• 商用クライアントワーク：現時点では非推奨。LICENSEファイル不在は致命的。納品後に「このアニメ、再配布の権利あるの？」と聞かれて答えられない状態は避けたい。
• 個人サイト・ポートフォリオ：触ってOK。LICENSE未設定はあくまで「権利関係を明示していない」状態であり、手持ちのサイトに入れて表示するだけなら現実的なリスクは低い。Pixel Pointも公式ページで「AIワークフロー向けに使ってくれ」と言っている。
• 練習・学習目的：これが本命。Skillの仕組みそのものを理解するためのサンプルとして、Animate-Text Skillはサイズも内容も適切。

初回のセットアップから動作確認まで、私の手元では実質10分でした。費用は0円。

私なら、商用案件には入れず、まず自前のポートフォリオで20種を全部試して感触を掴みます。

費用は0円、所要時間も初回セットアップから動作確認まで10分あれば足ります。

AIスキル配布の流儀を理解する教材として、一度は触ってほしい1本だと感じています。

ライセンスの件は数週間以内に追加される可能性が高いので、リポジトリのLICENSE有無は折を見て再確認するのがいい。

関連するSkillとどう違うのか

Animate-Text Skillと同じレジストリで、見栄え系のSkill候補を比較します。

同じ系統の「テキストアニメに特化したSkill」は、私の確認した範囲だとskills.sh上に他に存在しません。

Pixel Pointが先行して陣を構えている。

先行者かつ制作実績の信頼が積まれている、という二段重ねは強い。

FAQ

Q1. Animate-Text Skillは商用利用できますか

執筆時点でリポジトリにLICENSEファイルがないため、再配布や商用組み込みの権利は明示されていません。

GitHubのデフォルトでは「ソースを表示する権利」のみが付与される扱いです。

商用採用の判断は、Pixel Point公式にライセンスファイルが追加されたタイミングで再確認するのが安全です。

出典: 公式リポジトリ

Q2. Claude Code以外でも使えますか

Vercel公式ドキュメント（Agent Skills）には対応エージェントが18以上記載されています。

具体的にはClaude Code、Cursor、GitHub Copilot、Cline、Codex、Gemini CLIなど。

ChatGPTのGPTsは含まれません。

コーディングAI寄りのエージェントを使っている方なら問題なく入ります。

Q3. どのアニメから試すのがおすすめですか

個人的にはsoft-blur-inが最初の1本としておすすめ。

公式仕様JSONによれば、48px以上のヒーロータイトル想定でeasing数値まで指定されており、AIに依頼しやすい仕様です。

次にper-character-rise（下から1文字ずつ持ち上げ）、変化球が欲しいときに shimmer-sweep（光のスイープ）。

この3種で大半のLPは持ちます。

Q4. Pixel Pointとはどんな会社ですか

Pixel Pointは公式サイト（pixelpoint.io）でNeon・Huly・Unkey・Invertase・Gitness・Novuといった、開発者向けOSSスタートアップの公式サイト制作実績を公開しているWebデザイン・マーケティング会社です。

JAMスタック、React、パフォーマンス最適化、アクセシビリティ対応を専門領域として掲げています。

Q5. 20種類のアニメは記事内に全部載っていますか

本文の表で系統別にグループ化していますが、完全な公式リスト（catalog.json）はこちらから直接確認できます。

記事末の用語ミニ辞書には全名称を再掲しました。

このページに出てきた言葉

参考リンク

• Animate-Text Skill 公式GitHubリポジトリ
• Pixel Point公式紹介ページ
• Pixel Point会社サイト（制作実績）
• skills.shレジストリページ
• Vercel公式 Agent Skills ドキュメント
• Vercel skills.sh 発表changelog
• アニメ全20種カタログ（catalog.json）
• soft-blur-in仕様JSON（一次ソース）

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。