關於 PinePaper Studio

建構動態圖形的未來:基於瀏覽器、AI 原生、人人可用。

我們的使命

PinePaper Studio 正在使動態圖形設計民主化。我們相信強大的創意工具不應該需要昂貴的軟體授權、高效能電腦或多年的訓練。透過將現代 Web 技術與 AI 優先設計相結合,我們正在讓全世界的創作者都能使用動畫文字和圖形。

我們的不同之處

🤖

AI 原生設計

從零開始建構,與 AI 助手無縫協作。全面的 API 允許 AI 代理透過自然語言指令建立、動畫化和匯出圖形。

🎬

MP4 & GIF 匯出

匯出為 MP4 影片(透過 WebCodecs 的 H.264)用於 Instagram、TikTok 和 LinkedIn。為 Twitter、Discord 和通訊應用建立 GIF。還支援動畫 SVG 和 PNG。

⏱️

時間軸 & 關鍵影格

具有關鍵影格動畫的專業時間軸編輯器。透過 5 種緩動函數和色彩內插實現精準時序控制,建立編排序列。

🌍

預設全球化

支援 52 種語言和所有書寫系統,包括中文、阿拉伯文、印地文、孟加拉文和表情符號。為世界任何地方的任何受眾建立內容。

🚀

瀏覽器的自由

無需安裝。在任何配有現代瀏覽器的裝置上運行。本地處理確保隱私,無需伺服器往返即可獲得即時結果。

📋

範本庫

使用預設計範本快速啟動創意。精美背景、動畫文字和可自訂的專業版面。將您的作品儲存為可重複使用的範本。

🎨

雙重介面

為人類設計師提供直覺 UI,為 AI 代理和開發者提供強大 API。兩個介面,一個使命:賦能創意。

🖨️

印刷就緒設計

使用 A3、A4、A5、Letter、Legal 和 Tabloid 預設以 300 DPI 建立專業印刷品。匯出帶出血和裁切標記的 PDF,或高 DPI PNG(最高 600 DPI)用於商業印刷。

v0.4
🦴

角色綁定

具有骨骼、FK 傳播和 FABRIK IK 求解器的骨骼動畫。儲存和內插姿勢,使用預設綁定(人形、四足、蜘蛛),透過時間軸關鍵影格驅動動畫。

v0.4
🎭

混合 & 合成

每項和每組的混合模式以及 7 種預設(幽靈、霓虹、陰影、發光、X 光、夢幻、復古)。動畫過渡、互動懸停/點擊模式和近距混合反應。

v0.4
✂️

修剪路徑 & 遮罩

使用修剪路徑為「畫線」效果製作筆畫動畫。具有裁剪/減去/相交模式、遮罩堆疊、動畫揭示(14 種預設)和頂點動畫的進階遮罩。

v0.4
🔗

程序化關係

新關係類型:driven_by(屬性連結)、wiggle(程序化雜訊)和 time_expression(含 t 的數學運算式)。還有具有獨立本地時間軸的巢狀合成(預合成)。

v0.4
🌐

無限的畫面

無邊界地畫 無限制的畫布模式可以移除所有大小限制——跨無限的工作區自由放大.

v0.4
🖌️

繪圖工具

6個專業的繪畫工具:筆、墨水刷、標記、噴水罐、擦除器和填滿桶。 每個都有自訂的游標和优化的中風算法 .

v0.4
🧊

透視

原始專案(立方體、球體、圆柱體、托魯斯、锥體), 包含5种投影型態。 GPU 加速渲染( WebGPU/ WebGL2), 轨道相機, 以及可選擇和拖曳的视角物件 .

v0.5
🎛

GPU 影像过滤器

WebGPU 用 WebGL2 逆轉計算陰影的实时影像處理功能 。 HSL 調整, 亮度, 反照度, 邊緣測試, 彩色色、 黃色、 模糊.

v0.5

影像分割

自由手拉索工具以完全本地解析度選擇並提取影像區域 。 8個剪切樣式預置(剪纸、明信片、貼紙、海報、單張、素描、溫暖、酷).

v0.5
📐

數學科學引擎( S)

數學.js- ODE 解析器( RK4/ RK45), FFT 频谱分析, 函數計算, 參數曲線, 動力系統模擬, 以及參數表面角度。 真正的數學 畫布上的動畫.

合規與信任

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

螢幕讀者畫布導覽可存取的影子樹 。 鍵盤導航、直播區域公告、跳過連結、反比計算、以及運動敏感度檢查。 使用 pp:PinePaper本体學來描述語义項目 .

🔒

安全標頭

HSTS預載、CSP、X-Frame-Options、Permissions-Policy。無攝影機、麥克風、地理位置或支付API存取。

👁

隱私設計

100%用戶端處理。無伺服器上傳、無Cookie、無資料收集。所有設計都保存在您的瀏覽器中。

技術 & 能力

核心技術

  • Paper.js: 向量圖形處理與算繪
  • HTML5 Canvas: 即時動畫與匯出
  • 原生 JavaScript: 輕量、快速、無相依性
  • 時間軸引擎: 帶緩動函數的關鍵影格內插
  • 綁定引擎: 具有 FK/IK 求解器和姿勢內插的骨骼動畫 v0.4
  • 設計知識圖譜: 具有 25+ 關係類型、35+ 數學函數和類型階層的語意本體 v0.4
  • 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:

MCP 與克勞德·斯克爾特官方

Skill教Claude什麼時候才能拿到PinePaper, 安裝一次並用簡易的英語來問 —— “ 啟動此標誌 ” , “ 做一個 Pulsing LIVE 徽章 ” , 以及 Claude 路由 PinePaper 而不是產生 HTML/ CSS .

Skill docs →

快速設定

1. 全域安裝:

npm install -g @pinepaper.studio/mcp-server

2. 新增至 Claude Desktop 設定:

馬科斯: ~/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+ 種類型:orbits、follows、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)
  • 使用骨骼動畫和姿勢關鍵影格進行角色綁定 v0.4
  • 建立具有本地時間軸的巢狀合成(預合成) v0.4
  • 建構自動化工作流程和批次處理系統

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.