關於 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)用於商業印刷。
角色綁定
具有骨骼、FK 傳播和 FABRIK IK 求解器的骨骼動畫。儲存和內插姿勢,使用預設綁定(人形、四足、蜘蛛),透過時間軸關鍵影格驅動動畫。
混合 & 合成
每項和每組的混合模式以及 7 種預設(幽靈、霓虹、陰影、發光、X 光、夢幻、復古)。動畫過渡、互動懸停/點擊模式和近距混合反應。
修剪路徑 & 遮罩
使用修剪路徑為「畫線」效果製作筆畫動畫。具有裁剪/減去/相交模式、遮罩堆疊、動畫揭示(14 種預設)和頂點動畫的進階遮罩。
程序化關係
新關係類型:driven_by(屬性連結)、wiggle(程序化雜訊)和 time_expression(含 t 的數學運算式)。還有具有獨立本地時間軸的巢狀合成(預合成)。
無限的畫面
無邊界地畫 無限制的畫布模式可以移除所有大小限制——跨無限的工作區自由放大.
繪圖工具
6個專業的繪畫工具:筆、墨水刷、標記、噴水罐、擦除器和填滿桶。 每個都有自訂的游標和优化的中風算法 .
透視
原始專案(立方體、球體、圆柱體、托魯斯、锥體), 包含5种投影型態。 GPU 加速渲染( WebGPU/ WebGL2), 轨道相機, 以及可選擇和拖曳的视角物件 .
GPU 影像过滤器
WebGPU 用 WebGL2 逆轉計算陰影的实时影像處理功能 。 HSL 調整, 亮度, 反照度, 邊緣測試, 彩色色、 黃色、 模糊.
影像分割
自由手拉索工具以完全本地解析度選擇並提取影像區域 。 8個剪切樣式預置(剪纸、明信片、貼紙、海報、單張、素描、溫暖、酷).
數學科學引擎( S)
數學.js- ODE 解析器( RK4/ RK45), FFT 频谱分析, 函數計算, 參數曲線, 動力系統模擬, 以及參數表面角度。 真正的數學 畫布上的動畫.
合規與信任
技術 & 能力
核心技術
- ▹ 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
動畫類型
效果系統
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 .
快速設定
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 中試用:
可用工具
- • 建立文字、形狀、圖形
- • 新增關係(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.
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.