Despre PinePaper Studio

Construim viitorul graficii animate: bazat pe browser, nativ AI și accesibil tuturor.

Misiunea noastră

PinePaper Studio democratizează designul graficii animate. Credem că instrumentele creative puternice nu ar trebui să necesite licențe software scumpe, computere puternice sau ani de pregătire. Combinând tehnologiile web moderne cu designul orientat pe AI, facem textul animat și grafica accesibile creatorilor din întreaga lume.

Ce ne face diferiți

🤖

Design nativ AI

Construit de la zero pentru a funcționa fără probleme cu asistenții AI. API-ul nostru cuprinzător permite agenților AI să creeze, animeze și exporte grafică prin comenzi în limbaj natural.

🎬

Export MP4 și GIF

Exportați în video MP4 (H.264 prin WebCodecs) pentru Instagram, TikTok și LinkedIn. Creați GIF-uri pentru Twitter, Discord și aplicații de mesagerie. Plus SVG animat și PNG.

⏱️

Cronologie și cadre cheie

Editor profesional de cronologie cu animații bazate pe cadre cheie. Creați secvențe coregrafiate cu control precis al timpului, 5 funcții de easing și interpolare culori.

🌍

Global implicit

Suport pentru 52 de limbi și toate sistemele de scriere, inclusiv chineză, arabă, hindi, bengaleză și emoji. Creați conținut pentru orice audiență, oriunde în lume.

🚀

Libertate în browser

Nu necesită instalare. Funcționează pe orice dispozitiv cu un browser modern. Creațiile dvs. sunt procesate local, asigurând confidențialitate și rezultate instantanee fără comunicare cu serverul.

📋

Bibliotecă de șabloane

Porniți creativitatea cu șabloane pre-proiectate. Fundaluri frumoase, text animat și aspecte profesionale gata de personalizat. Salvați-vă creațiile ca șabloane reutilizabile.

🎨

Interfață duală

Interfață intuitivă pentru designeri umani și un API puternic pentru agenți AI și dezvoltatori. Două interfețe, o singură misiune: împuternicirea creativității.

🖨️

Design gata de tipărire

Creați materiale tipărite profesionale cu presetări A3, A4, A5, Letter, Legal și Tabloid la 300 DPI. Exportați în PDF cu bleed și marcaje de tăiere, sau PNG de înaltă rezoluție (până la 600 DPI) pentru tipărire comercială.

v0. 4
🦴

Rigging personaj

Animație scheletală cu oase, propagare FK și resolver IK FABRIK. Salvați și interpolați poze, utilizați schelete presetate (humanoid, cvadruped, păianjen) și controlați animația prin cadre cheie cronologie.

v0. 4
🎭

Amestec și compozitare

Moduri de amestec per element și per grup cu 7 presetări (fantomă, neon, umbră, strălucire, raze X, visător, vintage). Tranziții animate, moduri interactive hover/clic și reacții de amestec bazate pe proximitate.

v0. 4
✂️

Tăiere căi și mascare

Animați desenul conturului cu tăiere căi pentru efecte de "desen linie". Mascare avansată cu moduri clip/scădere/intersecție, stratificare măști, dezvăluiri animate (14 presetări) și animație vertex.

v0. 4
🔗

Relații procedurale

Tipuri noi de relații: driven_by (legare proprietăți), wiggle (zgomot procedural) și time_expression (expresii matematice cu t). Plus compoziții imbricate (pre-compoziții) cu cronologii locale independente.

v0. 4
🌐

Canvas infinit

Trage oriunde fără limite. Modul de panza autorizat elimina toate restrictiile de dimensiune .

v0. 4
🖌️

Unelte de desen

6 instrumente profesionale de desen: stilou, perie de cerneală, marker, spray, radieră și umple găleată. Fiecare cu cursoare personalizate și algoritmi de accident vascular cerebral optimizate.

v0. 4
🧊

Perspective Rendering

Proiect primitiv (cub, sfera, cilindru, tor, con) pe panza cu 5 tipuri de proiectie. Rulment accelerat GPU (WebGPU/WebGL2), cameră orbitală și obiecte de perspectivă selectabile și dragabile.

v0.5
🎛

Filtru de imagine GPU

Procesarea în timp real a imaginii, alimentată de WebGPU, nuanțe de calcul cu Fallback WebGL2. Reglarea HSL, luminozitate, contrast, posterize, detectarea marginii, nuanta de culoare, vinietă, blur, și înlănţuire filtru într-o singură trecere GPU.

v0.5

Segmentare imagine

Lasso instrument Freehand pentru a selecta și extrage regiuni de imagine la rezoluția nativă completă. 8 presetări stil decupaj (hârtie, carte poștală, autocolant, poster, mono, schiță, cald, rece) combină filtre GPU cu efecte umbre.

v0.5
📐

Motor matematic și științific

Calculator numeric alimentat de math.js Matematica adevărată, animată pe pânză.

Conformitate și Încredere

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Accesibilitate copac umbra pentru navigarea pe panza cititor de ecran. Navigare tastatură, anunțuri de regiune live, link-uri săriți, audit de contrast, și controale de sensibilitate la mișcare. Folosește pp:PinePaper ontologie pentru descrieri semantice ale elementelor.

🔒

Anteturi de securitate

HSTS cu preîncărcare, CSP, X-Frame-Options, Permissions-Policy. Fără acces la cameră, microfon, locație sau plată.

👁

Confidențialitate prin design

100% procesare pe partea clientului. Fără încărcări pe server, fără cookie-uri, fără colectare de date.

