Om PinePaper Studio
Vi bygger framtidens motion graphics: webbaserad, AI-nativ och tillgänglig för alla.
Vårt Uppdrag
PinePaper Studio demokratiserar motion graphics-design. Vi tror att kraftfulla kreativa verktyg inte bör kräva dyra programvarulicenser, kraftfulla datorer eller åratal av utbildning. Genom att kombinera moderna webbteknologier med AI-först-design gör vi animerad text och grafik tillgänglig för skapare världen över.
Vad Skiljer Oss
AI-Nativ Design
Byggd från grunden för att arbeta sömlöst med AI-assistenter. Vårt omfattande API gör det möjligt för AI-agenter att skapa, animera och exportera grafik genom naturliga språkkommandon.
MP4 och GIF Export
Exportera till MP4-video (H.264 via WebCodecs) för Instagram, TikTok och LinkedIn. Skapa GIF:er för Twitter, Discord och chattappar. Plus animerad SVG och PNG.
Tidslinje & Nyckelbilder
Professionell tidslinjeredigerare med nyckelbildsbaserade animationer. Skapa koreograferade sekvenser med precis tidskontroll, 5 easing-funktioner och färginterpolation.
Global som Standard
Stöd för 52 språk och alla skriftsystem inklusive kinesiska, arabiska, hindi, bengali och emoji. Skapa innehåll för alla målgrupper, var som helst i världen.
Webbaserad Frihet
Ingen installation krävs. Fungerar på alla enheter med en modern webbläsare. Dina skapelser bearbetas lokalt, vilket säkerställer integritet och omedelbara resultat utan serverkommunikation.
Mallbibliotek
Kickstarta din kreativitet med färdigdesignade mallar. Vackra bakgrunder, animerad text och professionella layouter redo att anpassa. Spara dina egna skapelser som återanvändbara mallar.
Dubbelt Gränssnitt
Intuitivt gränssnitt för mänskliga designers och ett kraftfullt API för AI-agenter och utvecklare. Två gränssnitt, ett uppdrag: stärka kreativiteten.
Tryckfärdig Design
Skapa professionellt tryckmaterial med A3, A4, A5, Letter, Legal och Tabloid-förinställningar vid 300 DPI. Exportera till PDF med utfall och skärmärken, eller hög-DPI PNG (upp till 600 DPI) för kommersiellt tryck.
Karaktärsriggning
Skelettanimation med ben, FK-propagering och FABRIK IK-lösare. Spara och interpolera poser, använd förinställda riggar (humanoid, fyrfoting, spindel) och driv animation via tidslinjenyckelbilder.
Blandning & Sammansättning
Per-objekt och per-grupp blandningslägen med 7 förinställningar (spöke, neon, skugga, glöd, röntgen, drömmande, vintage). Animerade övergångar, interaktiva hover/klick-lägen och närhetsbaserade blandningsreaktioner.
Trimningssökvägar & Maskering
Animera streckteckning med trimningssökvägar för "linjeritning"-effekter. Avancerad maskering med klipp/subtrahera/skär-lägen, maskstappling, animerade avslöjningar (14 förinställningar) och vertexanimation.
Procedurella Relationer
Nya relationstyper: driven_by (egenskapslänkning), wiggle (procedurellt brus) och time_expression (matematiska uttryck med t). Plus nästlade kompositioner (precomps) med oberoende lokala tidslinjer.
Oändlig Canvas
Rita någonstans utan gränser. Obundet dukläge tar bort alla storleksbegränsningar - pan och zooma fritt över en oändlig arbetsyta.
Rita verktyg
6 professionella ritverktyg: penna, bläckborste, markör, spray kan, eraser och fyll hink. Var och en med anpassade markörer och optimerade strokealgoritmer.
Perspektiv rendering
Projekt primitiva (kub, sfär, cylinder, torus, cone) på duken med 5 projektionstyper. GPU-accelererad rendering (WebGPU/WebGL2), orbitalkamera och utvalbara och dragbara perspektivobjekt.
GPU bildfilter
Realtidsbildbehandling som drivs av WebGPU compute shaders med WebGL2-nedgång. HSL-justering, ljusstyrka, kontrast, affisch, kantdetektering, färgton, vignett, suddig och filtrering i ett enda GPU-pass.
Bildsegmentering
Freehand lasso verktyg för att välja och extrahera bildregioner vid full inhemsk upplösning. 8 cutout stil förinställningar (papper, vykort, klistermärke, affisch, mono, skiss, varm, cool) kombinera GPU-filter med skuggeffekter.
Math & Science motor
Numerisk dator som drivs av matematik.js - ODE-lösare (RK4/RK45), FFT-spektrumanalys, funktionsplanering, parametriska kurvor, dynamisk systemsimulering och parametriska ytor i perspektiv. Real matematik, animerad på canvas.
Efterlevnad & Förtroende
WCAG 2.1 AA
Tillgänglighet skugga träd för skärm läsare canvas navigation. Tangentbordsnavigering, levande regionmeddelanden, hoppa över länkar, kontrast auditering och rörelsekänslighetskontroller. Använder pp:PinePaper ontologi för semantiska objektbeskrivningar.
Säkerhetsrubriker
HSTS med preload, CSP, X-Frame-Options, Permissions-Policy. Ingen kamera-, mikrofon-, plats- eller betalningsåtkomst.
Integritet genom design
100% klientsidebearbetning. Inga serveruppladdningar, inga cookies, ingen datainsamling.
Teknik & Funktioner
Kärnteknik
- ▹ Paper.js: Vektorgrafik-manipulation och rendering
- ▹ HTML5 Canvas: Realtidsanimation och export
- ▹ Vanilla JavaScript: Lättviktig, snabb, inga beroenden
- ▹ Tidslinemotor: Nyckelbildsinterpolation med easing-funktioner
- ▹ Riggningsmotor: Skelettanimation med FK/IK-lösare och posinterpolation v0.4
- ▹ Design Knowledge Graph: Semantisk ontologi med 25+ relationstyper, 35+ matematiska funktioner och typhierarki v0.4
- ▹ Rust/WASM-körtid: Valfri WebAssembly-acceleration — 10-100x snabbare relationsbehandling, inga GC-pauser. JS-fallback. v0.5
- ▹ pp:PinePaper-ontologi: 55-token semantiskt ordförråd (element, relationer, animationer, masker, generatorer) — PinePaper-animationernas språk. v0.5
- ▹ Sentry: Felspårning och prestandaövervakning
Exportformat
- ▹ WebM-video: VP9-codec - bästa kvalitet för animationer
- ▹ MP4-video: H.264 via WebCodecs API - idealisk för sociala medier
- ▹ GIF-animation: Via gif.js Web Workers - perfekt för chattappar
- ▹ PDF för Tryck: 300 DPI med utfall (3-5mm) och skärmärken - professionellt tryck
- ▹ Hög-DPI PNG: Upp till 600 DPI för kommersiell tryckkvalitet
- ▹ Animerad SVG: Nativa SVG-animationer med SMIL
- ▹ Interaktiv widget: Fristående HTML med scenspecifik kod (~8-20KB). WASM-accelererad. Inbäddas var som helst. v0.5
- ▹ Lottie JSON: Industristandard animationsformat. Konverterar automatiskt procedurella animationer till nativa keyframes. v0.4
Animationstyper
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 med den officiella Claude Skill
Skillen lär Claude när man ska nå för PinePaper och hur man kör det korrekt. Installera en gång och fråga på vanligt engelska - "animera denna logotyp", "göra ett pulserande LIVE-märke" - och Claude-rutter genom PinePaper istället för att generera HTML / CSS.
Snabb Installation
1. Installera globalt:
npm install -g @pinepaper.studio/mcp-server
2. Lägg till i Claude Desktop-konfiguration:
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. Prova det i Claude Desktop:
Tillgängliga Verktyg
- • Skapa text, former, grafik
- • Lägg till relationer (25+ typer: orbits, follows, wiggle, etc.)
- • Nyckelbilds- & förinställda animationer
- • Karaktärsriggning (skelett, ben, IK/FK)
- • Blandningsförinställningar & övergångar
- • Diagram, kartor, typsnittsskapande
- • Generera procedurella bakgrunder (14 generatorer)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • Exportera SVG, träningsdata
Stödda AI-plattformar
- • Claude Desktop
- • Alla MCP-kompatibla klienter
- • Anpassade integrationer via API
Design Knowledge Graph
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.
Denna nya metod gör det möjligt för AI-agenter att resonera om komplexa animationer och strukturella relationer, vilket möjliggör generering av sofistikerade motion graphics som bibehåller semantisk konsekvens.
Tillskriven Forskning
Design Knowledge Graph-arkitekturen bygger på idéer från dessa fackgranskade artiklar:
-
📄
Design Method Knowledge Graph Driven av Multi-Source Heterogeneous Data Tillämpad vetenskap, 2025 Demonstrerar hur kunskapsgrafer kan fånga designmetodrelationer från heterogena källor — grunden för vårt semantiska relationssystem.
-
📄
Använda stora språkmodeller för att hantera grundläggande utmaningar i grafinlärning arXiv, 2025 Översikt av LLM-metoder för grafinlärningsproblem — informerar hur våra MCP-verktyg exponerar grafstruktur till AI-agenter.
-
📄
LLM-Empowered Knowledge Graph Construction: En undersökning arXiv, 2025 Omfattande översikt av LLM-driven KG-konstruktion — metodologin bakom vår automatiserade designgrafextraktion.
För Utvecklare & AI-Agenter
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Skapa och manipulera text, former och importerade SVG-element
- • Tillämpa animationer (9 förinställningar) och effekter (gnistra, explosion)
- • Skapa nyckelbildsbaserade animationer med tidslinjekontroll
- • Exportera till MP4, GIF, SVG eller PNG via API
- • Använda deklarativa relationer (orbits, follows, attached_to)
- • Rigga karaktärer med skelettanimation och posnyckelbilder v0.4
- • Skapa nästlade kompositioner (precomps) med lokala tidslinjer v0.4
- • Bygga automatiserade arbetsflöden och batchbearbetningssystem
Exempel på API-användning:
// 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 });
Vår Vision
Vi bygger den första verkligt AI-nativa motion graphics-plattformen. Medan andra verktyg lägger till AI som en eftertanke designades PinePaper från dag ett för att styras av både människor och maskiner.
Vårt mål är att göra motion graphics lika enkelt som att skriva text. Oavsett om du är en designer som skapar innehåll manuellt eller en AI-assistent som hjälper en användare via naturligt språk, tillhandahåller PinePaper verktygen för att skapa professionell animerad grafik på sekunder.
✨ Vad Kommer Härnäst?
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.
Gemenskap & Öppen Utveckling
PinePaper Studio utvecklas transparent med vår gemenskap. Vi välkomnar feedback, funktionsönskemål och buggrapporter. Vår utveckling styrs av verkliga användarbehov och det föränderliga landskapet av AI-assisterad kreativitet.
Gratis & Öppen
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.