Om PinePaper Studio

Vi bygger fremtidens motion graphics: nettleserbasert, AI-nativt og tilgjengelig for alle.

Vårt Oppdrag

PinePaper Studio demokratiserer motion graphics-design. Vi mener at kraftfulle kreative verktøy ikke bør kreve dyre programvarelisenser, kraftige datamaskiner eller årelang opplæring. Ved å kombinere moderne webteknologier med AI-først-design gjør vi animert tekst og grafikk tilgjengelig for skapere over hele verden.

Hva Gjør Oss Annerledes

🤖

AI-Nativ Design

Bygget fra grunnen av for å fungere sømløst med AI-assistenter. Vårt omfattende API lar AI-agenter lage, animere og eksportere grafikk gjennom naturlige språkkommandoer.

🎬

MP4 & GIF Eksport

Eksporter til MP4-video (H.264 via WebCodecs) for Instagram, TikTok og LinkedIn. Lag GIF-er for Twitter, Discord og meldingsapper. Pluss animert SVG og PNG.

⏱️

Tidslinje & Keyframes

Profesjonell tidslinjeredigerer med keyframe-baserte animasjoner. Lag koreograferte sekvenser med presis tidskontroll, 5 easing-funksjoner og fargeinterpolasjon.

🌍

Globalt som Standard

Støtte for 52 språk og alle skriftsystemer inkludert kinesisk, arabisk, hindi, bengalsk og emoji. Lag innhold for ethvert publikum, hvor som helst i verden.

🚀

Nettleserbasert Frihet

Ingen installasjon nødvendig. Fungerer på alle enheter med en moderne nettleser. Skapelsene dine behandles lokalt, noe som sikrer personvern og umiddelbare resultater uten serverforespørsler.

📋

Malbibliotek

Kickstart kreativiteten din med ferdigdesignede maler. Vakre bakgrunner, animert tekst og profesjonelle layouter klare for tilpasning. Lagre dine egne kreasjoner som gjenbrukbare maler.

🎨

Dobbelt Grensesnitt

Intuitivt brukergrensesnitt for menneskelige designere og et kraftfullt API for AI-agenter og utviklere. To grensesnitt, ett oppdrag: styrke kreativiteten.

🖨️

Trykkklart Design

Lag profesjonelt trykkmateriell med A3, A4, A5, Letter, Legal og Tabloid-forhåndsinnstillinger ved 300 DPI. Eksporter til PDF med utfallende og beskjæringsmerker, eller høy-DPI PNG (opptil 600 DPI) for kommersielt trykk.

v0.4
🦴

Karakterrigging

Skjelettanimasjon med bein, FK-propagering og FABRIK IK-løser. Lagre og interpoler poser, bruk forhåndsinnstilte rigger (humanoid, firbeint, edderkopp), og driv animasjon via tidslinje-keyframes.

v0.4
🎭

Blanding & Komposisjon

Per-element og per-gruppe blandingsmoduser med 7 forhåndsinnstillinger (spøkelse, neon, skygge, glød, røntgen, drømmende, vintage). Animerte overganger, interaktive hover/klikk-moduser og nærhetsbaserte blandingsreaksjoner.

v0.4
✂️

Trimningsstier & Maskering

Animer strektegning med trimningsstier for "linjetegning"-effekter. Avansert maskering med klipp/subtraher/skjæring-moduser, maskestabling, animerte avdekkinger (14 forhåndsinnstillinger) og vertex-animasjon.

v0.4
🔗

Prosedyremessige Relasjoner

Nye relasjonstyper: driven_by (egenskapskobling), wiggle (prosedyremessig støy) og time_expression (matematiske uttrykk med t). Pluss nestede komposisjoner (precomps) med uavhengige lokale tidslinjer.

v0.4
🌐

Infinite Canvas

Tegne noe sted uten grenser. Ubundet lerretmodus fjerner alle størrelsesrestriksjoner — pan og zoom fritt over et uendelig arbeidsområde.

