Om PinePaper Studio

Vi bygger fremtidens motion graphics: browserbaseret, AI-native og tilgængeligt for alle.

Vores Mission

PinePaper Studio demokratiserer motion graphics-design. Vi tror på, at kraftfulde kreative værktøjer ikke bør kræve dyre softwarelicenser, kraftfulde computere eller årelang træning. Ved at kombinere moderne webteknologier med AI-først-design gør vi animeret tekst og grafik tilgængeligt for skabere verden over.

Hvad Gør Os Anderledes

🤖

AI-Nativt Design

Bygget fra bunden til at arbejde problemfrit med AI-assistenter. Vores omfattende API giver AI-agenter mulighed for at skabe, animere og eksportere grafik gennem naturlige sprogkommandoer.

🎬

MP4 & GIF Eksport

Eksporter til MP4-video (H.264 via WebCodecs) til Instagram, TikTok og LinkedIn. Skab GIF'er til Twitter, Discord og messaging-apps. Plus animeret SVG og PNG.

⏱️

Tidslinje & Keyframes

Professionel tidslinjeeditor med keyframe-baserede animationer. Skab koreograferede sekvenser med præcis tidskontrol, 5 easing-funktioner og farveinterpolation.

🌍

Global som Standard

Understøttelse af 52 sprog og alle skriftsystemer inklusive kinesisk, arabisk, hindi, bengalsk og emoji. Skab indhold til ethvert publikum, hvor som helst i verden.

🚀

Browserbaseret Frihed

Ingen installation påkrævet. Virker på enhver enhed med en moderne browser. Dine kreationer behandles lokalt, hvilket sikrer privatliv og øjeblikkelige resultater uden server-rundture.

📋

Skabelonbibliotek

Kickstart din kreativitet med færdigdesignede skabeloner. Smukke baggrunde, animeret tekst og professionelle layouts klar til tilpasning. Gem dine egne kreationer som genanvendelige skabeloner.

🎨

Dobbelt Grænseflade

Intuitiv brugergrænseflade til menneskelige designere og en kraftfuld API til AI-agenter og udviklere. To grænseflader, én mission: styrke kreativiteten.

🖨️

Trykklart Design

Skab professionelle trykmaterialer med A3, A4, A5, Letter, Legal og Tabloid-forudindstillinger ved 300 DPI. Eksporter til PDF med skæremærker og trimning, eller høj-DPI PNG (op til 600 DPI) til kommercielt tryk.

v0, 4
🦴

Karakterrigging

Skeletanimation med knogler, FK-propagering og FABRIK IK-løser. Gem og interpoler poser, brug forudindstillede rigs (humanoid, firben, edderkop), og driv animation via tidslinje-keyframes.

v0, 4
🎭

Blanding & Komposition

Per-element og per-gruppe blandingstilstande med 7 forudindstillinger (spøgelse, neon, skygge, glød, røntgen, drømmende, vintage). Animerede overgange, interaktive hover/klik-tilstande og nærhedsbaserede blandingsreaktioner.

v0, 4
✂️

Trimningsstier & Maskering

Animer stregtegning med trimningsstier for "linjetegning"-effekter. Avanceret maskering med klip/fratræk/skæring-tilstande, maskestabling, animerede afsløringer (14 forudindstillinger) og vertex-animation.

v0, 4
🔗

Procedurale Relationer

Nye relationstyper: driven_by (egenskabskobling), wiggle (procedurel støj) og time_expression (matematiske udtryk med t). Plus indlejrede kompositioner (precomps) med uafhængige lokale tidslinjer.

v0, 4
🌐

Infinite Canvas

Tegn overalt uden grænser. Ubegrænset lærred tilstand fjerner alle størrelsesbegrænsninger - pan og zoom frit på tværs af et uendeligt arbejdsområde.

v0, 4
🖌️

Tegneværktøjer

6 professionelle tegning værktøj: pen, blæk børste, markør, spraydåse, viskelæder, og fyld spand. Hver med brugerdefinerede markører og optimeret slagtilfælde algoritmer.

v0, 4
🧊

Perspektiv Rendering

Projekt primitiver (terning, kugle, cylinder, torus, kegle) på lærredet med 5 projektion typer. GPU- accelereret rendering (WebGPU / WebGL2), orbital kamera, og valgbare & draggable perspektiv objekter.

v0.5
🎛

GPU- billedfiltre

Real- time billedbehandling drevet af WebGPU beregne skygger med WebGL2 fallback. HSL justering, lysstyrke, kontrast, posterize, kant detektion, farve tint, vignette, slør, og filter kædning i en enkelt GPU pass.

v0.5

Billedsegmentering

Freehand lasso værktøj til at vælge og udtrække billede regioner ved fuld native opløsning. 8 cute stil presets (papercut, postkort, klistermærke, plakat, mono, skitse, varm, cool) kombinere GPU filtre med skygge effekter.

v0.5
📐

Matematisk & videnskabelig motor

I henhold til artikel 4, stk. 1, litra b), i forordning (EU) nr. 575 / 2013 skal en virksomhed, der er etableret i en medlemsstat, og som er etableret i en medlemsstat i henhold til artikel 4, stk. 1, litra a), i forordning (EU) nr. 575 / 2013, eller som er etableret i en medlemsstat i henhold til artikel 5, stk. 1, litra b), i forordning (EU) nr. 575 / 2013, eller som er etableret i en medlemsstat i en medlemsstat i henhold til artikel 5, stk. 1, litra b), i forordning (EU) nr. 575 / 2013. Ægte matematik, animeret på lærred.

Overholdelse & Tillid

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Tilgængelighed skygge træ til billedskærm læser lærred navigation. Tastatur navigation, live region meddelelser, springe links, kontrast revision, og bevægelse følsomhed kontrol. Uses pp: PinePaper ontologi for semantisk emne beskrivelser.

