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.
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.
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.
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.
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.
Oneindige canvas
Teken overal zonder grenzen. Niet geconsolideerd canvas-modus verwijdert alle groottebeperkingen .
Tekengereedschappen
6 professionele tekengereedschappen: pen, inktborstel, marker, spuitbus, gum en vulemmer. Elk met aangepaste cursors en geoptimaliseerde slagalgoritmen.
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.
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.
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.
Math & Science Engine
Numerieke computing aangedreven door math.js Echte wiskunde, geanimeerd op doek.
Conformiteit & Vertrouwen
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
Effectensysteem
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.
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:
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:
-
📄
Ontwerp Methode Kennis Grafiek Gedreven door Multi-Bron Heterogene Gegevens Toegepaste wetenschappen, 2025 Toont aan hoe kennisgrafen ontwerpmethode-relaties uit heterogene bronnen kunnen vastleggen — de basis voor ons semantisch relatiesysteem.
-
📄
Het gebruik van grote taalmodellen om fundamentele uitdagingen in Graph Learning aan te pakken arXiv, 2025 Overzicht van LLM-benaderingen voor grafenleren — informeert hoe onze MCP-tools grafstructuur blootstellen aan AI-agenten.
-
📄
LLM-Empowered knowledge Graph Construction: A Survey arXiv, 2025 Uitgebreid overzicht van LLM-gestuurde KG-constructie — de methodologie achter onze geautomatiseerde ontwerpgrafextractie.
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.
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.