Tehnologie și capabilități

Tehnologie de bază

  • Paper.js: Manipulare și randare grafică vectorială
  • Canvas HTML5: Animație și export în timp real
  • Vanilla JavaScript: Ușor, rapid, fără dependențe
  • Motor cronologie: Interpolare cadre cheie cu funcții de easing
  • Motor Rigging: Animație scheletală cu resolvere FK/IK și interpolare poze v0. 4
  • Grafic de cunoștințe design: Ontologie semantică cu 25+ tipuri de relații, 35+ funcții matematice și ierarhie de tipuri v0. 4
  • Runtime Rust/WASM: Accelerare WebAssembly opțională — procesare relații de 10-100x mai rapidă, fără pauze GC. Fallback JS. v0.5
  • Ontologie pp:PinePaper: Vocabular semantic de 55 de jetoane (elemente, relații, animații, măști, generatoare) — limbajul animațiilor PinePaper. v0.5
  • Sentry: Urmărire erori și monitorizare performanță

Formate de export

  • Video WebM: Codec VP9 - cea mai bună calitate pentru animații
  • Video MP4: H.264 prin WebCodecs API - ideal pentru social media
  • Animație GIF: Prin gif.js Web Workers - perfect pentru mesagerie
  • PDF pentru tipar: 300 DPI cu bleed (3-5 mm) și marcaje de tăiere - tipărire profesională
  • PNG de înaltă rezoluție: Până la 600 DPI pentru calitate tipărire comercială
  • SVG animat: Animații SVG native cu SMIL
  • Widget interactiv: HTML autonom cu cod specific scenei (~8-20KB). Accelerat WASM. Încorporabil oriunde. v0.5
  • Lottie JSON: Format de animație standard. Convertește automat animațiile procedurale în cadre cheie native. v0.4

Tipuri de animație

Puls Rotație Săritură Estompare Legănare Balans Tremur Gelatină Mașină de scris Căi personalizate Animație cadre cheie ✨ Tăiere căi Căi de mișcare spațiale Morfare cale 13 Deform Presets 100+ Animation Presets

Sistem de efecte

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.

Server 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:

Pereche MCP cu oficial Claude Skill

Skill îl învață pe Claude când să ajungă la PinePaper și cum să o conducă corect. Instalați o dată și întrebați în limba engleză simplu .

Skill docs →

Configurare rapidă

1. Instalare globală:

npm install -g @pinepaper.studio/mcp-server

2. Adăugare în configurația Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Ferestre: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "pinepaper": {
      "command": "npx",
      "args": ["-y", "@pinepaper.studio/mcp-server"]
    }
  }
}

3. Încearcă în Claude Desktop:

"Creează un text roșu pulsatoriu care spune HELLO" "Fă Pământul să orbiteze în jurul Soarelui"

Instrumente disponibile

  • • Creare text, forme, grafică
  • • Adăugare relații (25+ tipuri: orbits, follows, wiggle etc.)
  • • Animații cadre cheie și presetări
  • • Rigging personaj (schelete, oase, IK/FK)
  • • Presetări amestec și tranziții
  • • Diagrame, hărți, creare fonturi
  • • Generare fundaluri procedurale (14 generatoare)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Export SVG, date de antrenament

Platforme AI acceptate

  • Claude Desktop
  • • Orice client compatibil MCP
  • • Integrări personalizate prin API

Graful cunoștințelor de design

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.

Această abordare inovatoare permite agenților AI să raționeze despre animații complexe și relații structurale, permițând generarea de grafică animată sofisticată care menține consistența semantică.

Cercetare atribuită

Arhitectura Grafului cunoștințelor de design se bazează pe ideile din aceste articole revizuite de colegi:

Pentru dezvoltatori și agenți AI

PinePaper exposes a comprehensive global API (window.PinePaper) that enables programmatic control of the entire application. AI assistants and developers can:

  • Crea și manipula text, forme și elemente SVG importate
  • Aplica animații (9 presetări) și efecte (sclipire, explozie)
  • Crea animații bazate pe cadre cheie cu control cronologie
  • Exporta în MP4, GIF, SVG sau PNG prin API
  • Utiliza relații declarative (orbits, follows, attached_to)
  • Rigging personaje cu animație scheletală și cadre cheie de poze v0. 4
  • Creare compoziții imbricate (pre-compoziții) cu cronologii locale v0. 4
  • Construi fluxuri de lucru automatizate și sisteme de procesare în lot

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

Viziunea noastră

Construim prima platformă de grafică animată cu adevărat nativă AI. În timp ce alte instrumente adaugă AI ca o adăugire ulterioară, PinePaper a fost proiectat din prima zi pentru a fi controlat atât de oameni, cât și de mașini.

Scopul nostru este să facem grafica animată la fel de ușoară ca scrierea textului. Fie că sunteți un designer care creează conținut manual, sau un asistent AI care ajută un utilizator prin limbaj natural, PinePaper oferă instrumentele pentru a crea grafică animată profesională în câteva secunde.

Ce urmează?

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.

Comunitate și dezvoltare deschisă

PinePaper Studio este dezvoltat transparent cu comunitatea noastră. Primim cu plăcere feedback, solicitări de funcții și rapoarte de bug-uri. Dezvoltarea noastră este ghidată de nevoile reale ale utilizatorilor și de peisajul în evoluție al creativității asistate de AI.

Gratuit și deschis

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
Limbi acceptate
25+
Tipuri de relații
111+
API Methods
7
Formate de export

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.