SkillAnimated Stats Video
演じる数字。カウントアップ、伸びるバー、そして着地する最終数字。
対応： Claude Code, Codex, Cursor, Muse · バージョン 1.0 · 必要なもの： Node.js 18+ と npm。Remotion でローカルレンダリングします（初回実行時にヘッドレス Chrome をダウンロード）。
無料ダウンロード すべての Premium Skills を解放
プレビュー
得られるもの
- 完全な Remotion プロジェクト（コンポジション＋レンダリングスクリプト）
- 一つのイージングヘルパーで駆動する三つのアニメーションビート
- カウントアップ数字、進捗バー、締めの数字
- ソーシャルとランディングページ向け 1080x1080 MP4 出力
この Skill について
コードからアニメーション付き統計動画をレンダリングします。主指標がカウントアップし、進捗バーがカウンターとともに伸び、締めの数字がその意味とともに着地。三つのビート、約6秒、完全に決定的。指標の振り返り、マイルストーン投稿、ステークホルダー向け更新など、数字がスクリーンショット以上の扱いに値する場面のために作られました。
試してみる
scripts/render.sh ./stats.mp4こんな方に最適
- 指標の振り返りとマイルストーンの告知
- 投資家やステークホルダー向けの更新
向いていない用途
- ライブダッシュボードやリアルタイムデータ
インストール方法
- インストールプロンプトをあなたのエージェントにコピーしてください：
Read https://skillu.dev/install/agent.md, then install the Animated Stats Video skill (animated-stats-video). - または、公開後にこのページから Skill パッケージをダウンロードし、そのフォルダをエージェントの skills ディレクトリに配置します。
- スラッシュコマンドで呼び出します。例：
/animated-stats-video。あとは欲しいものをそのまま言葉で伝えるだけです。
よくある質問
どの数字をアニメーション化すべきですか？
裏付けのある三つです。一つの主指標、一つの進捗指標、一つの成果数字。それぞれ何を意味するかのキャプション付きで。
タイミングは変えられますか？
はい。各ビートは ease() ヘルパーを介して二つのフレーム間でアニメーションします。範囲をずらせば再調整できます。