個人dev

概要

利用している技術

【主要技術】
TypeScript / JavaScript / PixiJS v8 / WebGL / Canvas / WebCodecs / mediabunny

【アニメーション】
独自タイムラインエンジン、宣言的DSL、キーフレームアニメーション、イージング、ネスト構造、フィルター、マスク、トランジション

【映像・音声】
ブラウザ上でのMP4・WebM・MOV書き出し、音声合成、音楽生成、オーディオリアクティブ表現

【3D】
2.5Dレイヤー、カメラ制御、Three.js連携（オプション）

【AI連携】
LLMによる映像構成データ生成、AIエージェント向けスキル、TypeScriptによる型安全な構造定義

【公開形態】
GitHub / npm / MIT License

サービスのPR点

最大の特徴は、アニメーションを命令的なコードではなく「データ」として表現できることです。

独自のタイムラインエンジンにより、複雑なモーショングラフィックスも構造化して管理できます。

生成AIとの相性も重視しており、ChatGPTやClaudeなどのAIエージェントに映像制作を依頼し、生成されたデータからブラウザ上で動画を書き出すことができます。

さらに、フィルターやパーティクル、シーン遷移、音声合成、2.5D・3D表現まで対応。

ギャラリーにはAIがデータとして制作した多数の作品を掲載しています。ぜひ実際に動くデモをご覧ください！

今後の追加機能など

現在も継続的に開発中です。

今後は、AIによる映像制作ワークフローの改善、アニメーション表現の充実、開発者向けAPIやドキュメントの整備などを進めていきたいと考えています。

また、実際の制作で得られたフィードバックをもとに、より柔軟で扱いやすい映像制作環境を目指します。

その他メッセージ

オープンソース（MITライセンス）で公開しています。

GitHub：
https://github.com/yjmtmtk/pixi-effects

デモ・ギャラリー：
https://yjmtmtk.github.io/pixi-effects/

npm：
https://www.npmjs.com/package/pixi-effects

まだ実験的な開発段階のため、APIが変更される可能性があります。

GitHubでのStar、Issue、Pull Request、技術的なフィードバックなど大歓迎です！