Over PinePaper Studio

De toekomst van motion graphics bouwen: browsergebaseerd, AI-natief en toegankelijk voor iedereen.

Onze missie

PinePaper Studio democratiseert motion graphics ontwerp. Wij geloven dat krachtige creatieve tools geen dure softwarelicenties, krachtige computers of jarenlange training hoeven te vereisen. Door moderne webtechnologieën te combineren met een AI-eerste ontwerp, maken we geanimeerde tekst en graphics toegankelijk voor makers wereldwijd.

Wat ons onderscheidt

🤖

AI-Natief Ontwerp

Van de grond af opgebouwd om naadloos samen te werken met AI-assistenten. Onze uitgebreide API stelt AI-agenten in staat om via opdrachten in natuurlijke taal graphics te creëren, animeren en exporteren.

🎬

MP4- & GIF-export

Exporteer naar MP4-video (H.264 via WebCodecs) voor Instagram, TikTok en LinkedIn. Maak GIF's voor Twitter, Discord en berichtenapps. Plus geanimeerde SVG en PNG.

⏱️

Tijdlijn & Keyframes

Professionele tijdlijneditor met keyframe-gebaseerde animaties. Maak gechoreografeerde sequenties met precieze timingcontrole, 5 versoepelfuncties en kleurinterpolatie.

🌍

Globaal standaard

Ondersteuning voor 52 talen en alle schrijfsystemen inclusief Chinees, Arabisch, Hindi, Bengali en emoji. Creëer content voor elk publiek, overal ter wereld.

🚀

Browsergebaseerde vrijheid

Geen installatie vereist. Werkt op elk apparaat met een moderne browser. Je creaties worden lokaal verwerkt, waardoor privacy en directe resultaten gegarandeerd zijn zonder server-roundtrips.

📋

Sjabloonbibliotheek

Geef je creativiteit een vliegende start met voorontworpen sjablonen. Prachtige achtergronden, geanimeerde tekst en professionele lay-outs klaar om aan te passen. Sla je eigen creaties op als herbruikbare sjablonen.

🎨

Dubbele interface

Intuïtieve UI voor menselijke ontwerpers en een krachtige API voor AI-agenten en ontwikkelaars. Twee interfaces, één missie: creativiteit versterken.

🖨️

Drukklaar ontwerp

Maak professioneel drukwerk met A3-, A4-, A5-, Letter-, Legal- en Tabloid-presets op 300 DPI. Exporteer naar PDF met afloop en snijmarkeringen, of hoge-DPI PNG (tot 600 DPI) voor commercieel drukwerk.

v0,4
🦴

Karakter-rigging

Skeletanimatie met botten, FK-propagatie en FABRIK IK-oplosser. Poses opslaan en interpoleren, preset-rigs gebruiken (humanoïde, viervoeter, spin) en animatie aansturen via tijdlijn-keyframes.

v0,4
🎭

Mengen & compositing

Per-item en per-groep mengmodi met 7 presets (spook, neon, schaduw, gloed, röntgen, dromerig, vintage). Geanimeerde overgangen, interactieve hover/klik-modi en op nabijheid gebaseerde mengreacties.

v0,4
✂️

Pad bijsnijden & maskering

Animeer het tekenen van streken met padtrimming voor "lijnteken"-effecten. Geavanceerde maskering met clip/aftrek/doorsnede-modi, masker-stapeling, geanimeerde onthullingen (14 presets) en vertexanimatie.

v0,4
🔗

Procedurele relaties

Nieuwe relatietypen: driven_by (eigenschapskoppeling), wiggle (procedurele ruis) en time_expression (wiskundige expressies met t). Plus geneste composities (precomps) met onafhankelijke lokale tijdlijnen.

v0,4
🌐

Oneindige canvas

Teken overal zonder grenzen. Niet geconsolideerd canvas-modus verwijdert alle groottebeperkingen .

v0,4
🖌️

Tekengereedschappen

6 professionele tekengereedschappen: pen, inktborstel, marker, spuitbus, gum en vulemmer. Elk met aangepaste cursors en geoptimaliseerde slagalgoritmen.

v0,4
🧊

Perspectief rendering

Project primitieven (cube, bol, cilinder, torus, kegel) op het doek met 5 projectie types. GPU-versnelde weergave (WebGPU/WebGL2), orbital camera, en selecteerbare & sleepbare perspectief objecten.

v0.5
🎛

GPU-afbeeldingsfilters

Real-time beeldverwerking aangedreven door WebGPU berekenen shaders met WebGL2 terugval. HSL aanpassing, helderheid, contrast, posterize, rand detectie, kleur tint, vignet, wazig, en filter kettinging in een enkele GPU-pas.

v0.5

Segmentatie van afbeelding

Freehand lasso tool voor het selecteren en uitpakken van afbeelding regio's bij volledige native resolutie. 8 cutout stijl presets (papercut, ansichtkaart, sticker, poster, mono, schets, warm, cool) combineren GPU filters met schaduw effecten.

v0.5
📐

Math & Science Engine

Numerieke computing aangedreven door math.js Echte wiskunde, geanimeerd op doek.

Conformiteit & Vertrouwen

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Toegankelijkheid schaduw boom voor schermlezer canvas navigatie. Keyboard navigatie, live regio aankondigingen, links overslaan, contrast auditing, en beweging gevoeligheid controles. Gebruikt pp:PinePaper ontologie voor semantische item beschrijvingen.

🔒

Beveiligingsheaders

HSTS met preload, Content Security Policy, X-Frame-Options, Permissions-Policy. Geen toegang tot camera, microfoon, locatie of betaling.

👁

Privacy door Ontwerp

