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)、軌道カメラ、および選択可能な及び引き込み可能な視点の目的.

v0.5
🎛

GPU イメージ フィルター

WebGL2のフォールバックが付いているWebGPUの計算のシェーダーによって動力を与えられる実時間イメージ処理。 HSLの調整、明るさ、コントラスト、ポスター化、エッジ検出、カラースクラッチ、ビネット、ブラー、および単一のGPUパスでチェーンするフィルタ.

v0.5

イメージの区分

完全なネイティブ解像度で画像領域を選択および抽出するためのフリーハンドラソツール。 8つの切り抜き様式のプリセット(ペーパーカット、ポストカード、ステッカー、ポスター、モノラル、スケッチ、暖かい、涼しい)は影の効果とGPUフィルターを結合します.

v0.5
📐

数学と科学エンジン

Math.js による数値計算 — ODE ソルバー (RK4/RK45), FFT スペクトラム解析, 関数プロット, パラメトリック曲線, 動的システムシミュレーション, 観点でのパラメトリック表面. キャンバスにアニメーション化されたリアル数学.

コンプライアンスと信頼

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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

アニメーションタイプ

パルス 回転 バウンス フェード 揺れ スイング シェイク ゼリー タイプライター カスタムパス キーフレームアニメーション トリムパス 空間モーションパス パスモーフィング 13 Deform Presets 100+ Animation Presets

エフェクトシステム

10 Visual Effects Sparkle Blast Fire Smoke Rain Snow Confetti Ripple Glow Electric 14 Mask Presets 19 Blend Presets 12 Blend Modes

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を介してルーティングします.

Skill docs →

クイックセットアップ

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で試す:

「HELLOという赤い脈動テキストを作成する」 「土をかぶせる」

利用可能なツール

  • •テキスト、形状、グラフィックを作成
  • • 関係の追加(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エージェントは複雑なアニメーションと構造的関係について推論でき、セマンティックな一貫性を維持する高度なモーショングラフィックスの生成が可能になります。

参考研究文献

デザインナレッジグラフのアーキテクチャは、以下の査読済み論文のアイデアに基づいています:

開発者 & 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.

59
対応言語
25+
リレーションタイプ
111+
API Methods
7
エクスポート形式

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 Freeware
    Free 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 Domain
    The 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 MIT
    The Model Context Protocol server is open source and may be forked, modified, and redistributed. See github.com/pinepaper/mcp-server.
  • PineWidget runtime Embeddable
    The standalone widget player ships unobfuscated and is intended for third-party embedding.
Paper.js MIT
Vector graphics rendering foundation
math.js Apache-2.0
Expression evaluation, ODE solvers, numerical analysis
opentype.js MIT
Font glyph parsing for the Font Studio
planck-js MIT
Box2D physics engine for canvas item simulation
d3-geo ISC
Geographic projections for the Map System
d3-geo-projection ISC
Extended map projections (Robinson, Mollweide, Winkel)
topojson-client ISC
TopoJSON-to-GeoJSON converter for map data
gif.js MIT
Animated GIF export via Web Workers
jsPDF MIT
PDF export with bleed and trim marks
@sentry/browser MIT
Error tracking (production build only)
DOMPurify Apache-2.0 OR MPL-2.0
Cure53's XSS sanitizer — runs on every imported SVG before Paper.js sees it, so a malicious file can't smuggle scripts or event handlers into the editor.
@observablehq/plot ISC
Data visualization scales and transforms for the Chart System
@huggingface/transformers Apache-2.0 Coming soon
Vendored ESM build + ONNX runtime WebAssembly. Will power on-device video understanding (object detection on imported clips) once the feature ships. Listed here for license attribution; not yet wired to any user-visible affordance.
DETR ResNet-50 (q4) Apache-2.0 Coming soon
Facebook AI's DETR object-detection model, q4-quantized for browser inference. Listed here for license attribution; not yet wired to any user-visible affordance.
Qwen2.5-1.5B-Instruct Apache-2.0
Alibaba's Qwen2.5 instruction-tuned LLM. Quantized (q4f16) and run fully on-device via WebGPU to power the PinePaper client AI assistant — prompts never leave your device. A smaller Qwen2.5-0.5B-Instruct (also Apache-2.0) is used as the low-storage fallback.
WebLLM (MLC) Apache-2.0
MLC-AI's in-browser LLM runtime — loads the Qwen2.5 weights and runs inference on WebGPU for the on-device assistant.
LibreTranslate AGPL-3.0 Build-time
Self-hosted machine-translation API used at build time to translate the editor UI, User Guide, and Knowledge Hub into the supported languages. Not bundled or network-served by the app — only its output (the translated text) ships.
Argos Translate MIT Build-time
The open neural translation engine (and open language models) that LibreTranslate runs under the hood for our build-time localization pipeline.

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.