Nípa PinePaper Studio

Kíkọ́ ọjọ́ iwájú àwòrán ìṣípayá: tí ó dá lórí aṣàwákiri, aṣáájú-AI, àti àǹfààní fún gbogbo ènìyàn.

Ète Wa

PinePaper Studio ń mú ìjọba-àwọn-ènìyàn wá sí àpẹẹrẹ àwòrán ìṣípayá.

Ohun Tí Ó Yà Wá Sọ́tọ̀

🤖

Àpẹẹrẹ Aṣáájú-AI

Tí a kọ́ láti ìsàlẹ̀ láti ṣiṣẹ́ pẹ̀lú àwọn olùrànlọ́wọ́ AI. Koodu wa le jẹ́ oye nípasẹ̀ Claude, ChatGPT, àti àwọn mìíràn.

🎬

Ìgbéjáde MP4 & GIF

Ìgbéjáde sí fídíò MP4 fún Instagram, TikTok, YouTube. Ìṣípayá GIF fún fífi ránṣẹ́.

⏱️

Àkókò-ìlà & Nẹ́tìwọ́kì-Kókó

Olóòtú àkókò-ìlà ọjọgbọn pẹ̀lú ìṣípayá tí ó dá lórí nẹ́tìwọ́kì-kókó.

🌍

Àgbáyé nípa Àpapọ̀

Àtìlẹyìn fún àwọn èdè 59 àti gbogbo ètò kíkọ̀. Dá àkóónú fún àwọn olùgbọ́ kankan.

🚀

Òmìnira Aṣàwákiri

Kò sí ìfisílẹ̀ tí a nílò. Ó ń ṣiṣẹ́ lórí ohun-èlò èyíkéyìí tí ó ní aṣàwákiri ode-oni.

📋

Ilé-ìkàwé Àpẹẹrẹ

Bẹ̀rẹ̀ ìṣẹ̀dá rẹ pẹ̀lú àwọn àpẹẹrẹ tí a ti ṣe. Àpẹẹrẹ dáradára fún mídíà àwùjọ, iṣòwò, àti ẹ̀kọ́.

🎨

Ìdojúkọ Méjì

UI tó rọrùn fún àwọn olùṣe àpẹẹrẹ àti API alágbára fún àwọn aṣojú AI.

🖨️

Àpẹẹrẹ Títẹ̀ Sí Ìwé

Ṣẹ̀dá ohun-èlò títẹ̀ ọjọgbọn pẹ̀lú A3, A4, A5, Letter, Tabloid.

v0.4
🦴

Ṣíṣe Ìhùwàsí Àwòrán

Ìṣípayá egungun pẹ̀lú àwọn egungun, ìtànkálẹ̀ FK, àti àwọn olùyanjú FABRIK IK.

v0.4
🎭

Ìdàpọ̀ àti Ìkójọpọ̀

Àwọn ọ̀nà ìdàpọ̀ fún ohun kọ̀ọ̀kan àti ẹgbẹ́ pẹ̀lú àwọn ìṣètò 7.

v0.4
✂️

Ọ̀nà Gígé & Ìbòjú

Mú kí ìyàwòrán ṣíṣípayá pẹ̀lú ọ̀nà gígé fún ipa ìlà.

v0.4
🔗

Àwọn Ìbáṣepọ̀ Ìlànà

Àwọn irú ìbáṣepọ̀ tuntun: driven_by, wiggle, time_expression.

v0.4
🌐

Pátákó Àìlópin

Yà níbikíbi láìsí ààlà. Ọ̀nà pátákó àìlópin yọ ààlà ìwọ̀n kúrò.

v0.4
🖌️

Àwọn Ohun Èlò Yíyà

Ohun èlò yíyà ọjọgbọn 6: kálámù, brọ́ọ̀ṣì, aláàmì, ìfúnfún, ìmọ́lẹ̀, àti pípàrẹ́.

v0.4
🧊

Ìfihàn Ìwòye

Ṣàpẹẹrẹ àwọn ohun pàtàkì (kúbù, bọ́ọ̀lù, silínda, tórọ́sì, kóníì) sórí pátákó pẹ̀lú irú ìfihàn 5.

v0.5
🎛

Àwọn Àyọ̀ Àwòrán GPU

Ìṣiṣẹ́ àwòrán lásìkò tí ó ń lo WebGPU.

v0.5
✂

Ìpín Àwòrán

Ohun-èlò lasso fún ṣíṣe àyàn àti ṣíṣe ìyọkúrò apá àwòrán.

v0.5
📐

Ẹ̀rọ Ìṣirò & Ìmọ̀-jìnlẹ̀

