Tietoja PinePaper Studiosta

Rakennamme liikegrafiikan tulevaisuutta: selainpohjainen, tekoälypohjainen ja kaikille saavutettava.

Missimme

PinePaper Studio demokratisoi liikegrafiikan suunnittelun. Uskomme, että tehokkaiden luovien työkalujen ei pitäisi vaatia kalliita ohjelmistolisenssejä, tehokkaita tietokoneita tai vuosien koulutusta. Yhdistämällä nykyaikaisia verkkoteknologioita tekoäly-ensisijaiseen suunnitteluun teemme animoidusta tekstistä ja grafiikasta saavutettavaa luojille maailmanlaajuisesti.

Mikä tekee meistä erilaisia

🤖

AI-alkuperäsuunnittelu

Rakennettu alusta alkaen toimimaan saumattomasti tekoälyavustajien kanssa. Kattava API:mme mahdollistaa tekoälyagenttien luoda, animoida ja viedä grafiikkaa luonnollisen kielen komennoilla.

🎬

MP4- & GIF-vienti

Vie MP4-videona (H.264 WebCodecsin kautta) Instagramiin, TikTokiin ja LinkedIniin. Luo GIF-kuvia Twitteriin, Discordiin ja viestisovelluksiin. Lisäksi animoitu SVG ja PNG.

⏱️

Aikajana & Avainkehykset

Ammattimainen aikajanaeditori avainkehyspohjaisilla animaatioilla. Luo koreografioituja sekvenssejä tarkalla ajoituksen hallinnalla, 5 kiihdytysfunktiolla ja väri-interpoloinnilla.

🌍

Globaali oletuksena

Tuki 52 kielelle ja kaikille kirjoitusjärjestelmille, mukaan lukien kiina, arabia, hindi, bengali ja emoji. Luo sisältöä mille tahansa yleisölle, missä tahansa maailmassa.

🚀

Selainpohjainen vapaus

Asennusta ei tarvita. Toimii millä tahansa laitteella nykyaikaisella selaimella. Luomuksesi käsitellään paikallisesti, varmistaen yksityisyyden ja välittömät tulokset ilman palvelinviestejä.

📋

Mallikirjasto

Käynnistä luovuutesi esivalmistetuilla malleilla. Kauniit taustat, animoitu teksti ja ammattimaiset asettelut valmiina muokattavaksi. Tallenna omat luomuksesi uudelleenkäytettävinä malleina.

🎨

Kaksoiskäyttöliittymä

Intuitiivinen käyttöliittymä ihmissuunnittelijoille ja tehokas API tekoälyagenteille ja kehittäjille. Kaksi käyttöliittymää, yksi missio: luovuuden voimaannuttaminen.

🖨️

Painovalmis suunnittelu

Luo ammattimaisia painomateriaaleja A3-, A4-, A5-, Letter-, Legal- ja Tabloid-esiasetuksilla 300 DPI:llä. Vie PDF:ksi leikkausvaralla ja leikkausmerkeillä, tai korkean DPI:n PNG:ksi (jopa 600 DPI) kaupalliseen painatukseen.

v0. 4
🦴

Hahmon luurankointi

Luurankoanimaatio luilla, FK-etenemisellä ja FABRIK IK -ratkaisijalla. Tallenna ja interpoloi asentoja, käytä esiasetettuja luurankoja (ihmismäinen, nelijalkainen, hämähäkki) ja ohjaa animaatiota aikajanan avainkehysten kautta.

v0. 4
🎭

Sekoitus & sommittelu

Kohde- ja ryhmäkohtaiset sekoitustilat 7 esiasetuksella (haamu, neon, varjo, hehku, röntgen, unelmainen, vintage). Animoidut siirtymät, vuorovaikutteiset hover/klikkaus-tilat ja läheisyyspohjaiset sekoitusreaktiot.

v0. 4
✂️

Rajauspolut & maskaus

Animoi viivan piirtoa rajauspolkujen avulla "viivapiirto"-efekteihin. Edistynyt maskaus leikkaus/vähennys/leikkaus-tiloilla, maskien pinoaminen, animoidut paljastukset (14 esiasetusta) ja pisteanimaatio.

v0. 4
🔗

Proseduraaliset suhteet

Uudet suhdetyypit: driven_by (ominaisuuslinkitys), wiggle (proseduraalinen kohina) ja time_expression (matemaattiset lausekkeet t:llä). Lisäksi sisäkkäiset sommitelmat (precomps) itsenäisillä paikallisilla aikajanoilla.

v0. 4
🌐

