O PinePaper Studio

Budujeme budoucnost motion graphics: webové, AI-nativní a přístupné pro všechny.

Naše mise

PinePaper Studio demokratizuje design motion grafiky. Věříme, že výkonné kreativní nástroje by neměly vyžadovat drahé softwarové licence, výkonné počítače nebo roky školení. Kombinací moderních webových technologií s designem zaměřeným na AI zpřístupňujeme animovaný text a grafiku tvůrcům po celém světě.

Co nás odlišuje

🤖

Design nativní pro AI

Postaveno od základu pro bezproblémovou spolupráci s AI asistenty. Naše komplexní API umožňuje AI agentům vytvářet, animovat a exportovat grafiku prostřednictvím příkazů v přirozeném jazyce.

🎬

Export MP4 a GIF

Exportujte do MP4 videa (H.264 přes WebCodecs) pro Instagram, TikTok a LinkedIn. Vytvářejte GIFy pro Twitter, Discord a chatovací aplikace. Plus animované SVG a PNG.

⏱️

Časová osa a klíčové snímky

Profesionální editor časové osy s animacemi založenými na klíčových snímcích. Vytvářejte choreografované sekvence s přesným ovládáním časování, 5 easing funkcemi a interpolací barev.

🌍

Globální jako výchozí

Podpora 52 jazyků a všech systémů psaní včetně čínštiny, arabštiny, hindštiny, bengálštiny a emoji. Vytvářejte obsah pro jakékoliv publikum kdekoli na světě.

🚀

Svoboda webového prohlížeče

Není vyžadována instalace. Funguje na jakémkoli zařízení s moderním prohlížečem. Vaše výtvory se zpracovávají lokálně, což zajišťuje soukromí a okamžité výsledky bez serverových požadavků.

📋

Knihovna šablon

Nastartujte svou kreativitu s předpřipravenými šablonami. Krásná pozadí, animovaný text a profesionální rozvržení připravená k přizpůsobení. Uložte si vlastní výtvory jako znovu použitelné šablony.

🎨

Dvojí rozhraní

Intuitivní rozhraní pro lidské designéry a výkonné API pro AI agenty a vývojáře. Dvě rozhraní, jedna mise: posílení kreativity.

🖨️

Design připravený pro tisk

Vytvářejte profesionální tiskové materiály s předvolbami A3, A4, A5, Letter, Legal a Tabloid při 300 DPI. Exportujte do PDF se spadávkou a ořezovými značkami, nebo PNG s vysokým DPI (až 600 DPI) pro komerční tisk.

0, 4
🦴

Rigging postav

Skeletální animace s kostmi, FK propagací a FABRIK IK řešičem. Ukládejte a interpolujte pózy, používejte přednastavené kostry (humanoid, čtvernožec, pavouk) a řiďte animaci přes klíčové snímky časové osy.

0, 4
🎭

Míchání a kompozice

Režimy míchání pro jednotlivé položky a skupiny se 7 předvolbami (duch, neon, stín, záře, rentgen, snový, vintage). Animované přechody, interaktivní režimy hover/klik a reakce míchání založené na blízkosti.

0, 4
✂️

Ořez cest a maskování

Animujte kreslení tahů pomocí ořezu cest pro efekty "kreslení čáry". Pokročilé maskování s režimy ořez/odečtení/průnik, vrstvení masek, animovaná odhalení (14 předvoleb) a animace vrcholů.

0, 4
🔗

Procedurální vztahy

Nové typy vztahů: driven_by (propojení vlastností), wiggle (procedurální šum) a time_expression (matematické výrazy s t). Plus vnořené kompozice (předkompozice) s nezávislými lokálními časovými osami.

0, 4
🌐

Nekonečné Canvas

Kreslete kdekoliv bez hranic. Neohraničený plátěný režim odstraňuje všechna omezení velikosti - pan a zoom volně napříč nekonečným pracovním prostorem.

