About PinePaper Studio
Building the future of motion graphics: browser-based, AI-native, and accessible to everyone.
Our Mission
PinePaper Studio is democratizing motion graphics design. We believe powerful creative tools shouldn't require expensive software licenses, powerful computers, or years of training. By combining modern web technologies with AI-first design, we're making animated text and graphics accessible to creators worldwide.
What Makes Us Different
AI-Native Design
Built from the ground up to work seamlessly with AI assistants. Our comprehensive API allows AI agents to create, animate, and export graphics through natural language commands.
MP4 & GIF Export
Export to MP4 video (H.264 via WebCodecs) for Instagram, TikTok, and LinkedIn. Create GIFs for Twitter, Discord, and messaging apps. Plus animated SVG and PNG.
Timeline & Keyframes
Professional timeline editor with keyframe-based animations. Create choreographed sequences with precise timing control, 5 easing functions, and color interpolation.
Global by Default
Support for 59 languages and all writing systems including Chinese, Arabic, Hindi, Bengali, and emoji. Create content for any audience, anywhere in the world.
Browser-Based Freedom
No installation required. Works on any device with a modern browser. Your creations process locally, ensuring privacy and instant results without server roundtrips.
Template Library
Jump-start your creativity with pre-designed templates. Beautiful backgrounds, animated text, and professional layouts ready to customize. Save your own creations as reusable templates.
Dual Interface
Intuitive UI for human designers and a powerful API for AI agents and developers. Two interfaces, one mission: empowering creativity.
Print-Ready Design
Create professional print materials with A3, A4, A5, Letter, Legal, and Tabloid presets at 300 DPI. Export to PDF with bleed and trim marks, or high-DPI PNG (up to 600 DPI) for commercial printing.
Character Rigging
Skeletal animation with bones, FK propagation, and FABRIK IK solver. Save and interpolate poses, use preset rigs (humanoid, quadruped, spider), and drive animation via timeline keyframes.
Blending & Compositing
Per-item and per-group blend modes with 7 presets (ghost, neon, shadow, glow, xray, dreamy, vintage). Animated transitions, interactive hover/click modes, and proximity-based blend reactions.
Trim Paths & Masking
Animate stroke drawing with trim paths for "line draw" effects. Advanced masking with clip/subtract/intersect modes, mask stacking, animated reveals (14 presets), and vertex animation.
Procedural Relations
New relation types: driven_by (property linking), wiggle (procedural noise), and time_expression (math expressions with t). Plus nested compositions (precomps) with independent local timelines.
Infinite Canvas
Draw anywhere without boundaries. Unbounded canvas mode removes all size restrictions — pan and zoom freely across an infinite workspace.
Drawing Tools
6 professional drawing tools: pen, ink brush, marker, spray can, eraser, and fill bucket. Each with custom cursors and optimized stroke algorithms.
Perspective Rendering
Project primitives (cube, sphere, cylinder, torus, cone) onto the canvas with 5 projection types. GPU-accelerated rendering (WebGPU/WebGL2), orbital camera, and selectable & draggable perspective objects.
GPU Image Filters
Real-time image processing powered by WebGPU compute shaders with WebGL2 fallback. HSL adjustment, brightness, contrast, posterize, edge detection, color tint, vignette, blur, and filter chaining in a single GPU pass.
Image Segmentation
Freehand lasso tool to select and extract image regions at full native resolution. 8 cutout style presets (papercut, postcard, sticker, poster, mono, sketch, warm, cool) combine GPU filters with shadow effects.
Math & Science Engine
Numerical computing powered by math.js — ODE solvers (RK4/RK45), FFT spectrum analysis, function plotting, parametric curves, dynamic system simulation, and parametric surfaces in perspective. Real math, animated on canvas.
Compliance & Trust
WCAG 2.1 AA
Accessibility shadow tree for screen reader canvas navigation. Keyboard navigation, live region announcements, skip links, contrast auditing, and motion sensitivity checks. Uses pp:PinePaper ontology for semantic item descriptions.
Security Headers
HSTS with preload, Content Security Policy, X-Frame-Options, X-Content-Type-Options, Permissions-Policy. No camera, microphone, geolocation, or payment API access. Frame-ancestors restricted.
Privacy by Design
100% client-side processing. No server uploads, no cookies, no user data collection. All designs stay in your browser. Export locally — nothing leaves your device unless you choose to share.
Technology & Capabilities
Core Technology
- ▹ Paper.js: Vector graphics manipulation and rendering
- ▹ HTML5 Canvas: Real-time animation and export
- ▹ Vanilla JavaScript: Lightweight, fast, no dependencies
- ▹ Timeline Engine: Keyframe interpolation with easing functions
- ▹ Rigging Engine: Skeletal animation with FK/IK solvers and pose interpolation v0.4
- ▹ Design Knowledge Graph: Semantic ontology with 25+ relation types, 35+ math functions, and type hierarchy v0.4
- ▹ Rust/WASM Runtime: Optional WebAssembly acceleration for widget computation — 10-100x faster relation processing, no GC pauses. Falls back to JS when WASM isn't available v0.5
- ▹ pp:PinePaper Ontology: 55-token semantic vocabulary (items, relations, animations, masks, generators) — the language of PinePaper animations. Embedded in every exported widget v0.5
- ▹ Sentry: Error tracking and performance monitoring
Export Formats
- ▹ WebM Video: VP9 codec - best quality for animations
- ▹ MP4 Video: H.264 via WebCodecs API - ideal for social media
- ▹ GIF Animation: Via gif.js Web Workers - perfect for messaging
- ▹ PDF for Print: 300 DPI with bleed (3-5mm) and trim marks - professional printing
- ▹ High-DPI PNG: Up to 600 DPI for commercial print quality
- ▹ Animated SVG: Native SVG animations with SMIL
- ▹ Interactive Widget: Self-contained HTML with scene-specific tree-shaken code (~8-20KB). WASM-accelerated when available. Embed anywhere — no CDN, no API, no dependencies v0.5
- ▹ Lottie JSON: Industry-standard animation format. Auto-bakes procedural animations into native keyframes for any Lottie player v0.4
Animation Types
Effect System
PinePaper MCP Server
Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:
Quick Setup
1. Install globally:
npm install -g @pinepaper.studio/mcp-server
2. Add to Claude Desktop config:
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. Try it in Claude Desktop:
Available Tools
- • Create text, shapes, graphics
- • Add relations (25+ types: orbits, follows, wiggle, etc.)
- • Keyframe & preset animations
- • Character rigging (skeletons, bones, IK/FK)
- • Blending presets & transitions
- • Diagrams, maps, font creation
- • Generate procedural backgrounds (14 generators)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • Export SVG, training data
Supported AI Platforms
- • Claude Desktop
- • Any MCP-compatible client
- • Custom integrations via API
Design Knowledge Graph
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.
This novel approach enables AI agents to reason about complex animations and structural relationships, allowing for the generation of sophisticated motion graphics that maintain semantic consistency.
Attributed Research
The Design Knowledge Graph architecture draws on ideas from these peer-reviewed papers:
-
📄
Design Method Knowledge Graph Driven by Multi-Source Heterogeneous Data Applied Sciences, 2025 Demonstrates how knowledge graphs can capture design method relationships from heterogeneous sources — the foundation for our semantic relation system.
-
📄
Using Large Language Models to Tackle Fundamental Challenges in Graph Learning arXiv, 2025 Survey of LLM approaches to graph learning problems — informs how our MCP tools expose graph structure to AI agents.
-
📄
LLM-Empowered Knowledge Graph Construction: A Survey arXiv, 2025 Comprehensive survey of LLM-driven KG construction — the methodology behind our automated design graph extraction.
For Developers & AI Agents
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Create and manipulate text, shapes, and imported SVG elements
- • Apply animations (9 presets) and effects (sparkle, blast)
- • Create keyframe-based animations with timeline control
- • Export to MP4, GIF, SVG, or PNG via API
- • Use declarative relations (orbits, follows, attached_to)
- • Rig characters with skeletal animation and pose keyframes v0.4
- • Create nested compositions (precomps) with local timelines v0.4
- • Build automated workflows and batch processing systems
Example API Usage:
// 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 });
Our Vision
We're building the first truly AI-native motion graphics platform. While other tools bolt on AI as an afterthought, PinePaper was designed from day one to be controlled by both humans and machines.
Our goal is to make motion graphics as easy as writing text. Whether you're a designer creating content manually, or an AI assistant helping a user through natural language, PinePaper provides the tools to create professional animated graphics in seconds.
✨ What's Next?
v0.4 shipped character rigging, blending, trim paths, and cursive fonts. Up next: PinePaper Cloud — AI-assisted design powered by our design knowledge graph, with multilingual ontology publication and expanded MCP tools.
Community & Open Development
PinePaper Studio is developed transparently with our community. We welcome feedback, feature requests, and bug reports. Our development is guided by real user needs and the evolving landscape of AI-assisted creativity.
Free & Open
PinePaper Studio is Freeware v1.0 (currently v0.5.0-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.
License files for every bundled dependency are available in the source distribution under
node_modules/<package>/LICENSE. If we have missed
attributing a project, please let us know.