A PinePaper Studio-ról

A mozgógrafika jövőjét építjük: böngészőalapú, AI-natív és mindenki számára elérhető.

Küldetésünk

A PinePaper Studio demokratizálja a mozgógrafika tervezést. Hisszük, hogy az erőteljes kreatív eszközök nem igényelhetnek drága szoftverlicenceket, erős számítógépeket vagy évekig tartó képzést. A modern webtechnológiák és az AI-első tervezés kombinálásával az animált szöveget és grafikát világszerte elérhetővé tesszük az alkotók számára.

Mi tesz minket különlegessé

🤖

AI-natív tervezés

Alapoktól úgy épült, hogy zökkenőmentesen működjön AI asszisztensekkel. Átfogó API-nk lehetővé teszi az AI ügynökök számára, hogy természetes nyelvi parancsokkal hozzanak létre, animáljanak és exportáljanak grafikát.

🎬

MP4 és GIF export

Exportáljon MP4 videóba (H.264 WebCodecs-en keresztül) Instagramra, TikTokra és LinkedInre. Készítsen GIF-eket Twitterre, Discordra és üzenetküldő alkalmazásokba. Plusz animált SVG és PNG.

⏱️

Idővonal és kulcskockák

Professzionális idővonal-szerkesztő kulcskocka-alapú animációkkal. Készítsen koreografált szekvenciákat pontos időzítésvezérléssel, 5 easing függvénnyel és színinterpolációval.

🌍

Alapértelmezetten globális

52 nyelv és minden írásrendszer támogatása, beleértve a kínait, arabot, hindit, bengálit és emojit. Készítsen tartalmat bármely közönség számára, a világ bármely pontjára.

🚀

Böngészőalapú szabadság

Nem szükséges telepítés. Bármely modern böngészővel rendelkező eszközön működik. Alkotásai helyben kerülnek feldolgozásra, biztosítva a magánélet védelmét és azonnali eredményeket szerver nélkül.

📋

Sablonkönyvtár

Indítsa be kreativitását előre tervezett sablonokkal. Gyönyörű hátterek, animált szöveg és professzionális elrendezések készen a testreszabásra. Mentse el saját alkotásait újrafelhasználható sablonként.

🎨

Kettős felület

Intuitív felhasználói felület emberi tervezők és erőteljes API AI ügynökök és fejlesztők számára. Két felület, egy küldetés: a kreativitás erősítése.

🖨️

Nyomtatásra kész tervezés

Készítsen professzionális nyomtatott anyagokat A3, A4, A5, Letter, Legal és Tabloid előbeállításokkal 300 DPI-ben. Exportáljon PDF-be kifutóval és vágójelekkel, vagy magas DPI-s PNG-be (akár 600 DPI) kereskedelmi nyomtatáshoz.

0, 4
🦴

Karakter csontváz

Csontvázas animáció csontokkal, FK propagációval és FABRIK IK megoldóval. Póz mentése és interpolálása, előbeállított csontvázak használata (humanoid, négylábú, pók), és animáció vezérlése idővonal kulcskockákon keresztül.

0, 4
🎭

Keverés és kompozitálás

Elem- és csoportszintű keverési módok 7 előbeállítással (szellem, neon, árnyék, ragyogás, röntgen, álomszerű, vintage). Animált átmenetek, interaktív hover/kattintás módok és közelségi alapú keverési reakciók.

0, 4
✂️

Útvonal vágás és maszkolás

Animálja a vonás rajzolást útvonal vágással a "vonalrajzolás" effektekhez. Fejlett maszkolás vágás/kivonás/metszet módokkal, maszk rétegezéssel, animált feltárásokkal (14 előbeállítás) és csúcs animációval.

0, 4
🔗

Procedurális kapcsolatok

Új kapcsolattípusok: driven_by (tulajdonság összekapcsolás), wiggle (procedurális zaj) és time_expression (matematikai kifejezések t-vel). Plusz beágyazott kompozíciók (előkompozíciók) független helyi idővonalakkal.

0, 4
🌐

Végtelen kanvas

Rajzolj bárhová határok nélkül. Korlátlan vászon mód eltávolít minden méretkorlátozás - pan és zoom szabadon keresztül végtelen munkaterület.