Ääretön kangas

Piirrä mihin tahansa ilman rajoja. Ei käytössä oleva kangastila poistaa kaikki kokorajoitukset.

v0. 4
🖌️

Piirustustyökalut

6 ammattimainen piirustus työkalut: kynä, musteharja, merkki, spray tölkki, pyyhekumi, ja täyttää kauha. Jokaisella on omat kursorit ja optimoidut aivohalvausalgoritmit.

v0. 4
🧊

Perspective Rendering

Projekti primitiivit (kuutio, pallo, sylinteri, torus, kartio) kankaalle 5 projektiotyypit. GPU-kiihdytetty renderöinti (WebGPU/WebGL2), kiertoratakamera ja valittavissa olevat & vetävät perspektiiviobjektit.

v0.5
🎛

GPU-kuvasuodattimet

Reaaliaikainen kuvankäsittely powered by WebGPU compute shaders with WebGL2 reserveback. HSL säätö, kirkkaus, kontrasti, posterize, reunan havaitseminen, väri sävy, vinjetti, sumea, ja suodatin ketjutus yhdessä GPU-passi.

v0.5

Kuvanjako

Freehand lasso työkalu valita ja poimia kuva alueet täysin natiivi resoluutio. 8 cutout tyyli esiasetukset (paperileikkuu, postikortti, tarra, juliste, mono, luonnos, lämmin, viileä) yhdistää GPU suodattimet varjotehosteet.

v0.5
📐

Math & Science Engine

Numeerinen computing powered by math.js Oikeaa matematiikkaa, kankaalla animoitua.

Vaatimustenmukaisuus & Luottamus

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Esteettömyys varjopuu näytönlukijakankaalle navigointi. Näppäimistö navigointi, live alue ilmoitukset, ohita linkkejä, kontrasti tarkastus, ja liikkeen herkkyys tarkistukset. Käyttää pp:PinePaper ontologia semanttisia tuotekuvauksia.

🔒

Tietoturvaotsikot

HSTS esilataus, CSP, X-Frame-Options, Permissions-Policy. Ei kamera-, mikrofoni-, sijainti- tai maksu-API-pääsyä.

👁

Yksityisyys suunnittelun kautta

100% asiakaspuolen käsittely. Ei palvelimen latauksia, ei evästeitä, ei tiedonkeruuta.

Teknologia & kyvykkyydet

Ydinteknologia

  • Paper.js: Vektorigrafiikan käsittely ja renderöinti
  • HTML5-kangas: Reaaliaikainen animaatio ja vienti
  • Vanilla JavaScript: Kevyt, nopea, ei riippuvuuksia
  • Aikajanamoottori: Avainkehysinterpolointi kiihdytysfunktioilla
  • Luurankomoottori: Luurankoanimaatio FK/IK-ratkaisjoilla ja asennon interpoloinnilla v0. 4
  • Suunnitteluosaamista koskeva kaavio: Semanttinen ontologia 25+ suhdetyypillä, 35+ matemaattisella funktiolla ja tyyppihierarkialla v0. 4
  • Rust/WASM-ajoympäristö: Valinnainen WebAssembly-kiihdytys — 10-100x nopeampi suhteiden käsittely, ei GC-taukoja. JS-varasuunnitelma. v0.5
  • pp:PinePaper-ontologia: 55-tokenin semanttinen sanasto (kohteet, suhteet, animaatiot, maskit, generaattorit) — PinePaper-animaatioiden kieli. v0.5
  • Vartija: Virheseuranta ja suorituskykymittaus

Vientimuodot

  • WebM-video: VP9-koodekki - paras laatu animaatioille
  • MP4-video: H.264 WebCodecs API:n kautta - ihanteellinen sosiaaliseen mediaan
  • GIF-animaatio: gif.js Web Workersin kautta - täydellinen viestisovelluksiin
  • PDF painatukseen: 300 DPI leikkausvaralla (3-5mm) ja leikkausmerkeillä - ammattimainen painatus
  • Korkean DPI:n PNG: Jopa 600 DPI kaupalliseen painolaatuun
  • Animoitu SVG: Natiivit SVG-animaatiot SMIL:llä
  • Interaktiivinen widget: Itsenäinen HTML kohtauskohtaisella koodilla (~8-20KB). WASM-kiihdytetty. Upotettavissa minne tahansa. v0.5
  • Lottie JSON: Alan standardi animaatiomuoto. Muuntaa proseduraaliset animaatiot automaattisesti natiiveiksi avainkehyksiksi. v0.4

Animaatiotyypit

