Tungkol sa PinePaper Studio
Binubuo ang kinabukasan ng motion graphics: browser-based, AI-native, at accessible sa lahat.
Ang Aming Misyon
Dine-demokratisa ng PinePaper Studio ang motion graphics design. Naniniwala kami na ang makapangyarihang creative tools ay hindi dapat mangailangan ng mahal na software licenses, malakas na kompyuter, o maraming taon ng pagsasanay. Sa pamamagitan ng pagsasama ng modernong web technologies sa AI-first na disenyo, ginagawa naming accessible ang animated text at graphics sa mga creator sa buong mundo.
Ano ang Nagpapaiba sa Amin
AI-Native na Disenyo
Binuo mula sa simula para gumana nang walang aberya sa mga AI assistant. Ang aming komprehensibong API ay nagpapahintulot sa AI agents na lumikha, mag-animate, at mag-export ng graphics sa pamamagitan ng natural language commands.
MP4 at GIF Export
Mag-export sa MP4 video (H.264 sa WebCodecs) para sa Instagram, TikTok, at LinkedIn. Gumawa ng GIF para sa Twitter, Discord, at messaging apps. Dagdag pa ang animated SVG at PNG.
Timeline at Keyframes
Propesyonal na timeline editor na may keyframe-based na animasyon. Gumawa ng mga choreographed sequences na may tumpak na timing control, 5 easing functions, at color interpolation.
Global Bilang Default
Suporta para sa 52 wika at lahat ng writing systems kabilang ang Chinese, Arabic, Hindi, Bengali, at emoji. Gumawa ng content para sa anumang audience, kahit saan sa mundo.
Kalayaan sa Browser
Walang kailangang i-install. Gumagana sa anumang device na may modernong browser. Ang iyong mga likha ay pinoproseso nang lokal, tinitiyak ang privacy at instant na resulta nang walang server roundtrips.
Aklatan ng Template
Simulan ang iyong pagkamalikhain sa mga pre-designed na template. Magagandang background, animated text, at propesyonal na layout na handang i-customize. I-save ang sarili mong mga likha bilang reusable templates.
Dobleng Interface
Intuitive UI para sa mga human designer at makapangyarihang API para sa AI agents at developers. Dalawang interface, isang misyon: pagpapalakas ng pagkamalikhain.
Handang I-print na Disenyo
Gumawa ng propesyonal na print materials na may A3, A4, A5, Letter, Legal, at Tabloid presets sa 300 DPI. Mag-export sa PDF na may bleed at trim marks, o high-DPI PNG (hanggang 600 DPI) para sa commercial printing.
Pag-rig ng Karakter
Skeletal animation na may buto, FK propagation, at FABRIK IK solver. Mag-save at mag-interpolate ng mga pose, gumamit ng preset rigs (humanoid, quadruped, spider), at patakbuhin ang animasyon sa pamamagitan ng timeline keyframes.
Blending at Compositing
Per-item at per-group blend modes na may 7 presets (ghost, neon, shadow, glow, xray, dreamy, vintage). Animated transitions, interactive hover/click modes, at proximity-based blend reactions.
Trim Paths at Masking
I-animate ang stroke drawing na may trim paths para sa "line draw" effects. Advanced masking na may clip/subtract/intersect modes, mask stacking, animated reveals (14 presets), at vertex animation.
Procedural na Relasyon
Mga bagong uri ng relasyon: driven_by (property linking), wiggle (procedural noise), at time_expression (math expressions na may t). Dagdag pa ang nested compositions (precomps) na may independyenteng local timelines.
Mga Canvang Walang Kain
Gumuhit kahit saan nang walang hangganan. Inaalis ng hindi nababakurang kambas ang lahat ng mga pagbabawal — ang kawali at zoom nang walang takdang workspace.
Mga Kagamitan sa Pagguhit
6 propesyonal na mga kasangkapan sa pagguhit: pen, tintang brush, marker, latang pang - isprey, pambura, at panpuno ng timba. Bawat isa'y may mga kaugalian at napakahusay na mga algorithm sa istrok.
Pagbibigay ng Pangmalas
Project primitibong (cube, bilog, silindro, torus, kono) sa kanbas na may 5 uri ng projection. GPU-accelerated translation (PWebGPU/PWebGL2), orbital camera, at mapipili & dragable perspektibong mga bagay.
Mga Pansala ng Larawan ng GPU
Real-time image processing na pinapatakbo ng WebGPU compute climbers na may WebGL2 fallback. Ang HSL na pag-aayos, tingkad ng liwanag, pagkakaiba, posterize, deal detection, color tint, vignette, malabo, at filter chaining sa isang daanan ng GPU.
Segmentasyon sa Larawan
Mga kasangkapang freehand lasso upang piliin at makuha ang mga rehiyong imahe sa ganap na katutubong resolusyon. 8 cutout style presets (papelcut, postcard, ticker, poster, mono, sketch, mainit, malamig) ay nagsasama ng mga filter ng GPU at shaor effects.
Math & Science Engine
Numerical computing na pinapatakbo ng matematika.js — ODEsopers (RK4/RK45), FFT spectrum analysis, function planning, parametric curves, dynamic system recombination, at parametric na ibabaw sa perspektibo. Tunay na matematika, masigla sa canvas.
Pagsunod at Tiwala
WCAG 2.1 AA
Madaling makakuha ng punong anino para sa nabigasyon ng mambabasa ng screen canvas. Ang paglalayag sa pamamagitan ng teklado, mga patalastas sa live na rehiyon, mga kawing sa paglukso, paghahambing, at mga pagsusuri sa sensitivity. Ginagamit ang p:PinePaper onlogy para sa mga paglalarawang semantiko.
Mga Security Header
HSTS na may preload, CSP, X-Frame-Options, Permissions-Policy. Walang access sa camera, microphone, lokasyon, o pagbabayad.
Privacy sa Disenyo
100% client-side processing. Walang server upload, walang cookies, walang data collection.
Teknolohiya at Kakayahan
Pangunahing Teknolohiya
- ▹ Paper.js: Manipulasyon at rendering ng vector graphics
- ▹ HTML5 Canvas: Real-time na animasyon at export
- ▹ Purong JavaScript: Magaan, mabilis, walang dependencies
- ▹ Makina ng Timeline: Keyframe interpolation na may easing functions
- ▹ Makina ng Rigging: Skeletal animation na may FK/IK solvers at pose interpolation 0.4
- ▹ Grapo ng Kaalaman sa Disenyo: Semantikong ontolohiya na may 25+ uri ng relasyon, 35+ math functions, at type hierarchy 0.4
- ▹ Rust/WASM Runtime: Optional WebAssembly slink para sa widget Aspenditution — 10-100x mas mabilis na pagproseso ng connection, walang mga paghinto ng GC. Talon pabalik sa JS kung wala pang ANM v0.5
- ▹ p:PinePaper Ontology: 55-token semantic bukabularyo (timo, relasyon, animasyon, maskara, generator) — ang wika ng PinePaper animations. Iniluluwas sa bawat iniluluwas na widget v0.5
- ▹ Sentry: Error tracking at performance monitoring
Mga Format ng Export
- ▹ WebM na Video: VP9 codec - pinakamahusay na kalidad para sa animasyon
- ▹ MP4 na Video: H.264 sa WebCodecs API - ideal para sa social media
- ▹ Animasyon ng GIF: Sa gif.js Web Workers - perpekto para sa messaging
- ▹ PDF para sa Print: 300 DPI na may bleed (3-5mm) at trim marks - propesyonal na pagpi-print
- ▹ High-DPI na PNG: Hanggang 600 DPI para sa komersyal na kalidad ng print
- ▹ Animated na SVG: Native SVG animations na may SMIL
- ▹ Interactive Widget: Self-contaied HTML na may scene-specific tree-stroughn code (~8-20KB). WASM-accelerated kung mayroon. Embed kahit saan — walang CDN, walang API, walang dependencies v0.5
- ▹ Lottie JSON: Industriya-standard animation format. Auto-bakes procedual animations sa mga katutubong keyframes para sa sinumang Lottie player v0.4
Mga Uri ng Animasyon
Sistema ng Epekto
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.
Tagapaghatid ng MCP ng PinePaper
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 na may opisyal na Kasanayang Claude
Ang Kasanayan ay nagtuturo kay Claude kung kailan maaabot ang PinePaper at kung paano ito gagamitin nang tama. Iluklok minsan at tanungin sa payak na Ingles – "ananimate this logo", "gumawa ng polsing weed badge" — at Claude ruta sa PinePaper sa halip na lumikha ng HTML/CSS.
Mabilis na Setup
1. I-install nang global:
npm install -g @pinepaper.studio/mcp-server
2. Idagdag sa 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. Subukan sa Claude Desktop:
Mga Available na Tool
- • Gumawa ng teksto, hugis, graphics
- • Magdagdag ng relasyon (25+ uri: umiikot, sumusunod, pagkalog, atbp.)
- • Keyframe at preset na animasyon
- • Character rigging (balangkas, buto, IK/FK)
- • Blending presets at transisyon
- • Diagrams, mapa, paglikha ng font
- • Gumawa ng procedural backgrounds (14 generators)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • Mag-export ng SVG, training data
Mga Sinusuportahang AI Platform
- • Claude Desktop
- • Anumang MCP-compatible client
- • Custom integrations sa pamamagitan ng API
Grapo ng Kaalaman sa Disenyo
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.
Ang bagong diskarte na ito ay nagbibigay-daan sa AI agents na mag-isip tungkol sa mga kumplikadong animasyon at structural na relasyon, na nagpapahintulot sa paggawa ng sopistikadong motion graphics na nagpapanatili ng semantic na pagkakapare-pareho.
Mga Sangguniang Pananaliksik
Ang arkitektura ng Design Knowledge Graph ay kumukuha ng mga ideya mula sa mga peer-reviewed na papel na ito:
-
📄
Design Method Knowledge Graph Drive by Multi-Source Heterogeneous Data Regulated Sciences, 2025 Nagpapakita kung paano makakakuha ang mga knowledge graph ng mga relasyon ng design method mula sa iba't ibang mapagkukunan — ang pundasyon ng aming semantic relation system.
-
📄
Paggamit ng Malalaking Modelo sa Wika Upang Talangin ang Mahahalagang Hamon sa Graph Learning arXiv, 2025 Survey ng mga LLM approach sa graph learning problems — nagbibigay-alam kung paano inilalantad ng aming MCP tools ang graph structure sa AI agents.
-
📄
LLM-Emowered Knowledge Graph Construction: Isang Survey arXiv, 2025 Komprehensibong survey ng LLM-driven KG construction — ang pamamaraan sa likod ng aming automated design graph extraction.
Para sa mga Developer at AI Agent
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Gumawa at magmanipula ng teksto, hugis, at imported SVG elements
- • Mag-apply ng animasyon (9 presets) at epekto (sparkle, blast)
- • Gumawa ng keyframe-based na animasyon na may timeline control
- • Mag-export sa MP4, GIF, SVG, o PNG sa pamamagitan ng API
- • Gumamit ng declarative relations (orbits, follows, attached_to)
- • I-rig ang mga karakter na may skeletal animation at pose keyframes 0.4
- • Gumawa ng nested compositions (precomps) na may local timelines 0.4
- • Bumuo ng automated workflows at batch processing systems
Halimbawa ng Paggamit ng 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 });
Ang Aming Bisyon
Binubuo namin ang unang tunay na AI-native motion graphics platform. Habang ang ibang tools ay dinadagdagan lang ng AI bilang afterthought, ang PinePaper ay idinisenyo mula sa unang araw para kontrolin ng parehong tao at makina.
Ang aming layunin ay gawing kasing-dali ng pagsulat ng teksto ang motion graphics. Kung ikaw man ay isang designer na gumagawa ng content nang manu-mano, o isang AI assistant na tumutulong sa user sa pamamagitan ng natural language, nagbibigay ang PinePaper ng mga tool para gumawa ng propesyonal na animated graphics sa ilang segundo.
✨ Ano ang Susunod?
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.
Komunidad at Bukas na Development
Ang PinePaper Studio ay dine-develop nang transparent kasama ang aming komunidad. Tinatanggap namin ang feedback, feature requests, at bug reports. Ang aming development ay ginagabayan ng tunay na pangangailangan ng user at ang umuusbong na tanawin ng AI-assisted creativity.
Libre at Bukas
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.