p5.jsとp5.brushを使い、ガイドに沿ってClaudeで手描き風のキャラクターアニメーションを作るスターターキット。
alchaincyf/huashu-art-motion
アートスタイルのレシピや解説動画の文法をコード駆動のアニメーションに変換し、絵画や図解を動かすエージェントスキル。
- スター
- 4,525
- フォーク
- 492
- 未解決の Issue
- 7
- 最終コミット
- 4 日前
これは何?
huashu-art-motionは、すべてコードでアニメーションを制作するためのエージェントスキルです。洞窟壁画やエジプト壁画から、Van Gogh、Bauhaus、8-bitのピクセルアートまで、36種類のアートスタイルのレシピを収録。それぞれに、画像を描画してフレームごとにアニメーションさせるCanvasシーンが用意されています。キャラクターは生成したフレームを合成でき、背景やトランジション、動きはコードで処理します。
解説動画向けには、Kurzgesagt、Vox、ホワイトボードスケッチ、3Blue1Brown、keynote UIなどのスタイルを手本にした8種類のアニメーション文法と、JSON仕様に基づいて動作するパラメーター付きクリップを提供します。出力はフレーム精度で、横長、縦長、透過形式に対応。長尺スクロール用の骨組みを使うと、キャラクターが連続する絵画の中を歩き、境界ごとにスタイルを切り替えられます。
リポジトリには、参照アニメーションをカット、ビートグリッド、モーションヒートマップに分解するスクリプトと、納品前に安定性、動き、滑らかさを測定するQAスクリプトも含まれています。レンダリングにはuv、ffmpeg、Playwright Chromiumが必要です。
主な機能
- 01画像を描画・アニメーション化するCanvasシーン付きのアートスタイルレシピを36種類提供します。
- 02デモ映像とJSON駆動のクリップを備えた、解説動画向けのアニメーション文法を8種類提供します。
- 03横長、縦長、透過形式でフレーム精度の動画を出力します。
- 04キャラクターが連続するスタイルの中を移動する、長尺スクロール用の骨組みを備えています。
- 05参照アニメーションをカット、ビートグリッド、モーションヒートマップに分解します。
- 06安定性、動き、滑らかさを測定するQAスクリプトを実行します。
ユースケース
- 有名な絵画が動き出すような、スタイリッシュなアニメーションをコードで再現する。
- ナレーション原稿から、選んだスタイルの解説動画用セグメントを制作する。
- キャラクターがさまざまなアートスタイルの中を移動するトランジションシーケンスを作る。
- 参照アニメーションを分析し、カットのタイミングや動きのパターンを把握する。
クイックスタート
- 1
スキルをインストールする
npx skills add alchaincyf/huashu-art-motion - 2
プロジェクトフォルダーに移動する
cd huashu-art-motion - 3
サンプルシーンのフレームを1つレンダリングする(uv、ffmpeg、Playwright Chromiumが必要)
uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out 试渲 - 4
金融チャートのサンプル動画をレンダリングする
uv run --with playwright python scripts/engine/render.py --spec scripts/engine/examples/t3_finance_chart.json --out 财经图表.mp4
使う前に知っておきたいこと
- スキルの内容とドキュメントは中国語です。
- レンダリングにはuv、ffmpeg、Playwright Chromiumが必要です。
- デモによっては独自のキャラクター素材が必要です。また、プレゼンター主導の文法は参考実装にすぎません。
トピック
よくある質問
- huashu-art-motion とは?
- アートスタイルのレシピや解説動画の文法をコード駆動のアニメーションに変換し、絵画や図解を動かすエージェントスキル。 huashu-art-motionは、すべてコードでアニメーションを制作するためのエージェントスキルです。洞窟壁画やエジプト壁画から、Van Gogh、Bauhaus、8-bitのピクセルアートまで、36種類のアートスタイルのレシピを収録。それぞれに、画像を描画してフレームごとにアニメーションさせるCanvasシーンが用意されています。キャラクターは生成したフレームを合成でき、背景やトランジション、動きはコードで処理します。
- huashu-art-motion は無料で使えますか?ライセンスは?
- huashu-art-motion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- huashu-art-motion は今もメンテナンスされていますか?
- 活発にメンテナンス中。huashu-art-motion の最終コミットは 2026年10月16日 です。
- huashu-art-motion は何に使えますか?
- 有名な絵画が動き出すような、スタイリッシュなアニメーションをコードで再現する。 ナレーション原稿から、選んだスタイルの解説動画用セグメントを制作する。 キャラクターがさまざまなアートスタイルの中を移動するトランジションシーケンスを作る。 参照アニメーションを分析し、カットのタイミングや動きのパターンを把握する。
- huashu-art-motion のインストール方法は?
- スキルをインストールする: npx skills add alchaincyf/huashu-art-motion プロジェクトフォルダーに移動する: cd huashu-art-motion サンプルシーンのフレームを1つレンダリングする(uv、ffmpeg、Playwright Chromiumが必要): uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out 试渲 金融チャートのサンプル動画をレンダリングする: uv run --with playwright python scripts/engine/render.py --spec scripts/engine/examples/t3_finance_chart.json --out 财经图表.mp4
- huashu-art-motion はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/alchaincyf/huashu-art-motion
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
短いテーマから、HyperFramesでビート同期のモーショングラフィックス動画を作るClaude Codeスキル。
AIへの指示に使える、モーション・グラフィックス、カメラ、UI、Web、写真のエフェクト144種類を、名前・実例・プロンプト付きで検索できるライブラリ。
プロンプトから短いプロシージャルなCanvasアニメーションを作り、ヘッドレスブラウザーとffmpegでMP4に出力するClaude Codeスキル。
スクリプトから、ローカル音声・単語ごとのタイミング・Canvas描画を使った解説動画や製品デモを生成します。
Claude Codeなどのコーディングエージェントで、タイムライン駆動のシーンやビジュアルレビュー機能、Python製サウンドエンジンを使ってRemotion動画を制作できるモーションデザインツールキット。