O PinePaper Studio

Budujemy przyszłość motion graphics: przeglądarkowe, natywne dla AI i dostępne dla wszystkich.

Nasza misja

PinePaper Studio demokratyzuje projektowanie grafiki ruchomej. Wierzymy, że potężne narzędzia kreatywne nie powinny wymagać drogich licencji oprogramowania, potężnych komputerów ani lat szkolenia. Łącząc nowoczesne technologie webowe z projektowaniem zorientowanym na AI, udostępniamy animowany tekst i grafikę twórcom na całym świecie.

Co nas wyróżnia

🤖

Projektowanie natywne dla AI

Zbudowany od podstaw do bezproblemowej pracy z asystentami AI. Nasze kompleksowe API pozwala agentom AI tworzyć, animować i eksportować grafikę za pomocą poleceń w języku naturalnym.

🎬

Eksport MP4 i GIF

Eksportuj do wideo MP4 (H.264 przez WebCodecs) na Instagram, TikTok i LinkedIn. Twórz GIFy na Twitter, Discord i aplikacje do wiadomości. Plus animowane SVG i PNG.

⏱️

Oś czasu i klatki kluczowe

Profesjonalny edytor osi czasu z animacjami opartymi na klatkach kluczowych. Twórz choreografowane sekwencje z precyzyjną kontrolą czasową, 5 funkcjami wygładzania i interpolacją kolorów.

🌍

Globalny domyślnie

Wsparcie dla 52 języków i wszystkich systemów pisma, w tym chińskiego, arabskiego, hindi, bengalskiego i emoji. Twórz treści dla każdej publiczności, gdziekolwiek na świecie.

🚀

Wolność przeglądarkowa

Nie wymaga instalacji. Działa na każdym urządzeniu z nowoczesną przeglądarką. Twoje kreacje przetwarzane są lokalnie, zapewniając prywatność i natychmiastowe wyniki bez komunikacji z serwerem.

📋

Biblioteka szablonów

Uruchom swoją kreatywność dzięki gotowym szablonom. Piękne tła, animowany tekst i profesjonalne układy gotowe do personalizacji. Zapisuj własne kreacje jako szablony wielokrotnego użytku.

🎨

Podwójny interfejs

Intuicyjny interfejs dla ludzkich projektantów i potężne API dla agentów AI i programistów. Dwa interfejsy, jedna misja: wzmacnianie kreatywności.

🖨️

Projekt gotowy do druku

Twórz profesjonalne materiały drukowane z presetami A3, A4, A5, Letter, Legal i Tabloid w 300 DPI. Eksportuj do PDF ze spadem i liniami cięcia, lub PNG w wysokim DPI (do 600 DPI) do druku komercyjnego.

v0,4
🦴

Rigging postaci

Animacja szkieletowa z kośćmi, propagacją FK i solverem IK FABRIK. Zapisuj i interpoluj pozy, używaj presetów szkieletów (humanoid, czworonóg, pająk) i steruj animacją przez klatki kluczowe osi czasu.

v0,4
🎭

Mieszanie i kompozycja

Tryby mieszania dla poszczególnych elementów i grup z 7 presetami (duch, neon, cień, blask, prześwietlenie, marzenie senne, vintage). Animowane przejścia, interaktywne tryby hover/klik i reakcje mieszania oparte na bliskości.

v0,4
✂️

Przycinanie ścieżek i maskowanie

Animuj rysowanie obrysów za pomocą przycinania ścieżek dla efektów "rysowania linii". Zaawansowane maskowanie z trybami przycinania/odejmowania/przecięcia, nakładanie masek, animowane ujawnianie (14 presetów) i animacja wierzchołków.

v0,4
🔗

Relacje proceduralne

Nowe typy relacji: driven_by (łączenie właściwości), wiggle (szum proceduralny) i time_expression (wyrażenia matematyczne z t). Plus zagnieżdżone kompozycje (prekompozycje) z niezależnymi lokalnymi osiami czasu.

v0,4
🌐

Nieskończone kanwy

Narysuj gdziekolwiek bez granic. Tryb płótna bez ograniczeń usuwa wszelkie ograniczenia wielkości - patelnia i powiększa swobodnie w nieskończonej przestrzeni roboczej.

