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.

v0.4
🦴

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.

v0.4
🎭

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.

v0.4
✂️

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.

v0.4
🔗

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.

v0.4
🌐

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.

v0.4
🖌️

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.

v0.4
🧊

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.

v0.5
🎛

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.

v0.5

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.

v0.5
📐

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

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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

Puls Rotera Studsa Tona Vickande Svinga Skaka Gelé Skrivmaskin Anpassade Sökvägar Nyckelbildsanimation ✨ Trimningssökvägar Rumsliga Rörelsesökvägar Sökvägsmorfning 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 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.

Skill docs →

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:

"Skapa en röd pulserande text som säger HELLO" "Låt jorden kretsa kring solen"

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:

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.

59
Stödda Språk
25+
Relationstyper
111+
API Methods
7
Exportformat

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.