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（AIエージェントに追加機能を渡すパッケージ）です。
Claude CodeやCursorといったコーディングAIに「このSkillを入れて」と一度伝えると、
20種類のテキストアニメ仕様をAI側が以後参照できるようになります。

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

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

出典: Pixel Point公式ページ

つまり、
人間が手書きで詰めるためのCSSライブラリ（cssやアニメ定義をまとめたコード集）ではなく、
AIエージェントが解釈する用の仕様書セットです。
ここが要点。

個人的にはこの「人間向けではなくAI向けのアニメ集」という位置付けが、
これまでのAnimate.cssやGSAP（GreenSock Animation Platform。
長年使われている老舗JSアニメライブラリ）の延長線とは違う配布のかたちだと感じます。

なぜ私は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フレームワーク（TailwindやBootstrapのような、
CSSルールをまとめて配るキット）は人間向け配布でした。
Animate-Text Skillは、
同じドメイン知識を「AIエージェントが取り込んで使う形」で配っている。
コーディングAIで自分のサイトを組んでいる読者にとって、
これは配布物の使い方が根本から変わるサインだと私は読んでいます。

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

Claude CodeでLP（ランディングページ。
サービス紹介の1枚ページ）を組んだことがある方なら覚えがあるはず。
テキストはちゃんと出るけど、
ヒーローセクション（ページ上部の主役エリア）の文字がパッと見ダサい。
あの問題に対する答えがここに揃っています。

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に即組み込むのは正直リスク高め。
様子見がフェアな判断です。

料金については、
Animate-Text Skill自体は無料。
ただしPixel Point公式ガイドはNode.js v20以上を前提として書かれており、
古いマシンでつまずく可能性があります。
前提環境はあらかじめ揃えておく方が安全。

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

公式リポジトリのcatalog.json（出典: catalog.json）には20種すべての名前が並んでいます。
記事ですべて読み上げると冗長なので、
用途で4つにグループ分けしました。

全名称はミニ辞書代わりに記事末に再掲しています。
本文中で覚えるべきは「ヒーロー大文字＝ふわっと出す系」「リード文＝上下移動系」「ロゴアニメ＝キネティック系」のざっくり対応くらいで十分。

例として soft-blur-in の仕様JSONを覗くと、
duration_msは900、
stagger_ms（文字間の遅延）は25、
easingは cubic-bezier(0.22, 1, 0.36, 1)、
推奨用途は48px以上のヒーロータイトルと書かれています。
これだけ細かく数値が書かれている。
AIに「48pxのヒーローでsoft-blur-in適用、
durationだけ700msに短縮して」と頼めば、
Skillを取り込んだAIは仕様に沿ったコードを返してきます。
読者にとっての具体的な強みはここ。

Animate-Text Skillを実際に入れてみる手順

公式READMEとskills.shレジストリの両方で同じインストールコマンドが提示されています。
手順自体は1コマンドで完了します。
Pixel Point公式ガイドが示す導入手順を整理しました。

1. STEP1：Node.js v20以上を用意する。Node.js（JavaScriptをパソコン上で動かすランタイム＝動作環境）のバージョンが古いとnpx（npmに付いてくるパッケージ実行コマンド）が新しいSkill CLIを動かせません。ターミナルで node -v と打って20以上を確認します。
2. STEP2：プロジェクトのルートディレクトリ（フォルダの一番上）に移動する。Claude Codeで開いているサイト・LPのプロジェクトフォルダで実行する想定です。
3. STEP3：インストールコマンドを実行する。npx skills add pixel-point/animate-text --skill animate-text をターミナルにそのまま貼り付けます。短縮形は npx skills add pixel-point/animate-text。
4. STEP4：Claude CodeまたはCursorのチャットで動作確認。「ヒーローのh1にsoft-blur-inを適用して、duration 700ms」と頼みます。Skillが入っていれば、AIはanimate-textの仕様にもとづいたコードを書いてきます。

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

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

ここで一度整理しておきたい話。
Animate-Text Skillはskills.shレジストリ（公開されているSkillの棚＝ディレクトリ）経由でも入手できますが、
この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に使うべきか、個人サイトで触るべきか

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

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

正直なところ、
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は cubic-bezier(0.22, 1, 0.36, 1) と数値まで指定されており、
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は進化が速い分野のため、最新の仕様は公式サイトでご確認ください。