100% verwerking aan de clientzijde. Geen uploads, geen cookies, geen dataverzameling. Alle ontwerpen blijven in uw browser.

Technologie & mogelijkheden

Kerntechnologie

  • Paper.js: Vectorgrafiek manipulatie en rendering
  • HTML5 Canvas: Realtime animatie en export
  • Vanille Javascript: Lichtgewicht, snel, geen afhankelijkheden
  • Tijdlijn-engine: Keyframe-interpolatie met versoepelfuncties
  • Rigging-engine: Skeletanimatie met FK/IK-oplossers en pose-interpolatie v0,4
  • Ontwerpkennisgrafiek: Semantische ontologie met 25+ relatietypen, 35+ wiskundige functies en typehiërarchie v0,4
  • Rust/WASM-runtime: Optionele WebAssembly-versnelling — 10-100x snellere relatieverwerking, geen GC-pauzes. JS-terugval. v0.5
  • pp:PinePaper-ontologie: 55-token semantisch vocabulaire (items, relaties, animaties, maskers, generatoren) — de taal van PinePaper-animaties. v0.5
  • Sentry: Foutopsporing en prestatiemonitoring

Exportformaten

  • WebM-video: VP9-codec - beste kwaliteit voor animaties
  • MP4-video: H.264 via WebCodecs API - ideaal voor social media
  • GIF-animatie: Via gif.js Web Workers - perfect voor berichtenapps
  • PDF voor drukwerk: 300 DPI met afloop (3-5mm) en snijmarkeringen - professioneel drukwerk
  • Hoge-DPI PNG: Tot 600 DPI voor commerciële drukkwaliteit
  • Geanimeerde SVG: Native SVG-animaties met SMIL
  • Interactieve widget: Zelfstandige HTML met scènespecifieke code (~8-20KB). WASM-versneld. Overal inbedbaar. v0.5
  • Lottie JSON: Industriestandaard animatieformaat. Converteert procedurele animaties automatisch naar native keyframes. v0.4

Animatietypen

Pulseren Roteren Stuiteren Vervagen Wiebelen Zwaaien Schudden Gelei Typemachine Aangepaste paden Keyframe-animatie ✨ Pad bijsnijden Ruimtelijke bewegingspaden Padmorfing 13 Deform Presets 100+ Animation Presets

Effectensysteem

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 met de officiële Claude Skill

De Skill leert Claude wanneer te bereiken voor PinePaper en hoe het correct rijden. Installeer één keer en vraag in het gewone Engels "Animate this logo," "make a pulsing LIVE badge" en Claude routes via PinePaper in plaats van HTML/CSS.

Skill docs →

Snelle installatie

1. Wereldwijd installeren:

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

2. Toevoegen aan Claude Desktop configuratie:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Vensters: %APPDATA%\Claude\claude_desktop_config.json

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

3. Uitproberen in Claude Desktop:

"Maak een rode pulserende tekst die HELLO zegt" "Laat de aarde om de zon draaien"

Beschikbare tools

  • • Tekst, vormen en grafische elementen maken
  • • Relaties toevoegen (25+ typen: orbits, follows, wiggle, enz.)
  • • Keyframe- en preset-animaties
  • • Karakter-rigging (skeletten, botten, IK/FK)
  • • Mengmodus-presets en -overgangen
  • • Diagrammen, kaarten, lettertype-creatie
  • • Procedurele achtergronden genereren (14 generators)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • SVG en trainingsdata exporteren

Ondersteunde AI-platforms

  • Claude Desktop
  • • Elke MCP-compatibele client
  • • Aangepaste integraties via API

Ontwerp kennisgrafiek

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.

Deze nieuwe aanpak stelt AI-agenten in staat om te redeneren over complexe animaties en structurele relaties, waardoor geavanceerde motion graphics gegenereerd kunnen worden die semantische consistentie behouden.

Geciteerd onderzoek

De architectuur van de Design Knowledge Graph is gebaseerd op ideeën uit deze peer-reviewed publicaties:

Voor ontwikkelaars & AI-agenten

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

  • Tekst, vormen en geïmporteerde SVG-elementen creëren en manipuleren
  • Animaties (9 presets) en effecten (sparkle, blast) toepassen
  • Keyframe-gebaseerde animaties met tijdlijnbesturing creëren
  • Exporteren naar MP4, GIF, SVG of PNG via API
  • Declaratieve relaties gebruiken (orbits, follows, attached_to)
  • Karakters riggen met skeletanimatie en pose-keyframes v0,4
  • Geneste composities (precomps) met lokale tijdlijnen creëren v0,4
  • Geautomatiseerde workflows en batchverwerkingssystemen bouwen

Voorbeeld API-gebruik:

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

Onze visie

We bouwen het eerste echt AI-native motion graphics platform. Terwijl andere tools AI als bijzaak toevoegen, is PinePaper vanaf dag één ontworpen om door zowel mensen als machines te worden bediend.

Ons doel is om motion graphics net zo eenvoudig te maken als het schrijven van tekst. Of je nu een ontwerper bent die handmatig content maakt, of een AI-assistent die een gebruiker helpt via natuurlijke taal, PinePaper biedt de tools om in seconden professionele geanimeerde graphics te maken.

Wat komt er?

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.

Community & open ontwikkeling

PinePaper Studio wordt transparant ontwikkeld met onze community. We verwelkomen feedback, functieverzoeken en bugmeldingen. Onze ontwikkeling wordt gestuurd door echte gebruikersbehoeften en het veranderende landschap van AI-ondersteunde creativiteit.

Gratis & open

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
Ondersteunde talen
25+
Relatietypen
111+
API Methods
7
Exportformaten

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.