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.
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.
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.
Ú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.
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.
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.
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.
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.
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.
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.
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
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
Effektrendszer
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.
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:
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:
-
📄
Dizájn módszer Tudástérkép Driven by Multi-Source Heterogens Data Alkalmazott tudományok, 2025 Bemutatja, hogyan képesek a tudásgráfok heterogén forrásokból származó tervezési módszer kapcsolatokat rögzíteni — szemantikai kapcsolatrendszerünk alapja.
-
📄
Nagy nyelvi modellek használata a tanulásban az alapvető kihívások megoldásához arxiv, 2025 Az LLM megközelítések áttekintése a gráftanulási problémákhoz — tájékoztat arról, hogyan teszik MCP eszközeink a gráfstruktúrát elérhetővé az AI ügynökök számára.
-
📄
LLM-Empounded Knowledge Construction: A Survey arxiv, 2025 Az LLM-alapú tudásgráf-építés átfogó áttekintése — az automatizált tervezési gráf kinyerésünk mögötti módszertan.
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.
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.