v0.4
🖌️

Tegneverktøy

6 profesjonelle tegneverktøy: penn, blekkbørste, markør, spray kan, visker og fylle bøtte. Hver med egendefinerte markører og optimaliserte slag algoritmer.

v0.4
🧊

Perspektivgjengivelse

Prosjekt primitive (kube, sfære, sylinder, torus, kjegle) på lerret med 5 projeksjonstyper. GPU-akselerert rendering (WebGPU/WebGL2), banekamera og valgbare og drabare perspektivobjekter.

v0.5
🎛

GPU-bildefiltre

Real-time bildebehandling drevet av WebGPU beregne skyggere med WebGL2 reserve. HSL justering, lysstyrke, kontrast, plakatisering, kantdeteksjon, fargetone, vignette, sløring og filterkjede i et enkelt GPU pass.

v0.5

Bildesegmentering

Freehand lasso verktøy for å velge og trekke ut bildeområder ved full innfødt oppløsning. 8 cutout stil forhåndsinnstillinger (papirkutte, postkort, klistremerke, plakat, mono, skiss, varm, kul) kombinere GPU filtre med skyggeeffekter.

v0.5
📐

Matematikk og vitenskapsmotor

Numerisk databehandling drevet av matematikk.js - ODE løsere (RK4/RK45), FFT spekteranalyse, funksjonsplanlegging, parametriske kurver, dynamisk systemsimulering og parametriske overflater i perspektiv. Ekte matematikk, animert på lerret.

Samsvar & Tillit

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Tilgjengelighet skyggetre for skjermleser lerret navigasjon. Tastaturnavigasjon, direkte-region kunngjøringer, hoppe over koblinger, kontrastrevisjon og bevegelsesfølsomhetskontroll. Bruker pp:PinePaper ontologi for semantiske elementbeskrivelser.

🔒

Sikkerhetsoverskrifter

HSTS med forhåndslasting, CSP, X-Frame-Options, Permissions-Policy. Ingen kamera-, mikrofon-, sted- eller betalingstilgang.

👁

Personvern ved design

100% klientsidebehandling. Ingen serveropplastinger, ingen informasjonskapsler, ingen datainnsamling.

Teknologi & Funksjoner

Kjerneteknologi

  • Paper.js: Vektorgrafikk-manipulering og rendering
  • HTML5 Canvas: Sanntidsanimasjon og eksport
  • Vanilla JavaScript: Lettvektig, rask, ingen avhengigheter
  • Tidslinjemotor: Keyframe-interpolasjon med easing-funksjoner
  • Rigging-motor: Skjelettanimasjon med FK/IK-løsere og poseinterpolasjon v0.4
  • Design kunnskapsgraf: Semantisk ontologi med 25+ relasjonstyper, 35+ matematiske funksjoner og typehierarki v0.4
  • Rust/WASM-kjøretid: Valgfri WebAssembly-akselerasjon — 10-100x raskere relasjonsbehandling, ingen GC-pauser. JS-fallback. v0.5
  • pp:PinePaper-ontologi: 55-token semantisk ordforråd (elementer, relasjoner, animasjoner, masker, generatorer) — PinePaper-animasjonenes språk. v0.5
  • Sentry: Feilsporing og ytelsesovervåking

Eksportformater

  • WebM-video: VP9-kodek - best kvalitet for animasjoner
  • MP4-video: H.264 via WebCodecs API - ideell for sosiale medier
  • GIF-animasjon: Via gif.js Web Workers - perfekt for meldingsapper
  • PDF for Trykk: 300 DPI med utfallende (3-5mm) og beskjæringsmerker - profesjonelt trykk
  • Høy-DPI PNG: Opptil 600 DPI for kommersiell trykkvalitet
  • Animert SVG: Native SVG-animasjoner med SMIL
  • Interaktiv widget: Frittstående HTML med scenespesifikk kode (~8-20KB). WASM-akselerert. Kan bygges inn overalt. v0.5
  • Lottie JSON: Industristandard animasjonsformat. Konverterer automatisk prosedyreanimasjoner til native keyframes. v0.4

