Ü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.

v0.4
🦴

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.

v0.4
🎭

Ü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.

v0.4
✂️

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.

v0.4
🔗

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.

v0.4
🌐

Unendliche Canvas

Zeichne überall ohne Grenzen. Der unbegrenzte Canvas-Modus beseitigt alle Größenbeschränkungen - Schwenken und Zoomen Sie frei über einen unendlichen Arbeitsbereich.

v0.4
🖌️

Zeichenwerkzeuge

6 professionelle Zeichenwerkzeuge: Stift, Tintenbürste, Marker, Sprühdose, Radiergummi und Füllkübel. Jedes mit benutzerdefinierten Cursoren und optimierten Strichalgorithmen.

v0.4
🧊

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.

v0.5
🎛

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.

v0.5

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.

v0.5
📐

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

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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

Pulsieren Drehen Hüpfen Einblenden Wackeln Schwingen Schütteln Wackelpudding Schreibmaschine Benutzerdefinierte Pfade Keyframe-Animation ✨ Pfadbeschneidung Räumliche Bewegungspfade Pfad-Morphing 13 Deform Presets 100+ Animation Presets

Effektsystem

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:

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.

Skill docs →

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:

"Erstelle einen roten pulsierenden Text, der HELLO sagt" "Lass die Erde die Sonne umkreisen"

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:

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.

59
Unterstützte Sprachen
25+
Beziehungstypen
111+
API Methods
7
Exportformate

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.