0, 4
🖌️

Kreslicí nástroje

6 profesionální kreslicí nástroje: pero, inkoust kartáč, marker, sprej plechovka, guma, a vyplnit kbelík. Každý s vlastní kurzory a optimalizované taktické algoritmy.

0, 4
🧊

Perspektivní zobrazení

Projekt primitiva (krychle, koule, válec, torus, kužel) na plátno s 5 projekčními typy. GPU- zrychlené vykreslování (WebGPU / WebGL2), orbitální fotoaparát, a volitelné a draggable perspektivní objekty.

v0.5
🎛

Filtry obrázků GPU

Real- time zpracování obrazu poháněné WebGPU výpočetní shadery se zálohou WebGL2. Nastavení HSL, jas, kontrast, posterizace, detekce hran, barevný odstín, vignette, rozmazaný a filtrační řetězy v jediném GPU průsmyku.

v0.5

Segmentace obrázků

Freehand lasso nástroj pro výběr a extrahovat obrazové oblasti v plném původním rozlišení. 8 přednastavených tvarů (papír, pohlednice, nálepka, plakát, mono, skica, teplý, chladný) kombinují filtry GPU se stínovými efekty.

v0.5
📐

Matematický a vědecký motor

Číselné výpočty poháněné math.js - ODE řešitele (RK4 / RK45), FFT spektrum analýzy, zobrazení funkcí, parametrické křivky, dynamická simulace systému a parametrické povrchy v perspektivě. Skutečná matematika, animovaná na plátně.

Shoda a důvěra

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Dostupnost stínový strom pro čtečku plátna navigace. Navigace klávesnice, hlášení o živé oblasti, přeskakování odkazů, kontrola kontrastu a kontrola citlivosti pohybu. Používá pp: PinePaper ontologie pro popisy sémantických prvků.

🔒

Bezpečnostní hlavičky

HSTS s přednačtením, CSP, X-Frame-Options, Permissions-Policy. Bez přístupu ke kameře, mikrofonu, poloze.

👁

Ochrana soukromí designem

100% zpracování na straně klienta. Žádné nahrávání na server, žádné cookies, žádný sběr dat.

Technologie a možnosti

Základní technologie

  • Paper.js: Manipulace a vykreslování vektorové grafiky
  • HTML5 Canvas: Animace a export v reálném čase
  • Vanilla JavaScript: Lehký, rychlý, bez závislostí
  • Modul časové osy: Interpolace klíčových snímků s easing funkcemi
  • Rigging engine: Skeletální animace s FK/IK řešiči a interpolací póz 0, 4
  • Grafová báze znalostí: Sémantická ontologie s 25+ typy vztahů, 35+ matematickými funkcemi a hierarchií typů 0, 4
  • Rust/WASM runtime: Volitelná akcelerace WebAssembly — 10-100x rychlejší zpracování vztahů, bez GC pauz. Záložní JS. v0.5
  • Ontologie pp:PinePaper: 55tokenový sémantický slovník (prvky, vztahy, animace, masky, generátory) — jazyk animací PinePaper. v0.5
  • Hlídka: Sledování chyb a monitorování výkonu

Formáty exportu

  • WebM video: VP9 kodek - nejlepší kvalita pro animace
  • MP4 video: H.264 přes WebCodecs API - ideální pro sociální média
  • GIF animace: Přes gif.js Web Workers - perfektní pro zprávy
  • PDF pro tisk: 300 DPI se spadávkou (3-5 mm) a ořezovými značkami - profesionální tisk
  • PNG ve vysokém DPI: Až 600 DPI pro komerční tiskovou kvalitu
  • Animované SVG: Nativní SVG animace se SMIL
  • Interaktivní widget: Samostatný HTML s kódem specifickým pro scénu (~8-20KB). Akcelerace WASM. Vložitelný kamkoli. v0.5
  • Lottie JSON: Standardní formát animací. Automaticky převádí procedurální animace na nativní klíčové snímky. v0.4