0, 4
🖌️

Rajzszerszámok

6 professzionális rajzeszközök: toll, tinta kefe, jelző, spray doboz, radír, és töltsük vödör. Mindegyik egyedi kurzorokkal és optimalizált stroke algoritmusokkal.

0, 4
🧊

Perspective Rendering

Project primitívek (kocka, gömb, henger, torus, kúp) a vászonra, 5 vetítési típus. GPU- gyorsított renderelés (WebGPU / WebGL2), orbitális kamera, és kiválasztható & draggable perspektíva objektumok.

v0.5
🎛

GPU képszűrők

A WebGPU által meghajtott valós idejű képfeldolgozás WebGL2 defback-el számolja ki az árnyékolókat. HSL beállítás, fényerő, kontraszt, utókezelés, szélérzékelés, színárnyalat, matrica, homályos, és szűrő láncolat egyetlen GPU pass.

v0.5

Képszegmentáció

Freehand lasso eszköz a kép régiók kiválasztására és kivonására teljesen őshonos felbontású. 8 vágási stílus előre beállítások (papír vágott, képeslap, matrica, plakát, mono, vázlat, meleg, hűvös) kombinálja GPU szűrők árnyék hatások.

v0.5
📐

Matematikai és tudományos motor

Math.js - Ode Solvers (RK4 / RK45), FFT spektrumanalízis, funkció ábrázolás, parametrikus görbék, dinamikus rendszerszimuláció és parametrikus felületek által vezérelt számszerű számítástechnika. Igazi matek, vásznon animálva.

Megfelelőség és Bizalom

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Hozzáférhetőség árnyék fa képernyőolvasó vászon navigáció. Billentyűzet navigáció, élő regionális bejelentések, kihagyások linkek, kontraszt ellenőrzés, és mozgásérzékenységi ellenőrzések. Felhasználások pp: PinePaper ontológia szemantikai termék leírások.

🔒

Biztonsági fejlécek

HSTS előtöltéssel, CSP, X-Frame-Options, Permissions-Policy. Nincs kamera-, mikrofon-, hely- vagy fizetési hozzáférés.

👁

Tervezésből eredő adatvédelem

100% kliens oldali feldolgozás. Nincs szerverfelöltés, nincs süti, nincs adatgyűjtés.

Technológia és képességek

Alaptechnológia

  • Paper.js: Vektorgrafikus manipuláció és megjelenítés
  • HTML5 csatorna: Valós idejű animáció és export
  • Vanilla JavaScript: Könnyű, gyors, függőségek nélkül
  • Idővonal motor: Kulcskocka interpoláció easing függvényekkel
  • Rögzítőmotor: Csontvázas animáció FK/IK megoldókkal és póz interpolációval 0, 4
  • Tervezési ismertető: Szemantikai ontológia 25+ kapcsolattípussal, 35+ matematikai függvénnyel és típushierarchiával 0, 4
  • Rust/WASM futtatókörnyezet: Opcionális WebAssembly gyorsítás — 10-100x gyorsabb relációfeldolgozás, GC-szünetek nélkül. JS fallback. v0.5
  • pp:PinePaper ontológia: 55 tokenes szemantikus szókészlet (elemek, relációk, animációk, maszkok, generátorok) — a PinePaper animációk nyelve. v0.5
  • Sentry: Hibakövető és teljesítményfigyelő

Export formátumok

  • WebM Videó: VP9 kodek - legjobb minőség animációkhoz
  • MP4 Videó: H.264 WebCodecs API-n keresztül - ideális közösségi médiához
  • GIF Animáció: gif.js Web Workers-en keresztül - tökéletes üzenetküldéshez
  • PDF nyomtatáshoz: 300 DPI kifutóval (3-5 mm) és vágójelekkel - professzionális nyomtatás
  • Magas DPI PNG: Akár 600 DPI kereskedelmi nyomtatási minőséghez
  • Animált SVG: Natív SVG animációk SMIL-lel
  • Interaktív widget: Önálló HTML jelenet-specifikus kóddal (~8-20KB). WASM gyorsítás. Bárhová beágyazható. v0.5
  • Lottie JSON: Iparági szabvány animációs formátum. Automatikusan konvertálja a procedurális animációkat natív kulcskockákká. v0.4