🔒

Sikkerhedsheadere

HSTS med preload, CSP, X-Frame-Options, Permissions-Policy. Ingen kamera-, mikrofon-, lokation- eller betalingsadgang.

👁

Privatliv fra design

100% klientsidebehandling. Ingen serveruploads, ingen cookies, ingen dataindsamling.

Teknologi & Funktioner

Kerneteknologi

  • Paper.js: Vektorgrafik-manipulation og rendering
  • HTML5 Canvas: Realtidsanimation og eksport
  • Vanilla JavaScript: Letvægt, hurtig, ingen afhængigheder
  • Tidslinemotor: Keyframe-interpolation med easing-funktioner
  • Rigging-motor: Skeletanimation med FK/IK-løsere og poseinterpolation v0, 4
  • Design Knowledge Graph: Semantisk ontologi med 25+ relationstyper, 35+ matematiske funktioner og typehierarki v0, 4
  • Rust/WASM-kørsel: Valgfri WebAssembly-acceleration — 10-100x hurtigere relationsbehandling, ingen GC-pauser. JS-fallback. v0.5
  • pp:PinePaper-ontologi: 55-token semantisk ordforråd (elementer, relationer, animationer, masker, generatorer) — sproget for PinePaper-animationer. v0.5
  • Sentry: Fejlsporing og ydeevneovervågning

Eksportformater

  • WebM-video: VP9-codec - bedste kvalitet til animationer
  • MP4-video: H.264 via WebCodecs API - ideel til sociale medier
  • GIF-animation: Via gif.js Web Workers - perfekt til messaging
  • PDF til Tryk: 300 DPI med beskæring (3-5mm) og skæremærker - professionelt tryk
  • Høj-DPI PNG: Op til 600 DPI til kommerciel trykkvalitet
  • Animeret SVG: Native SVG-animationer med SMIL
  • Interaktiv widget: Selvstændig HTML med scenspecifik kode (~8-20KB). WASM-accelereret. Indlejres overalt. v0.5
  • Lottie JSON: Industristandard animationsformat. Konverterer automatisk procedurale animationer til native keyframes. v0.4

Animationstyper

Puls Roter Hoppe Udtoning Vippe Sving Ryst Gelé Skrivemaskine Brugerdefinerede Stier Keyframe-animation ✨ Trimningsstier Rumlige Bevægelsesstier Stimorfing 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:

Par MCP med den officielle Claude Behændighed

The Behændighedslære Claude, hvornår man skal nå til PinePaper og hvordan man kører det korrekt. Installer en gang og spørg på almindelig engelsk - "animere dette logo", "gøre en pulserende LIVE badge" - og Claude ruter gennem PinePaper i stedet for at generere HTML / CSS.

Skill docs →

Hurtig Opsætning

1. Installer globalt:

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

2. Tilføj til Claude Desktop-konfiguration:

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

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

3. Prøv det i Claude Desktop:

"Opret en rød pulserende tekst der siger HELLO" "Få jorden til at kredse om solen"

Tilgængelige Værktøjer

  • • Opret tekst, former, grafik
  • • Tilføj relationer (25+ typer: orbits, follows, wiggle, osv.)
  • • Keyframe- & forudindstillede animationer
  • • Karakterrigging (skeletter, knogler, IK/FK)
  • • Blandingsforudindstillinger & overgange
  • • Diagrammer, kort, skrifttypeoprettelse
  • • Generer procedurale baggrunde (14 generatorer)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Eksporter SVG, træningsdata

Understøttede AI-platforme

  • • Claude Desktop
  • • Enhver MCP-kompatibel klient
  • • Brugerdefinerede integrationer via API

Design videngraf

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.

Denne nye tilgang gør det muligt for AI-agenter at ræsonnere om komplekse animationer og strukturelle relationer, hvilket muliggør generering af sofistikerede motion graphics, der opretholder semantisk konsistens.

Tilskrevet Forskning

Design Knowledge Graph-arkitekturen bygger på idéer fra disse fagfællebedømte artikler:

For Udviklere & AI-Agenter

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

  • Skabe og manipulere tekst, former og importerede SVG-elementer
  • Anvende animationer (9 forudindstillinger) og effekter (gnist, eksplosion)
  • Skabe keyframe-baserede animationer med tidslinjekontrol
  • Eksportere til MP4, GIF, SVG eller PNG via API
  • Bruge deklarative relationer (orbits, follows, attached_to)
  • Rig karakterer med skeletanimation og pose-keyframes v0, 4
  • Skab indlejrede kompositioner (precomps) med lokale tidslinjer v0, 4
  • Bygge automatiserede arbejdsgange og batchbehandlingssystemer

Eksempel på API-brug:

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

Vores Vision

Vi bygger den første virkelig AI-native motion graphics-platform. Mens andre værktøjer tilføjer AI som en eftertanke, blev PinePaper designet fra dag ét til at blive styret af både mennesker og maskiner.

Vores mål er at gøre motion graphics lige så nemt som at skrive tekst. Uanset om du er designer, der skaber indhold manuelt, eller en AI-assistent, der hjælper en bruger gennem naturligt sprog, giver PinePaper værktøjerne til at skabe professionel animeret grafik på sekunder.

Hvad Er Det Næste?

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.

Fællesskab & Åben Udvikling

PinePaper Studio udvikles transparent med vores fællesskab. Vi byder feedback, funktionsønsker og fejlrapporter velkommen. Vores udvikling er styret af reelle brugerbehov og det udviklende landskab af AI-assisteret kreativitet.

Gratis & Åben

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
Understøttede Sprog
25+
Relationstyper
111+
API Methods
7
Eksportformater

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.