PinePaper Studioについて
モーショングラフィックスの未来を構築:ブラウザベース、AIネイティブ、誰もがアクセス可能。
私たちのミッション
PinePaper Studioはモーショングラフィックスデザインを民主化しています。強力なクリエイティブツールは高額なソフトウェアライセンス、高性能コンピューター、何年もの訓練を必要とすべきではないと信じています。最新のWeb技術とAIファーストデザインを組み合わせることで、世界中のクリエイターにアニメーションテキストとグラフィックスを身近なものにしています。
私たちの違い
AIネイティブデザイン
AIアシスタントとシームレスに連携するためにゼロから構築。包括的なAPIにより、AIエージェントは自然言語コマンドでグラフィックスの作成、アニメーション、エクスポートが可能です。
MP4 & GIFエクスポート
Instagram、TikTok、LinkedIn向けにMP4ビデオ(WebCodecs経由のH.264)にエクスポート。Twitter、Discord、メッセージングアプリ向けにGIFを作成。さらにアニメーションSVGとPNGも対応。
タイムライン & キーフレーム
キーフレームベースのアニメーションを備えたプロフェッショナルなタイムラインエディタ。5つのイージング関数と色補間による精密なタイミング制御でコレオグラフシーケンスを作成。
デフォルトでグローバル
中国語、アラビア語、ヒンディー語、ベンガル語、絵文字を含む52の言語とすべての書記体系をサポート。世界中のあらゆる視聴者向けにコンテンツを作成できます。
ブラウザベースの自由
インストール不要。モダンブラウザを搭載したあらゆるデバイスで動作。ローカルで処理されるため、プライバシーが保証され、サーバーラウンドトリップなしで即座に結果が得られます。
テンプレートライブラリ
デザイン済みテンプレートで創造性をジャンプスタート。美しい背景、アニメーションテキスト、カスタマイズ可能なプロフェッショナルレイアウト。自分の作品を再利用可能なテンプレートとして保存。
デュアルインターフェース
人間のデザイナー向けの直感的なUIとAIエージェント・開発者向けの強力なAPI。2つのインターフェース、1つのミッション:創造性の向上。
印刷対応デザイン
A3、A4、A5、Letter、Legal、Tabloidプリセットで300 DPIのプロフェッショナルな印刷物を作成。塗り足しとトンボ付きPDF、または商業印刷用の高DPI PNG(最大600 DPI)にエクスポート。
キャラクターリギング
ボーン、FK伝播、FABRIK IKソルバーによるスケルタルアニメーション。ポーズの保存と補間、プリセットリグ(ヒューマノイド、四足動物、クモ)の使用、タイムラインキーフレームによるアニメーション駆動。
ブレンディング & コンポジティング
アイテムごと・グループごとのブレンドモードと7つのプリセット(ゴースト、ネオン、シャドウ、グロー、X線、ドリーミー、ビンテージ)。アニメーション遷移、インタラクティブなホバー/クリックモード、近接ベースのブレンド反応。
トリムパス & マスキング
トリムパスで「線描画」効果のストローク描画をアニメーション化。クリップ/差し引き/交差モード、マスクスタッキング、アニメーション表示(14プリセット)、頂点アニメーションによる高度なマスキング。
プロシージャルリレーション
新しいリレーションタイプ:driven_by(プロパティリンク)、wiggle(プロシージャルノイズ)、time_expression(tを使った数式)。さらに独立したローカルタイムラインを持つネストコンポジション(プリコンプ)。
無限のキャンバス
境界なしでどこでも描画します。 無制限のキャンバスモードは、無限のワークスペースを渡るすべてのサイズの制限を自由に削除します.
描画ツール
6つの専門のデッサン用具:ペン、インク ブラシ、マーカー、スプレー缶、消しゴムおよびバケツを満たして下さい。 カスタムカーソルと最適化されたストロークアルゴリズムでそれぞれ.
パースペクティブレンダリング
5つのプロジェクションタイプを持つキャンバスにプロジェクトプリミティブ(キューブ、スフィア、シリンダー、トーラス、コーン)。 GPUによって加速されるレンダリング(WebGPU/WebGL2)、軌道カメラ、および選択可能な及び引き込み可能な視点の目的.
GPU イメージ フィルター
WebGL2のフォールバックが付いているWebGPUの計算のシェーダーによって動力を与えられる実時間イメージ処理。 HSLの調整、明るさ、コントラスト、ポスター化、エッジ検出、カラースクラッチ、ビネット、ブラー、および単一のGPUパスでチェーンするフィルタ.
イメージの区分
完全なネイティブ解像度で画像領域を選択および抽出するためのフリーハンドラソツール。 8つの切り抜き様式のプリセット(ペーパーカット、ポストカード、ステッカー、ポスター、モノラル、スケッチ、暖かい、涼しい)は影の効果とGPUフィルターを結合します.
数学と科学エンジン
Math.js による数値計算 — ODE ソルバー (RK4/RK45), FFT スペクトラム解析, 関数プロット, パラメトリック曲線, 動的システムシミュレーション, 観点でのパラメトリック表面. キャンバスにアニメーション化されたリアル数学.
コンプライアンスと信頼
WCAG 2.1 AAの特長
スクリーン・リーダーのキャンバスの運行のためのアクセシビリティの影の木。 キーボードナビゲーション、ライブ領域アナウンス、リンクをスキップ、コントラストの監査、およびモーション感度チェック。 pp:PinePaper ontology を使用して、意味のある項目の説明を行います.
セキュリティヘッダー
HSTSプリロード、CSP、X-Frame-Options、Permissions-Policy。カメラ、マイク、位置情報、決済APIへのアクセスなし。
プライバシー・バイ・デザイン
100%クライアントサイド処理。サーバーアップロードなし、Cookieなし、データ収集なし。すべてのデザインはブラウザに残ります。
テクノロジー & 機能
コアテクノロジー
- ▹ Paper.js: ベクターグラフィックスの操作とレンダリング
- ▹ HTML5 Canvas: リアルタイムアニメーションとエクスポート
- ▹ バニラJavaScript: 軽量、高速、依存関係なし
- ▹ タイムラインエンジン: イージング関数によるキーフレーム補間
- ▹ リギングエンジン: FK/IKソルバーとポーズ補間によるスケルタルアニメーション バージョン
- ▹ デザインナレッジグラフ: 25以上のリレーションタイプ、35以上の数学関数、型階層を持つセマンティックオントロジー バージョン
- ▹ Rust/WASMランタイム: ウィジェット計算用のオプションWebAssemblyアクセラレーション — リレーション処理10-100倍高速、GCポーズなし。 v0.5
- ▹ pp:PinePaperオントロジー: 55トークンのセマンティック語彙(アイテム、リレーション、アニメーション、マスク、ジェネレーター)— PinePaperアニメーションの言語。 v0.5
- ▹ Sentry: エラー追跡とパフォーマンス監視
エクスポート形式
- ▹ WebMビデオ: VP9コーデック - アニメーションに最高品質
- ▹ MP4ビデオ: WebCodecs API経由のH.264 - ソーシャルメディアに最適
- ▹ GIFアニメーション: gif.js Web Workers経由 - メッセージングに最適
- ▹ 印刷用PDF: 300 DPI、塗り足し(3-5mm)とトンボ付き - 商業印刷用
- ▹ 高DPI PNG: 最大600 DPI - 商業印刷品質
- ▹ アニメーションSVG: SMIL付きネイティブSVGアニメーション
- ▹ インタラクティブウィジェット: シーン固有のコードを含む自己完結型HTML(約8-20KB)。WASM高速化。どこにでも埋め込み可能。 v0.5
- ▹ Lottie JSON: 業界標準のアニメーションフォーマット。プロシージャルアニメーションをネイティブキーフレームに自動変換。 v0.4
アニメーションタイプ
エフェクトシステム
On-Device AI EXPERIMENTAL
PinePaper supports client-side LLMs that run entirely in your browser — no account, nothing sent to a server. Chrome's built-in Gemini Nano, or any other in-browser model, can follow this experimental process to let its agent talk to PinePaper's tools directly.
The model emits PinePaper tool calls constrained by a grammar (a JSON schema on Chrome's Prompt API, an EBNF grammar on WebLLM), so the output is always valid and runs straight onto the canvas — a prompt becomes a scene in one step. Find it under AI / Code → Assistant in the editor. Being on-device, it's free and private; quality tracks whatever small model your browser provides, while the Cloud tab and MCP below give you larger models for higher fidelity.
PinePaper MCPサーバー
Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:
Pair MCPと公式クロードスキル
スキルは、PinePaperの到達時にクロードを教え、正しく運転する方法を教えます。 HTML/CSSを生成するのではなく、一度インストールして、普通の英語に尋ねる - 「このロゴをアニメート」、そしてClaudeはPinePaperを介してルーティングします.
クイックセットアップ
1. グローバルにインストール:
npm install -g @pinepaper.studio/mcp-server
2. Claude Desktop設定に追加:
macOS: ~/Library/Application
Support/Claude/claude_desktop_config.json
ウィンドウズ:
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"pinepaper": {
"command": "npx",
"args": ["-y", "@pinepaper.studio/mcp-server"]
}
}
}
3. Claude Desktopで試す:
利用可能なツール
- •テキスト、形状、グラフィックを作成
- • 関係の追加(25種類以上:軌道、以下、wiggleなど)
- •キーフレーム&プリセットアニメーション
- • キャラクターのリギング(骨、骨、IK/FK)
- • プリセットと移行をブレンド
- •図、地図、フォント作成
- • 手続きの背景を生成します(14ジェネレータ)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- •輸出SVGの訓練データ
対応AIプラットフォーム
- • クロードデスクトップ
- •任意のMCP互換クライアント
- •APIによる注文の統合
デザインナレッジグラフ
Unveiled in v0.4, the Design Knowledge Graph is a semantic reasoning layer that maps relationships between visual elements. Unlike traditional tools that only store pixel or vector data, PinePaper understands the intent behind the design—whether an object "orbits" another, "points at" a target, or "follows" a path.
この新しいアプローチにより、AIエージェントは複雑なアニメーションと構造的関係について推論でき、セマンティックな一貫性を維持する高度なモーショングラフィックスの生成が可能になります。
参考研究文献
デザインナレッジグラフのアーキテクチャは、以下の査読済み論文のアイデアに基づいています:
-
📄
マルチソース異種データ駆動型デザインメソッドナレッジグラフ 応用科学, 2025 ナレッジグラフが異種ソースからのデザインメソッドの関係を捉える方法を実証 — セマンティックリレーションシステムの基盤。
- 📄
- 📄
開発者 & AIエージェント向け
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • テキスト、シェイプ、インポートしたSVG要素の作成と操作
- • アニメーション(9プリセット)とエフェクト(スパークル、ブラスト)の適用
- • タイムライン制御によるキーフレームベースのアニメーション作成
- • API経由でMP4、GIF、SVG、PNGにエクスポート
- • 宣言的リレーション(orbits、follows、attached_to)の使用
- • スケルタルアニメーションとポーズキーフレームによるキャラクターリギング バージョン
- • ローカルタイムラインを持つネストコンポジション(プリコンプ)の作成 バージョン
- • 自動化ワークフローとバッチ処理システムの構築
API使用例:
// Create animated text
const text = app.create('text', {
content: 'Hello World', x: 400, y: 300, fontSize: 48, color: '#4a9eff'
});
// Apply animation preset
app.animate(text, { animationType: 'pulse' });
// Keyframe animation with easing
app.create('circle', {
x: 400, y: 300, radius: 50, color: '#ef4444',
animationType: 'keyframe',
keyframes: [
{ time: 0, properties: { y: 100, opacity: 0 } },
{ time: 1, properties: { y: 300, opacity: 1 }, easing: 'bounce' }
]
});
// Declarative relations
app.addRelation(moonId, earthId, 'orbits', { radius: 100, speed: 0.5 });
ビジョン
私たちは真にAIネイティブなモーショングラフィックスプラットフォームを初めて構築しています。他のツールがAIを後付けで追加する中、PinePaperは初日から人間とマシンの両方によって制御されるよう設計されました。
私たちの目標は、モーショングラフィックスをテキストを書くのと同じくらい簡単にすることです。手動でコンテンツを作成するデザイナーも、自然言語でユーザーを支援するAIアシスタントも、PinePaperはプロフェッショナルなアニメーショングラフィックスを数秒で作成するツールを提供します。
✨ 次のステップ
v0.5 shipped data-driven charts, vision-puppeteering (webcam → rigged character), the measurement system with rulers + snap, glTF / BVH export, and the Claude Skill + MCP plugin marketplace. Up next: deeper agent integrations, animation state machines as a first-class primitive, and a growing template library across art, education, and motion-design domains.
コミュニティ & オープン開発
PinePaper Studioはコミュニティと共に透明に開発されています。フィードバック、機能リクエスト、バグ報告を歓迎します。開発はユーザーの実際のニーズとAI支援クリエイティビティの進化する状況に導かれています。
フリー & オープン
PinePaper Studio is Freeware v1.0 (currently v0.5.2-beta) and free to use for personal and commercial purposes. Create unlimited animations, export unlimited files, and use them in any project without restrictions. We believe powerful creative tools should be accessible to everyone.
Licensing & Open Source Credits
PinePaper Studio is built on the shoulders of giants. We are grateful to the maintainers of these open-source projects, without which PinePaper would not exist. Each library is bundled under its original license — please refer to the linked source for full terms.
PinePaper Studio itself
-
▹
Application code Proprietary FreewareFree to use; source code is not licensed for redistribution, modification, or forking. See LICENSE and Terms of Service.
-
▹
PinePaper Ontology (
pp:vocabulary) CC0 1.0 Public DomainThe semantic vocabulary and Knowledge Graph are dedicated to the public domain. Use pp: triples in your own canvases, exports, training data, or models with no attribution required. See /ontology/. -
▹
MCP Server MITThe Model Context Protocol server is open source and may be forked, modified, and redistributed. See github.com/pinepaper/mcp-server.
-
▹
PineWidget runtime EmbeddableThe standalone widget player ships unobfuscated and is intended for third-party embedding.
Each linked project's repository carries its own license file.
We ship obfuscated production builds so a local node_modules
tree isn't in the distribution; we keep this list above and these upstream links current
instead. If we have missed attributing a project, please
let us know.