Animáció típusok

Lüktetés Forgás Pattogás Elhalványulás Imbolygás Hintázás Rázás Zselé Írógép Egyéni útvonalak Kulcskocka animáció ✨ Útvonal vágás Térbeli mozgási útvonalak Útvonal morfing 13 Deform Presets 100+ Animation Presets

Effektrendszer

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 kiszolgáló

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

Páros MCP a hivatalos Claude Skill

A képesség arra tanítja Claude-ot, hogy mikor nyúljon a PinePaper-hez, és hogyan vezessen helyesen. Telepítsd egyszer, és kérdezd egyszerű angolul - "animate this logo", "make a pulsing LIVE embléma" - és Claude útvonalak PinePaper helyett generál HTML / CSS.

Skill docs →

Gyors beállítás

1. Telepítés globálisan:

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

2. Hozzáadás a Claude Desktop konfigurációhoz:

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. Próbálja ki a Claude Desktop-ban:

"Hozz létre egy piros pulzáló szöveget, ami azt mondja HELLO" "Kerekedjen a Föld a Nap körül"

Elérhető eszközök

  • • Szöveg, alakzatok, grafika létrehozása
  • • Kapcsolatok hozzáadása (25+ típus: orbits, follows, wiggle stb.)
  • • Kulcskocka és előre beállított animációk
  • • Karakter csontváz (csontvázak, csontok, IK/FK)
  • • Keverési előbeállítások és átmenetek
  • • Diagramok, térképek, betűtípus létrehozás
  • • Procedurális hátterek generálása (14 generátor)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • SVG export, betanítási adatok

Támogatott AI platformok

  • • Claude asztal
  • • Bármely MCP-kompatibilis kliens
  • • Egyéni integrációk API-n keresztül

Tervezési tudásgráf

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.

Ez az újszerű megközelítés lehetővé teszi az AI ügynökök számára, hogy összetett animációkról és strukturális kapcsolatokról gondolkodjanak, lehetővé téve kifinomult mozgógrafika generálását, amely fenntartja a szemantikai konzisztenciát.

Hivatkozott kutatás

A Tervezési tudásgráf architektúrája ezen lektorált tanulmányok ötleteiből merít:

Fejlesztőknek és AI ügynököknek

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

  • Szöveg, alakzatok és importált SVG elemek létrehozása és manipulálása
  • Animációk (9 előbeállítás) és effektek (szikra, robbanás) alkalmazása
  • Kulcskocka-alapú animációk létrehozása idővonal-vezérléssel
  • Exportálás MP4, GIF, SVG vagy PNG formátumba API-n keresztül
  • Deklaratív kapcsolatok használata (orbits, follows, attached_to)
  • Karakter csontváz készítése csontvázas animációval és póz kulcskockákkal 0, 4
  • Beágyazott kompozíciók (előkompozíciók) létrehozása helyi idővonalakkal 0, 4
  • Automatizált munkafolyamatok és kötegelt feldolgozási rendszerek építése

Példa API használat:

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

Víziónk

Az első igazán AI-natív mozgógrafikai platformot építjük. Míg más eszközök utólag csavarják rá az AI-t, a PinePaper az első naptól úgy lett tervezve, hogy emberek és gépek egyaránt irányítsák.

Célunk, hogy a mozgógrafika olyan egyszerű legyen, mint a szövegírás. Legyen Ön tervező, aki manuálisan készít tartalmat, vagy AI asszisztens, aki természetes nyelven segít a felhasználónak, a PinePaper biztosítja az eszközöket professzionális animált grafika másodpercek alatti létrehozásához.

Mi következik?

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.

Közösség és nyílt fejlesztés

A PinePaper Studio-t átláthatóan fejlesztjük közösségünkkel. Szívesen fogadjuk a visszajelzéseket, funkcióigényeket és hibajelentéseket. Fejlesztésünket a valós felhasználói igények és az AI-segített kreativitás fejlődő világa vezérli.

Ingyenes és nyílt

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
Támogatott nyelvek
25+
Kapcsolat típusok
111+
API Methods
7
Export formátumok

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.