Ìṣirò nọ́mbà pẹ̀lú math.js — àwọn olùyanjú ODE (RK4/RK45), FFT.

Compliance & Trust

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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.

Ìmọ̀-ẹ̀rọ & Agbára

Ìmọ̀-ẹ̀rọ Pàtàkì

  • ▹ Paper.js: Ìmúṣiṣẹ́ àti ìfihàn àwòrán vector
  • ▹ HTML5 Canvas: Ìṣípayá àkókò gidi àti ìgbéjáde
  • ▹ Vanilla JavaScript: Fẹ́ẹ́rẹ́, yára, láìsí ìgbẹ́kẹ̀lé
  • ▹ Timeline Engine: Ìpàdé nẹ́tìwọ́kì-kókó pẹ̀lú àwọn iṣẹ́ ìrọrùn
  • ▹ Rigging Engine: Ìṣípayá egungun pẹ̀lú àwọn olùyanjú FK/IK 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: Ìtọpinpin àṣìṣe àti iṣẹ́

Àwọn Ọ̀nà Ìgbéjáde

  • ▹ WebM Video: Kodẹ́kì VP9 — dídára jùlọ fún ìṣípayá
  • ▹ MP4 Video: H.264 nípasẹ̀ WebCodecs API — dára jùlọ fún mídíà àwùjọ
  • ▹ GIF Animation: Nípasẹ̀ gif.js — ó dára fún ìfíránṣẹ́
  • ▹ PDF for Print: 300 DPI pẹ̀lú bleed — títẹ̀ ọjọgbọn
  • ▹ High-DPI PNG: Títí dé 600 DPI fún dídára títẹ̀
  • ▹ Animated SVG: Àwọn ìṣípayá SVG pẹ̀lú 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

Àwọn Irú Ìṣípayá

Pulse Rotate Bounce Fade Wobble Swing Shake Jelly Ẹ̀rọ Ìtẹ̀wé Custom Paths Keyframe Animation ✨ Trim Paths Spatial Motion Paths Path Morphing 13 Deform Presets 100+ Animation Presets

Ètò Ipa

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 Server

Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:

Pair MCP with the official Claude Skill

The Skill teaches Claude when to reach for PinePaper and how to drive it correctly. Install once and ask in plain English — "animate this logo", "make a pulsing LIVE badge" — and Claude routes through PinePaper instead of generating HTML/CSS.

Skill docs →

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:

"Create a red pulsing text that says HELLO" "Make earth orbit the sun"
Akopọ npm Fi Ìràwọ̀ sí GitHub Àwọn Ìwé Pípé →

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

Àwòrán Ìmọ̀ Àpẹẹrẹ

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.

Ọ̀nà tuntun yìí ń jẹ́ kí àwọn aṣojú AI rònú nípa ìṣípayá líle àti àwọn ìbáṣepọ̀.

Attributed Research

The Design Knowledge Graph architecture draws on ideas from these peer-reviewed papers:

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 });

Ìran Wa

À ń kọ́ pẹpẹ àwòrán ìṣípayá àkọ́kọ́ tí ó jẹ́ aṣáájú-AI.

Ète wa ni láti mú àwòrán ìṣípayá rọrùn bíi kíkọ ọ̀rọ̀.

✨ Kíni tí Ó Ń Bọ̀?

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.

Wo Ọ̀nà-Mọ̀ & Pin Ìfèsì Jábọ́ Àṣìṣe

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.

💬 Pin Ìfèsì 🗺️ Wo Ọ̀nà-Mọ̀

Ọ̀fẹ́ àti Ṣíṣí

PinePaper Studio is Freeware v1.0 (currently v0.5.3-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
Àwọn Èdè Tí a Ṣàtìlẹ́yìn
25+
Àwọn Irú Ìbáṣepọ̀
111+
API Methods
7
Àwọn Ọ̀nà Ìgbéjáde

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
Vendored browser ESM build + ONNX runtime WebAssembly. Powers PinePaper's on-device object detection (the "Detect objects" / open-vocabulary "Find" features) — inference runs on your GPU (WebGPU) or CPU; the image never leaves your device.
▹
DETR ResNet-50 Apache-2.0
Meta AI's DETR object-detection model (80 COCO classes). Runs in the browser via transformers.js (fp16 on WebGPU, q8 on CPU) behind the "Detect objects" button — finds objects in an image so you can label, relate, or composite onto them.
▹
OWL-ViT (base-patch32) Apache-2.0
Google Research's open-vocabulary detector — finds anything you describe in text, not just fixed classes. Powers the "Find" feature's AI fallback (zero-shot detection inside a photo). Large model (~150 MB), so it's strictly opt-in and downloads once on first use; runs fully on-device.
▹
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.