Pulssi Pyöritä Pomppii Häivytys Huojunta Heiluri Ravista Hyytelö Kirjoituskone Mukautetut polut Avainkehysanimaatio ✨ Rajauspolut Avaruudelliset liikeradat Polun muodonmuutos 13 Deform Presets 100+ Animation Presets

Efektijärjestelmä

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- palvelin

Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:

Pari MCP virallisen Claude Skill

Taito opettaa Claudelle, milloin tavoittaa PinePaper ja miten ajaa sitä oikein. Asenna kerran ja kysy selkokielellä Englanti ... "elätä tämä logo," "tehdä sykkivä LIVE merkki" ... ja Claude reitit PinePaper sen sijaan, että tuottaa HTML/CSS.

Skill docs →

Pika-asennus

1. Asenna globaalisti:

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

2. Lisää Claude Desktop -asetuksiin:

hei ~/Library/Application Support/Claude/claude_desktop_config.json
Ikkunat: %APPDATA%\Claude\claude_desktop_config.json

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

3. Kokeile Claude Desktopissa:

"Luo punainen pulssiiva teksti, joka sanoo HELLO" "Laita maa kiertämään aurinkoa"

Saatavilla olevat työkalut

  • • Luo tekstiä, muotoja, grafiikkaa
  • • Lisää suhteita (25+ tyyppiä: orbits, follows, wiggle, jne.)
  • • Avainkehys- ja esiasetusanimaatiot
  • • Hahmon luurankointi (luurangot, luut, IK/FK)
  • • Sekoitusasetukset & siirtymät
  • • Kaaviot, kartat, fonttien luonti
  • • Generoi proseduraalisia taustoja (14 generaattoria)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Vie SVG, koulutusdata

Tuetut tekoälyalustat

  • Claude Desktop
  • • Mikä tahansa MCP-yhteensopiva asiakas
  • • Mukautetut integraatiot API:n kautta

Suunnitteluosaamista koskeva kaavio

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.

Tämä uudenlainen lähestymistapa mahdollistaa tekoälyagenttien päättelyn monimutkaisista animaatioista ja rakenteellisista suhteista, mikä sallii hienostuneiden liikegrafiikkojen generoinnin semanttisen johdonmukaisuuden säilyttäen.

Viitteellinen tutkimus

Design Knowledge Graphin arkkitehtuuri perustuu näiden vertaisarvioitujen julkaisujen ideoihin:

Kehittäjille & tekoälyagenteille

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

  • Luo ja käsittele tekstiä, muotoja ja tuotuja SVG-elementtejä
  • Käytä animaatioita (9 esiasetusta) ja efektejä (kipinä, räjähdys)
  • Luo avainkehyspohjaisia animaatioita aikajanaohjauksella
  • Vie MP4-, GIF-, SVG- tai PNG-muodossa API:n kautta
  • Käytä deklaratiivisia suhteita (orbits, follows, attached_to)
  • Rigaa hahmoja luurankoanimaatiolla ja asennon avainkehyksillä v0. 4
  • Luo sisäkkäisiä sommitelmia (precomps) paikallisilla aikajanoilla v0. 4
  • Rakenna automaattisia työnkulkuja ja eräkäsittelyjärjestelmiä

Esimerkki API:n käytöstä:

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

Visiomme

Rakennamme ensimmäistä aidosti tekoälypohjaista liikegrafiikka-alustaa. Kun muut työkalut lisäävät tekoälyn jälkikäteen, PinePaper suunniteltiin ensimmäisestä päivästä lähtien ohjattavaksi sekä ihmisten että koneiden toimesta.

Tavoitteemme on tehdä liikegrafiikasta yhtä helppoa kuin tekstin kirjoittaminen. Olit sitten suunnittelija, joka luo sisältöä manuaalisesti, tai tekoälyavustaja, joka auttaa käyttäjää luonnollisen kielen kautta, PinePaper tarjoaa työkalut ammattimaisten animoitujen grafiikkojen luomiseen sekunneissa.

Mitä seuraavaksi?

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.

Yhteisö & avoin kehitys

PinePaper Studiota kehitetään läpinäkyvästi yhteisömme kanssa. Otamme mielellämme vastaan palautetta, ominaisuuspyyntöjä ja virheraportteja. Kehitystämme ohjaavat todelliset käyttäjätarpeet ja tekoälyavusteisen luovuuden kehittyvä maisema.

Ilmainen & avoin

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
Tuetut kielet
25+
Suhdetyypit
111+
API Methods
7
Vientimuodot

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.