v0,4
🖌️

Narzędzia do rysowania

6 profesjonalnych narzędzi do rysowania: pióro, szczotka do tuszu, marker, puszka na spray, gumka i wiadro. Każdy z własnymi kursorami i zoptymalizowanymi algorytmami udaru.

v0,4
🧊

Perspektywy renderowania

Project primitives (sześcian, kula, cylinder, torus, stożek) na płótnie z 5 typów projekcji. GPU- akcelerated rendering (WebGPU / WebGL2), kamera orbitalna, a także wybrane i rysowalne obiekty perspektywiczne.

v0.5
🎛

Filtry obrazów GPU

Real- time przetwarzania obrazu zasilany przez WebGPU oblicza Shaders z WebGL2 upadku. Regulacja HSL, jasność, kontrast, zalesianie, wykrywanie krawędzi, odcień koloru, winieta, rozmycie, i filtry łańcuchowe w jednym przełęczy GPU.

v0.5

Segmentacja obrazów

Narzędzie Freehand lasso do wyboru i ekstrakcji regionów obrazu w pełnej natywnej rozdzielczości. 8 preserów w stylu cięcia (papier, pocztówka, naklejka, plakat, mono, szkic, ciepłe, chłodne) łączy filtry GPU z efektami cienia.

v0.5
📐

Silnik matematyczny i naukowy

Komputery cyfrowe zasilane przez math.js - rozsiewacze ODE (RK4 / RK45), analiza widma FFT, planowanie funkcji, krzywe parametryczne, symulacja dynamiczna systemu oraz powierzchnie parametryczne w perspektywie. Prawdziwa matematyka, animowana na płótnie.

Zgodność i Zaufanie

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Dostępność cień drzewa dla czytnika ekranu nawigacja płótna. Nawigacja klawiatury, ogłoszenia na żywo w regionie, skip linki, audytu kontrastu i kontroli wrażliwości ruchu. Uses pp: ontologia PinePaper dla opisy pozycji semantycznych.

🔒

Nagłówki bezpieczeństwa

HSTS z preload, CSP, X-Frame-Options, Permissions-Policy. Brak dostępu do kamery, mikrofonu, lokalizacji.

👁

Prywatność w projekcie

100% przetwarzanie po stronie klienta. Bez wysyłania na serwer, bez ciasteczek, bez zbierania danych.

Technologia i możliwości

Technologia podstawowa

  • Paper.js: Manipulacja i renderowanie grafiki wektorowej
  • HTML5 Canvas: Animacja i eksport w czasie rzeczywistym
  • Vanilla JavaScript: Lekki, szybki, bez zależności
  • Silnik osi czasu: Interpolacja klatek kluczowych z funkcjami wygładzania
  • Silnik riggingu: Animacja szkieletowa z solverami FK/IK i interpolacją póz v0,4
  • Graf wiedzy projektowej: Ontologia semantyczna z 25+ typami relacji, 35+ funkcjami matematycznymi i hierarchią typów v0,4
  • Środowisko Rust/WASM: Opcjonalne przyspieszenie WebAssembly — 10-100x szybsze przetwarzanie relacji, bez pauz GC. Fallback na JS. v0.5
  • Ontologia pp:PinePaper: 55-tokenowy słownik semantyczny (elementy, relacje, animacje, maski, generatory) — język animacji PinePaper. v0.5
  • Wpis: Śledzenie błędów i monitorowanie wydajności

Formaty eksportu

  • Wideo WebM: Kodek VP9 - najlepsza jakość dla animacji
  • Wideo MP4: H.264 przez WebCodecs API - idealny dla mediów społecznościowych
  • Animacja GIF: Przez gif.js Web Workers - idealny do wiadomości
  • PDF do druku: 300 DPI ze spadem (3-5 mm) i liniami cięcia - druk profesjonalny
  • PNG wysokiej rozdzielczości: Do 600 DPI dla jakości druku komercyjnego
  • Animowane SVG: Natywne animacje SVG ze SMIL
  • Interaktywny widget: Samodzielny HTML z kodem specyficznym dla sceny (~8-20KB). Przyspieszenie WASM. Osadzalny wszędzie. v0.5
  • Lottie JSON: Standardowy format animacji. Automatycznie konwertuje animacje proceduralne na natywne klatki kluczowe. v0.4

