关于 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)用于商业印刷。

页: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 Canvas: 实时动画与导出
  • 原生 JavaScript: 轻量、快速、无依赖
  • 时间线引擎: 带缓动函数的关键帧插值
  • 绑定引擎: 具有 FK/IK 求解器和姿势插值的骨骼动画 页:1
  • 设计知识图谱: 具有 25+ 关系类型、35+ 数学函数和类型层次的语义本体 页:1
  • Rust/WASM运行时: 可选的WebAssembly加速——关系处理速度提高10-100倍,无GC暂停。WASM不可用时回退到JS。 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加速。可嵌入任何地方——无CDN、无API、无依赖。 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 配置:

macOS ~/Library/Application Support/Claude/claude_desktop_config.json
Windows %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
  • 使用声明式关系(orbits、follows、attached_to)
  • 使用骨骼动画和姿势关键帧进行角色绑定 页: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.