關於 PinePaper Studio

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

我們的使命

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

我們的獨特之處

🤖

AI 原生設計

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

🎬

MP4 與 GIF 匯出

匯出為 MP4 影片(H.264 透過 WebCodecs)供 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)用於商業印刷。

页:1
🦴

角色綁定

骨骼動畫搭配骨骼、FK 傳播和 FABRIK IK 求解器。儲存和插值姿勢,使用預設骨架(人形、四足、蜘蛛),並透過時間軸關鍵幀驅動動畫。

页:1
🎭

混合與合成

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

页:1
✂️

修剪路徑與遮罩

使用修剪路徑動畫化描邊繪製,實現「線條繪製」效果。進階遮罩搭配裁剪/減去/交集模式、遮罩堆疊、動畫揭示(14 種預設)和頂點動畫。

页:1
🔗

程序關係

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

页:1
🌐

无限的帆布

随处画无边. 无限制的帆布模式消除所有大小限制——跨无限工作空间的泛和自由放大.

页:1
🖌️

绘图工具

6个专业绘画工具:笔,墨刷,标注,喷水罐,擦拭,填桶. 每个都有自定义光标和优化的中风算法.

页:1
🧊

视角渲染

项目原始物(立方体,球体,圆柱体,托鲁斯体,锥体)在画布上,有5种投影类型. GPU加速渲染(WebGPU/WebGL2),轨道相机,以及可选择和可拖动的视角对象.

v0.5
🎛

GPU 图像过滤器

实时图像处理由WebGPU用WebGL2逆变电源计算荫影. HSL调整,亮度,对比度,海报化,边缘检测,彩色色锡特,Vignette,模糊度,以及过滤链在一个单一的GPU通过中.

v0.5

图像分割

自由手拉索工具,在完全本土分辨率下选择和提取图像区域. 8个剪切样式预设(剪纸,明信片,贴纸,海报,单幅,草图,温暖,凉爽)将GPU滤镜与阴影效果结合.

v0.5
📐

数学和科学引擎

数计算由数学.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 画像 : 即時動畫與匯出
  • 原生 JavaScript: 輕量、快速、無依賴
  • 時間軸引擎: 關鍵幀插值與緩動函數
  • 綁定引擎: 骨骼動畫搭配 FK/IK 求解器與姿勢插值 页:1
  • 設計知識圖譜: 語義本體論含 25+ 關係類型、35+ 數學函數與類型階層 页:1
  • Rust/WASM运行时: 可选的WebAssembly加速——关系处理速度提高10-100倍,无GC暂停。 v0.5
  • pp:PinePaper本体: 55个语义标记词汇(项目、关系、动画、遮罩、生成器)——PinePaper动画的语言。 v0.5
  • 哨兵: 錯誤追蹤與效能監控

匯出格式

  • WebM 视频 : VP9 編碼器 - 動畫最佳品質
  • MP4 视频 : H.264 透過 WebCodecs API - 適合社群媒體
  • GIF 动画 : 透過 gif.js Web Workers - 適合訊息傳遞
  • 列印用 PDF: 300 DPI 含出血 (3-5mm) 與裁切標記 - 專業印刷
  • 高 DPI PNG: 高達 600 DPI 的商業印刷品質
  • 動畫 SVG: 原生 SVG 動畫搭配 SMIL
  • 交互式小部件: 包含场景特定代码的独立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

"技能"教克劳德何时到达PinePaper,如何正确驱动. 用简单的英语安装一次并询问——"激活这个标志","制作一个脉冲LIVE徽章"——和克劳德通过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+ 種類型:環繞、跟隨、晃動等)
  • • 關鍵幀與預設動畫
  • • 角色綁定(骨架、骨骼、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
  • 使用宣告式關係(環繞、跟隨、附著)
  • 使用骨骼動畫和姿勢關鍵幀綁定角色 页:1
  • 建立搭配本地時間軸的巢狀合成(預合成) 页:1
  • 建立自動化工作流程和批次處理系統

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.