Animasjonstyper

Puls Roter Sprett Uttoning Vippe Sving Rist Gelé Skrivemaskin Tilpassede Stier Keyframe-animasjon ✨ Trimningsstier Romlige Bevegelsesstier 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:

Pair MCP med den offisielle Claude Skill

Ferdigheten lærer Claude når å nå for PinePaper og hvordan å kjøre den riktig. Installer en gang og spør på vanlig engelsk - - -animate denne logoen - gjør en pulserende LIVE-merket - og Claude ruter gjennom PinePaper i stedet for å generere HTML / CSS.

Skill docs →

Hurtig Oppsett

1. Installer globalt:

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

2. Legg til i Claude Desktop-konfigurasjon:

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. Prøv det i Claude Desktop:

"Lag en rød pulserende tekst som sier HELLO" "Få jorden til å gå i bane rundt solen"

Tilgjengelige Verktøy

  • • Lag tekst, former, grafikk
  • • Legg til relasjoner (25+ typer: orbits, follows, wiggle, osv.)
  • • Keyframe- og forhåndsinnstilte animasjoner
  • • Karakterrigging (skjeletter, bein, IK/FK)
  • • Blandingsforhåndsinnstillinger & overganger
  • • Diagrammer, kart, skrifttypeoppretting
  • • Generer prosedyremessige bakgrunner (14 generatorer)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Eksporter SVG, treningsdata

Støttede AI-plattformer

  • Claude Desktop
  • • Enhver MCP-kompatibel klient
  • • Tilpassede integrasjoner via API

Design kunnskapsgraf

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 tilnærmingen gjør det mulig for AI-agenter å resonnere om komplekse animasjoner og strukturelle relasjoner, noe som muliggjør generering av sofistikerte motion graphics som opprettholder semantisk konsistens.

Tilskrevet Forskning

Design Knowledge Graph-arkitekturen bygger på idéer fra disse fagfellevurderte artiklene:

For Utviklere & AI-Agenter

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

  • Lage og manipulere tekst, former og importerte SVG-elementer
  • Bruke animasjoner (9 forhåndsinnstillinger) og effekter (gnist, eksplosjon)
  • Lage keyframe-baserte animasjoner med tidslinjekontroll
  • Eksportere til MP4, GIF, SVG eller PNG via API
  • Bruke deklarative relasjoner (orbits, follows, attached_to)
  • Rigg karakterer med skjelettanimasjon og pose-keyframes v0.4
  • Lag nestede komposisjoner (precomps) med lokale tidslinjer v0.4
  • Bygge automatiserte arbeidsflyter og batchbehandlingssystemer

Eksempel på API-bruk:

// 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 Visjon

Vi bygger den første virkelig AI-native motion graphics-plattformen. Mens andre verktøy legger til AI som en ettertanke, ble PinePaper designet fra dag én for å styres av både mennesker og maskiner.

Målet vårt er å gjøre motion graphics like enkelt som å skrive tekst. Enten du er en designer som lager innhold manuelt, eller en AI-assistent som hjelper en bruker gjennom naturlig språk, gir PinePaper verktøyene for å lage profesjonell animert grafikk på sekunder.

Hva Er Neste?

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.

Fellesskap & Åpen Utvikling

PinePaper Studio utvikles transparent med fellesskapet vårt. Vi ønsker tilbakemeldinger, funksjonsønsker og feilrapporter velkommen. Utviklingen vår styres av reelle brukerbehov og det stadig utviklende landskapet innen AI-assistert kreativitet.

Gratis & Åpen

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øttede Språk
25+
Relasjonstyper
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.