Typy animacji

Pulsowanie Obrót Odbijanie Zanikanie Chwianie Kołysanie Trzęsienie Galaretka Maszyna do pisania Niestandardowe ścieżki Animacja klatek kluczowych ✨ Przycinanie ścieżek Przestrzenne ścieżki ruchu Morfing ścieżki 13 Deform Presets 100+ Animation Presets

System efektów

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.

Serwer PinePaper MCP

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

Para MCP z oficjalnym Claude Umiejętności

Umiejętność uczy Claude 'a, kiedy sięgnąć po PinePaper i jak go prawidłowo prowadzić. Zainstaluj raz i zapytaj po angielsku - "animate this logo", "make a pulsing LIVE odznaka" - i Claude trasy przez PinePaper zamiast generowania HTML / CSS.

Skill docs →

Szybka konfiguracja

1. Zainstaluj globalnie:

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

2. Dodaj do konfiguracji Claude Desktop:

mAKOS: ~/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. Wypróbuj w Claude Desktop:

"Utwórz czerwony pulsujący tekst z napisem HELLO" "Spraw, by Ziemia orbitowała wokół Słońca"

Dostępne narzędzia

  • • Tworzenie tekstu, kształtów, grafiki
  • • Dodawanie relacji (25+ typów: orbits, follows, wiggle itp.)
  • • Animacje klatek kluczowych i presety
  • • Rigging postaci (szkielety, kości, IK/FK)
  • • Presety mieszania i przejścia
  • • Diagramy, mapy, tworzenie czcionek
  • • Generowanie proceduralnych teł (14 generatorów)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Eksport SVG, dane treningowe

Obsługiwane platformy AI

  • • Claude Desktop
  • • Każdy klient kompatybilny z MCP
  • • Niestandardowe integracje przez API

Graf wiedzy projektowej

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.

To nowatorskie podejście umożliwia agentom AI rozumowanie o złożonych animacjach i relacjach strukturalnych, pozwalając na generowanie wyrafinowanej grafiki ruchomej zachowującej semantyczną spójność.

Przypisane badania

Architektura Grafu wiedzy projektowej czerpie z idei tych recenzowanych artykułów:

Dla programistów i agentów AI

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

  • Tworzyć i manipulować tekstem, kształtami i importowanymi elementami SVG
  • Stosować animacje (9 presetów) i efekty (iskry, eksplozja)
  • Tworzyć animacje oparte na klatkach kluczowych z kontrolą osi czasu
  • Eksportować do MP4, GIF, SVG lub PNG przez API
  • Używać deklaratywnych relacji (orbits, follows, attached_to)
  • Rigging postaci z animacją szkieletową i klatkami kluczowymi póz v0,4
  • Tworzenie zagnieżdżonych kompozycji (prekompozycji) z lokalnymi osiami czasu v0,4
  • Budować zautomatyzowane przepływy pracy i systemy przetwarzania wsadowego

Przykład użycia API:

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

Nasza wizja

Budujemy pierwszą prawdziwie natywną dla AI platformę grafiki ruchomej. Podczas gdy inne narzędzia dodają AI jako dodatek, PinePaper od pierwszego dnia był zaprojektowany do sterowania zarówno przez ludzi, jak i maszyny.

Naszym celem jest uczynienie grafiki ruchomej tak łatwą jak pisanie tekstu. Niezależnie od tego, czy jesteś projektantem tworzącym treści ręcznie, czy asystentem AI pomagającym użytkownikowi za pomocą języka naturalnego, PinePaper dostarcza narzędzia do tworzenia profesjonalnej animowanej grafiki w kilka sekund.

Co dalej?

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.

Społeczność i otwarty rozwój

PinePaper Studio jest rozwijane transparentnie wraz z naszą społecznością. Zapraszamy do dzielenia się opiniami, zgłaszania propozycji funkcji i raportowania błędów. Nasz rozwój jest kierowany rzeczywistymi potrzebami użytkowników i rozwijającym się krajobrazem kreatywności wspomaganej AI.

Darmowy i otwarty

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
Obsługiwane języki
25+
Typy relacji
111+
API Methods
7
Formaty eksportu

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.