Über PinePaper Studio
Die Zukunft der Motion Graphics gestalten: browserbasiert, KI-nativ und für alle zugänglich.
Unsere Mission
PinePaper Studio demokratisiert Motion-Graphics-Design. Wir glauben, dass leistungsstarke kreative Tools keine teuren Softwarelizenzen, leistungsstarke Computer oder jahrelange Ausbildung erfordern sollten. Durch die Kombination moderner Webtechnologien mit KI-First-Design machen wir animierten Text und Grafiken weltweit für Kreative zugänglich.
Was uns unterscheidet
KI-natives Design
Von Grund auf für nahtlose Zusammenarbeit mit KI-Assistenten entwickelt. Unsere umfassende API ermöglicht es KI-Agenten, Grafiken durch natürlichsprachliche Befehle zu erstellen, zu animieren und zu exportieren.
MP4- und GIF-Export
Export als MP4-Video (H.264 via WebCodecs) für Instagram, TikTok und LinkedIn. GIFs erstellen für Twitter, Discord und Messaging-Apps. Plus animiertes SVG und PNG.
Zeitleiste und Keyframes
Professioneller Zeitleisten-Editor mit keyframe-basierten Animationen. Erstellen Sie choreografierte Sequenzen mit präziser Zeitsteuerung, 5 Beschleunigungsfunktionen und Farbinterpolation.
Standardmäßig global
Unterstützung für 52 Sprachen und alle Schriftsysteme einschließlich Chinesisch, Arabisch, Hindi, Bengalisch und Emoji. Erstellen Sie Inhalte für jedes Publikum, überall auf der Welt.
Browserbasierte Freiheit
Keine Installation erforderlich. Funktioniert auf jedem Gerät mit modernem Browser. Ihre Kreationen werden lokal verarbeitet und gewährleisten Datenschutz und sofortige Ergebnisse ohne Server-Roundtrips.
Vorlagenbibliothek
Starten Sie Ihre Kreativität mit vorgefertigten Vorlagen. Schöne Hintergründe, animierter Text und professionelle Layouts zum Anpassen. Speichern Sie Ihre eigenen Kreationen als wiederverwendbare Vorlagen.
Duale Schnittstelle
Intuitive Benutzeroberfläche für menschliche Designer und leistungsstarke API für KI-Agenten und Entwickler. Zwei Schnittstellen, eine Mission: Kreativität fördern.
Druckfertiges Design
Erstellen Sie professionelle Druckmaterialien mit A3-, A4-, A5-, Letter-, Legal- und Tabloid-Voreinstellungen bei 300 DPI. Exportieren Sie als PDF mit Beschnitt und Schnittmarken oder als hochauflösendes PNG (bis zu 600 DPI) für den kommerziellen Druck.
Charakter-Rigging
Skelettanimation mit Knochen, FK-Propagation und FABRIK-IK-Löser. Posen speichern und interpolieren, vorgefertigte Rigs verwenden (Humanoid, Vierfüßer, Spinne) und Animation über Zeitleisten-Keyframes steuern.
Überblendung und Compositing
Mischmodi pro Element und pro Gruppe mit 7 Voreinstellungen (Geist, Neon, Schatten, Leuchten, Röntgen, Verträumt, Vintage). Animierte Übergänge, interaktive Hover/Klick-Modi und näherungsbasierte Überblendungsreaktionen.
Pfadbeschneidung und Maskierung
Strichzeichnungs-Animation mit Pfadbeschneidung für "Linienzeichen"-Effekte. Erweiterte Maskierung mit Beschnitt/Subtraktion/Schnittmodus, Maskenstapelung, animierte Enthüllungen (14 Voreinstellungen) und Vertex-Animation.
Prozedurale Beziehungen
Neue Beziehungstypen: driven_by (Eigenschaftsverknüpfung), wiggle (prozedurales Rauschen) und time_expression (mathematische Ausdrücke mit t). Plus verschachtelte Kompositionen (Precomps) mit unabhängigen lokalen Zeitleisten.
Unendliche Canvas
Zeichne überall ohne Grenzen. Der unbegrenzte Canvas-Modus beseitigt alle Größenbeschränkungen - Schwenken und Zoomen Sie frei über einen unendlichen Arbeitsbereich.
Zeichenwerkzeuge
6 professionelle Zeichenwerkzeuge: Stift, Tintenbürste, Marker, Sprühdose, Radiergummi und Füllkübel. Jedes mit benutzerdefinierten Cursoren und optimierten Strichalgorithmen.
Perspektiv-Rendering
Projizieren Sie Primitive (Würfel, Kugel, Zylinder, Torus, Kegel) mit 5 Projektionstypen auf die Leinwand. GPU-beschleunigtes Rendering (WebGPU/WebGL2), Orbitalkamera und auswählbare und ziehbare perspektivische Objekte.
GPU-Bildfilter
Echtzeit-Bildverarbeitung mit WebGPU Compute Shadern mit WebGL2 Fallback. HSL-Anpassung, Helligkeit, Kontrast, Posterize, Kantenerkennung, Farbtönung, Vignette, Unschärfe und Filterverkettung in einem einzigen GPU-Pass.
Bildsegmentierung
Freehand lasso Tool zum Auswählen und Extrahieren von Bildregionen in voller nativer Auflösung. 8 Cutout-Stil-Presets (Papierschnitt, Postkarte, Aufkleber, Poster, Mono, Skizze, warm, cool) kombinieren GPU-Filter mit Schatteneffekten.
Math & Science Engine
Numerisches Computing powered by math.js — ODE-Solver (RK4/RK45), FFT-Spektrumanalyse, Funktionsplotting, parametrische Kurven, dynamische Systemsimulation und parametrische Oberflächen in Perspektive. Echte Mathematik, animiert auf Canvas.
Konformität & Vertrauen
WCAG 2.1 AA
Accessibility Shadow Tree für Screen Reader Canvas Navigation. Tastaturnavigation, Live-Regionalankündigungen, Überspringen von Links, Kontrast-Auditing und Bewegungsempfindlichkeitsprüfungen. Verwendet die Ontologie pp:PinePaper für semantische Artikelbeschreibungen.
Sicherheits-Header
HSTS mit Preload, Content Security Policy, X-Frame-Options, Permissions-Policy. Kein Zugriff auf Kamera, Mikrofon, Standort oder Zahlungs-API.
Datenschutz durch Design
100% clientseitige Verarbeitung. Keine Server-Uploads, keine Cookies, keine Datenerfassung. Alle Designs bleiben in Ihrem Browser.
Technologie und Funktionen
Kerntechnologie
- ▹ Paper.js: Vektorgrafik-Manipulation und Rendering
- ▹ HTML5 Canvas: Echtzeit-Animation und Export
- ▹ Vanilla JavaScript: Leichtgewichtig, schnell, keine Abhängigkeiten
- ▹ Zeitleisten-Engine: Keyframe-Interpolation mit Beschleunigungsfunktionen
- ▹ Rigging-Engine: Skelettanimation mit FK/IK-Lösern und Poseninterpolation v0.4
- ▹ Design-Wissensgraph: Semantische Ontologie mit 25+ Beziehungstypen, 35+ Mathematikfunktionen und Typhierarchie v0.4
- ▹ Rust/WASM-Laufzeit: Optionale WebAssembly-Beschleunigung für Widget-Berechnungen — 10-100x schnellere Relationsverarbeitung, keine GC-Pausen. Fallback auf JS. v0.5
- ▹ pp:PinePaper-Ontologie: 55-Token semantisches Vokabular (Elemente, Relationen, Animationen, Masken, Generatoren) — die Sprache der PinePaper-Animationen. v0.5
- ▹ Eintrag: Fehlererfassung und Leistungsüberwachung
Exportformate
- ▹ WebM-Video: VP9-Codec – beste Qualität für Animationen
- ▹ MP4-Video: H.264 via WebCodecs API – ideal für soziale Medien
- ▹ GIF-Animation: Über gif.js Web Workers – perfekt für Messaging
- ▹ PDF für Druck: 300 DPI mit Beschnitt (3-5 mm) und Schnittmarken – professioneller Druck
- ▹ Hochauflösendes PNG: Bis zu 600 DPI für kommerzielle Druckqualität
- ▹ Animiertes SVG: Native SVG-Animationen mit SMIL
- ▹ Interaktives Widget: Eigenständiges HTML mit szenenspezifischem Code (~8-20KB). WASM-beschleunigt. Überall einbettbar — kein CDN, keine API, keine Abhängigkeiten. v0.5
- ▹ Lottie JSON: Industriestandard-Animationsformat. Wandelt prozedurale Animationen automatisch in native Keyframes um. v0.4
Animationstypen
Effektsystem
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:
Pair MCP mit dem offiziellen Claude Skill
Der Skill lehrt Claude, wann er nach PinePaper greifen und wie er richtig fährt. Installieren Sie einmal und fragen Sie in einfachem Englisch - "animieren Sie dieses Logo", "machen Sie ein pulsierendes LIVE-Abzeichen" - und Claude führt durch PinePaper, anstatt HTML / CSS zu erzeugen.
Schnelleinrichtung
1. Global installieren:
npm install -g @pinepaper.studio/mcp-server
2. Zur Claude Desktop-Konfiguration hinzufügen:
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. In Claude Desktop ausprobieren:
Verfügbare Werkzeuge
- • Text, Formen und Grafiken erstellen
- • Beziehungen hinzufügen (25+ Typen: orbits, follows, wiggle usw.)
- • Keyframe- und Preset-Animationen
- • Charakter-Rigging (Skelette, Knochen, IK/FK)
- • Überblendungs-Voreinstellungen und -Übergänge
- • Diagramme, Karten, Schrifterstellung
- • Prozedurale Hintergründe generieren (14 Generatoren)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • SVG und Trainingsdaten exportieren
Unterstützte KI-Plattformen
- • Claude Desktop
- • Jeder MCP-kompatible Client
- • Individuelle Integrationen über API
Design-Wissensgraph
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.
Dieser neuartige Ansatz ermöglicht es KI-Agenten, über komplexe Animationen und strukturelle Beziehungen zu schlussfolgern und so anspruchsvolle Motion Graphics zu generieren, die semantische Konsistenz bewahren.
Referenzierte Forschung
Die Architektur des Design-Wissensgraphen basiert auf Ideen aus diesen begutachteten Veröffentlichungen:
-
📄
Design Method Knowledge Graph Angetrieben durch Multi-Source Heterogene Daten Applied Sciences, 2025 Zeigt, wie Wissensgraphen Designmethoden-Beziehungen aus heterogenen Quellen erfassen können – die Grundlage für unser semantisches Beziehungssystem.
-
📄
Mit großen Sprachmodellen grundlegende Herausforderungen im Graph Learning angehen arXiv, 2025 Überblick über LLM-Ansätze für Graph-Learning-Probleme – beeinflusst, wie unsere MCP-Tools Graphstrukturen für KI-Agenten bereitstellen.
-
📄
LLM-Empowered Knowledge Graph Construction: Eine Umfrage arXiv, 2025 Umfassende Übersicht über LLM-gestützte KG-Konstruktion – die Methodik hinter unserer automatisierten Designgraph-Extraktion.
Für Entwickler und KI-Agenten
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Text, Formen und importierte SVG-Elemente erstellen und bearbeiten
- • Animationen (9 Voreinstellungen) und Effekte (Funkel, Explosion) anwenden
- • Keyframe-basierte Animationen mit Zeitleisten-Steuerung erstellen
- • Als MP4, GIF, SVG oder PNG über die API exportieren
- • Deklarative Beziehungen verwenden (umkreist, folgt, angehängt_an)
- • Charaktere mit Skelettanimation und Posen-Keyframes riggen v0.4
- • Verschachtelte Kompositionen (Precomps) mit lokalen Zeitleisten erstellen v0.4
- • Automatisierte Workflows und Stapelverarbeitungssysteme erstellen
Beispiel-API-Nutzung:
// 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 });
Unsere Vision
Wir bauen die erste wirklich KI-native Motion-Graphics-Plattform. Während andere Tools KI als Nebensache anfügen, wurde PinePaper von Anfang an für die Steuerung durch Menschen und Maschinen konzipiert.
Unser Ziel ist es, Motion Graphics so einfach wie Textschreiben zu machen. Ob Sie als Designer Inhalte manuell erstellen oder ein KI-Assistent einem Nutzer durch natürliche Sprache hilft – PinePaper stellt die Werkzeuge bereit, um professionelle animierte Grafiken in Sekunden zu erstellen.
✨ Was kommt als Nächstes?
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.
Gemeinschaft und offene Entwicklung
PinePaper Studio wird transparent mit unserer Gemeinschaft entwickelt. Wir begrüßen Feedback, Funktionswünsche und Fehlerberichte. Unsere Entwicklung orientiert sich an echten Nutzerbedürfnissen und der sich entwickelnden Landschaft KI-gestützter Kreativität.
Kostenlos und offen
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.