mcpField
A
animated-chart

animated-chart

github.com/charlie947クリエイティブ・メディア4561.6k 回インストール2 週間前に更新
リポジトリ

animated-chart について

アニメーションチャートを単一のHTMLファイルで作り、公開用に書き出すクリエイティブスキルです。正確な数値の入力、キャプチャしたフレームの確認、動画とGIFの出力を案内します。

主な機能

  1. 01単一のHTMLファイルでチャートを作成
  2. 02入力された値を正確に保持
  3. 03各フレームにサンプルデータを表示
  4. 04フレームとループ境界を確認
  5. 05MP4とループGIFを書き出し

活用シーン

  1. 01LinkedIn向けアニメーショングラフィックの制作
  2. 02要素を置き換えずにデータ変化を表示
  3. 03チャートを動画とGIFに書き出し

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/charlie947/motion-graphics-skills --skill animated-chart

インストール後、Claude Code で/animated-chartを入力して読み込まれたか確認します。

詳細

コードで作る、アニメーション付きグラフ

何もないページから、3つのプロンプトで作成し、もう一度見た目を整え、エクスポートします。

始める前に： brand.md と MOTION.md があれば読みます。なければ、まず brand-intake を実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。それらがない状態で、ブランドに合っていると決して言わないでください。

ステップ 1：数値を尋ねて、回答を待つ

タイトル、ラベル、正確な値、そしてそれが実績値かサンプルデータかを尋ねます。サンプルデータの場合は、すべてのフレームに「参考データ」というラベルを付けます。数値を丸めたり、形式を変えたり、追加したりしてはいけません。

プロンプト 1：作成する

I want one animated graphic for a LinkedIn post. Build it as a single HTML file I can open in my browser.

Title: "[TITLE]". [If sample data: keep "Illustrative data" visible.]
Values: [LABEL 1: VALUE 1], [LABEL 2: VALUE 2], ...

The motion has four states:
1. Start: [what it looks like first].
2. Change: [the one thing that moves]. Nothing fades out and gets replaced.
3. Hold: the finished chart, with [the headline value] labelled.
4. Return: it eases back to the start, so the loop has no jump.

Timing: 8 seconds in total. About 2 seconds for the change, 4 holding, 1.5 to return.

Look: background [BG], text [TEXT], accent [ACCENT], [FONT]. No external fonts or images. No gradients, no glow, no bouncing.

Size: 1080 x 1350 pixels.

Rules for the build:
- Work out every frame from the time alone. Add window.seek(seconds).
- The title, labels and axis never move. Only the chart changes.
- The last frame must match the first frame exactly.

After you build it, take screenshots at 0, 1, 2, 4 and 7 seconds. Check them for overlapping text or anything cut off. Fix what you find and tell me what you changed.

プロンプト 2：もう一度見た目を整える

Inspect the five captured frames and the loop boundary. Check that the values stay the same, labels are readable, nothing overlaps, and each element appears only when it should. Report only problems you actually observe. Fix any you find, preserve the earlier version, and capture the same frames again. If no problems are found, say so and do not invent a revision.

プロンプト 3：エクスポートする

Now turn this into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Give me an MP4 (1080 x 1350, 8 seconds) and a GIF that loops forever. Then show me three frames from the finished GIF so I can check it came out right.

コメント

Markdown 対応