Typy animací

Puls Rotace Odraz Prolínání Kývání Houpání Třes Želé Psací stroj Vlastní cesty Animace klíčových snímků ✨ Ořez cest Prostorové pohybové cesty Morfování cesty 13 Deform Presets 100+ Animation Presets

Systém efektů

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:

Pár MCP s oficiálním Claude dovednost

Dovednost učí Clauda, kdy dosáhnout na PinePaper a jak správně řídit. Nainstalujte jednou a zeptejte se v jednoduché angličtině - "animujte toto logo", "vytvořte pulzující štítek LIVE" - a Claude vede přes PinePaper místo generování HTML / CSS.

Skill docs →

Rychlé nastavení

1. Nainstalovat globálně:

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

2. Přidat do konfigurace Claude Desktop:

macos: ~/Library/Application Support/Claude/claude_desktop_config.json
Okna: %APPDATA%\Claude\claude_desktop_config.json

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

3. Vyzkoušet v Claude Desktop:

"Vytvoř červený pulsující text s nápisem HELLO" "Nechej Zemi obíhat kolem Slunce"

Dostupné nástroje

  • • Vytváření textu, tvarů, grafiky
  • • Přidání vztahů (25+ typů: orbits, follows, wiggle atd.)
  • • Animace klíčových snímků a předvolby
  • • Rigging postav (kostry, kosti, IK/FK)
  • • Předvolby míchání a přechody
  • • Diagramy, mapy, tvorba písem
  • • Generování procedurálních pozadí (14 generátorů)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Export SVG, tréninková data

Podporované AI platformy

  • • Claude Desktop
  • • Jakýkoli klient kompatibilní s MCP
  • • Vlastní integrace přes API

Graf designových znalostí

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.

Tento nový přístup umožňuje AI agentům uvažovat o složitých animacích a strukturálních vztazích, což umožňuje generování sofistikované motion grafiky, která si udržuje sémantickou konzistenci.

Přiřazený výzkum

Architektura Grafu designových znalostí čerpá z myšlenek těchto recenzovaných prací:

Pro vývojáře a AI agenty

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

  • Vytvářet a manipulovat text, tvary a importované SVG prvky
  • Aplikovat animace (9 předvoleb) a efekty (jiskry, výbuch)
  • Vytvářet animace založené na klíčových snímcích s ovládáním časové osy
  • Exportovat do MP4, GIF, SVG nebo PNG přes API
  • Používat deklarativní vztahy (orbits, follows, attached_to)
  • Rigging postav se skeletální animací a klíčovými snímky póz 0, 4
  • Vytváření vnořených kompozic (předkompozice) s lokálními časovými osami 0, 4
  • Budovat automatizované pracovní postupy a systémy dávkového zpracování

Příklad použití 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 });

Naše vize

Budujeme první skutečně AI-nativní platformu pro motion grafiku. Zatímco jiné nástroje přidávají AI dodatečně, PinePaper byl od prvního dne navržen tak, aby byl ovládán jak lidmi, tak stroji.

Naším cílem je udělat motion grafiku stejně snadnou jako psaní textu. Ať už jste designér vytvářející obsah ručně, nebo AI asistent pomáhající uživateli prostřednictvím přirozeného jazyka, PinePaper poskytuje nástroje pro vytvoření profesionální animované grafiky během sekund.

Co bude dál?

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.

Komunita a otevřený vývoj

PinePaper Studio je vyvíjeno transparentně s naší komunitou. Vítáme zpětnou vazbu, požadavky na funkce a hlášení chyb. Náš vývoj je řízen skutečnými potřebami uživatelů a vyvíjejícím se prostředím kreativní tvorby s pomocí AI.

Zdarma a otevřené

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
Podporované jazyky
25+
Typy vztahů
111+
API Methods
7
Formáty exportu

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.