Tentang PinePaper Studio

Membangun masa depan motion graphics: berbasis browser, berbasis AI, dan dapat diakses semua orang.

Misi Kami

PinePaper Studio mendemokratisasi desain motion graphics. Kami percaya alat kreatif yang kuat tidak seharusnya memerlukan lisensi software mahal, komputer kuat, atau pelatihan bertahun-tahun. Dengan menggabungkan teknologi web modern dengan desain AI-first, kami membuat teks animasi dan grafis dapat diakses oleh kreator di seluruh dunia.

Apa yang Membuat Kami Berbeda

🤖

Desain Berbasis AI

Dibangun dari awal untuk bekerja mulus dengan asisten AI. API komprehensif kami memungkinkan AI agents membuat, menganimasikan, dan mengekspor grafis melalui perintah bahasa alami.

🎬

Ekspor MP4 & GIF

Ekspor ke video MP4 (H.264 via WebCodecs) untuk Instagram, TikTok, dan LinkedIn. Buat GIF untuk Twitter, Discord, dan aplikasi pesan. Plus SVG animasi dan PNG.

⏱️

Timeline & Kunci frame

Editor timeline profesional dengan animasi berbasis keyframe. Buat urutan koreografi dengan kontrol waktu presisi, 5 fungsi easing, dan interpolasi warna.

🌍

Global secara Default

Mendukung 52 bahasa dan semua sistem penulisan termasuk Cina, Arab, Hindi, Bengali, dan emoji. Buat konten untuk audiens mana pun, di mana pun di dunia.

🚀

Kebebasan Berbasis Browser

Tidak perlu instalasi. Bekerja di perangkat apa pun dengan browser modern. Kreasi Anda diproses secara lokal, memastikan privasi dan hasil instan tanpa roundtrip server.

📋

Perpustakaan Template

Mulai kreativitas Anda dengan template yang sudah dirancang. Latar belakang indah, teks animasi, dan tata letak profesional siap dikustomisasi. Simpan kreasi Anda sebagai template yang dapat digunakan kembali.

🎨

Antarmuka Ganda

UI intuitif untuk desainer manusia dan API kuat untuk AI agents dan pengembang. Dua antarmuka, satu misi: memberdayakan kreativitas.

🖨️

Desain Siap Cetak

Buat materi cetak profesional dengan preset A3, A4, A5, Letter, Legal, dan Tabloid pada 300 DPI. Ekspor ke PDF dengan bleed dan tanda potong, atau PNG DPI tinggi (hingga 600 DPI) untuk percetakan komersial.

v0.4
🦴

Rigging Karakter

Animasi kerangka dengan tulang, propagasi FK, dan solver FABRIK IK. Simpan dan interpolasi pose, gunakan rig preset (humanoid, berkaki empat, laba-laba), dan kendalikan animasi via keyframe timeline.

v0.4
🎭

Pencampuran & Komposisi

Mode campuran per-item dan per-grup dengan 7 preset (hantu, neon, bayangan, cahaya, x-ray, mimpi, vintage). Transisi animasi, mode hover/klik interaktif, dan reaksi campuran berbasis kedekatan.

v0.4
✂️

Potong Jalur & Masking

Animasikan penggambaran goresan dengan potong jalur untuk efek "gambar garis". Masking lanjutan dengan mode potong/kurangi/irisan, tumpukan topeng, ungkapan animasi (14 preset), dan animasi verteks.

v0.4
🔗

Relasi Prosedural

Jenis relasi baru: driven_by (tautan properti), wiggle (noise prosedural), dan time_expression (ekspresi matematika dengan t). Plus komposisi bersarang (precomp) dengan timeline lokal independen.

v0.4
🌐

Canvas Infinite

Gambar di mana saja tanpa batas. Mode kanvas tak terbatas menghapus semua pembatasan ukuran - pan dan zoom bebas di seluruh ruang kerja yang tak terbatas.

v0.4
🖌️

Alat Gambar

6 peralatan menggambar profesional: pena, tinta kuas, penanda, kaleng semprotan, penghapus, dan isi ember. Masing-masing dengan cursor kustom dan dioptimalkan stroke algorithm.

v0.4
🧊

Peringkat Perkembangan

Proyek primitif (kubus, bola, silinder, torus, kerucut) ke kanvas dengan 5 tipe proyeksi. GPU- percepatan render (WebGPU / WebGL2), kamera orbital, dan obyek perspektif yang dapat dipilih & draggable.

v0.5
🎛

Filter Gambar GPU

Real- waktu pemrosesan gambar didukung oleh WebGPU shaders kompute dengan PP1X fallback. Penyesuaian HSL, kecerahan, kontras, deteksi tepi, warna warna warna, vignette, kabur, dan filter chaining dalam satu lulus GPU.

v0.5

Segmentasi Image

Freehand lasso alat untuk memilih dan mengekstrak daerah gambar pada resolusi asli penuh. 8 gaya presets (potongan kertas, kartu pos, stiker, poster, mono, sketsa, hangat, keren) menggabungkan filter GPU dengan efek bayangan.

v0.5
📐

Mesin Matematika & Sains

Komputer numerik yang didukung oleh math.js - pemecah ODE (RK4 / RK45), analisis spektrum FFT, penggambaran fungsi, kurva parametrik, simulasi sistem dinamis, dan permukaan parimetri dalam perspektif. Matematika sungguhan, animasi di kanvas.

Kepatuhan & Kepercayaan

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Pohon bayangan aksesibilitas bagi navigasi kanvas pembaca layar. Navigasi papan ketik, pengumuman wilayah aktif, lewati tautan, kontras audit, dan pemeriksaan sensitivitas gerak. PinePaper ontologi untuk deskripsi item semantik.

🔒

Header Keamanan

HSTS dengan preload, CSP, X-Frame-Options, Permissions-Policy. Tanpa akses kamera, mikrofon, lokasi, atau pembayaran.

👁

Privasi melalui Desain

100% pemrosesan sisi klien. Tanpa unggahan server, tanpa cookie, tanpa pengumpulan data.

Teknologi & Kemampuan

Teknologi Inti

  • Paper.js: Manipulasi dan rendering grafis vektor
  • HTML5 Canvas: Animasi waktu nyata dan ekspor
  • Vanilla JavaScript: Ringan, cepat, tanpa dependensi
  • Mesin Waktu: Interpolasi keyframe dengan fungsi easing
  • Mesin Rogging: Animasi kerangka dengan solver FK/IK dan interpolasi pose v0.4
  • Desain Grafik Pengetahuan: Ontologi semantik dengan 25+ jenis relasi, 35+ fungsi matematika, dan hierarki tipe v0.4
  • Runtime Rust/WASM: Akselerasi WebAssembly opsional — pemrosesan relasi 10-100x lebih cepat, tanpa jeda GC. Fallback JS. v0.5
  • Ontologi pp:PinePaper: Kosakata semantik 55 token (item, relasi, animasi, mask, generator) — bahasa animasi PinePaper. v0.5
  • Sentry: Pelacakan error dan pemantauan kinerja

Format Ekspor

  • Video WebM: Codec VP9 - kualitas terbaik untuk animasi
  • Video MP4: H.264 via WebCodecs API - ideal untuk media sosial
  • Animasi GIF: Via gif.js Web Workers - sempurna untuk pesan
  • PDF untuk Cetak: 300 DPI dengan bleed (3-5mm) dan tanda potong - cetak profesional
  • High- DPI PNG: Hingga 600 DPI untuk kualitas cetak komersial
  • Animasikan SVG: Animasi SVG natif dengan SMIL
  • Widget Interaktif: HTML mandiri dengan kode khusus adegan (~8-20KB). Akselerasi WASM. Dapat disematkan di mana saja. v0.5
  • Lottie JSON: Format animasi standar industri. Mengonversi animasi prosedural menjadi keyframe native secara otomatis. v0.4

Jenis Animasi

Denyut Putar Pantul Pudar Goyang Ayun Guncang Jeli Mesin Ketik Jalur Kustom Animasi Keyframe ✨ Potong Jalur Jalur Gerak Spasial Perubahan Bentuk Jalur 13 Deform Presets 100+ Animation Presets

Sistem Efek

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.

PinePaperServer MCP

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 dengan Claude Skill resmi

Skill mengajarkan Claude kapan mencapai PinePaper dan bagaimana mengendarainya dengan benar. Instal sekali dan bertanya dalam bahasa Inggris polos - "menghidupkan logo ini", "buat berdenyut lencana LIVE" - dan Claude rute melalui PP1X bukannya menghasilkan HTML / CSS.

Skill docs →

Pengaturan Cepat

1. Instal secara global:

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

2. Tambahkan ke konfigurasi Claude Desktop:

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. Coba di Claude Desktop:

"Buat teks berdenyut merah yang bertulisan HELLO" "Buat bumi mengorbit matahari"

Alat yang Tersedia

  • • Membuat teks, bentuk, grafis
  • • Menambah relasi (25+ jenis: orbits, follows, wiggle, dll.)
  • • Animasi keyframe & preset
  • • Rigging karakter (kerangka, tulang, IK/FK)
  • • Preset pencampuran & transisi
  • • Diagram, peta, pembuatan font
  • • Membuat latar belakang prosedural (14 generator)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Mengekspor SVG, data pelatihan

Platform AI yang Didukung

  • Claude Desktop
  • • Klien yang kompatibel MCP
  • • Integrasi kustom melalui API

Graph Pengetahuan Desain

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.

Pendekatan baru ini memungkinkan AI agents menalar tentang animasi kompleks dan hubungan struktural, memungkinkan pembuatan motion graphics canggih yang menjaga konsistensi semantik.

Riset Terkait

Arsitektur Graph Pengetahuan Desain mengambil ide dari makalah peer-reviewed ini:

Untuk Pengembang & AI Agents

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

  • Membuat dan memanipulasi teks, bentuk, dan elemen SVG yang diimpor
  • Menerapkan animasi (9 preset) dan efek (kilauan, ledakan)
  • Membuat animasi berbasis keyframe dengan kontrol timeline
  • Mengekspor ke MP4, GIF, SVG, atau PNG melalui API
  • Menggunakan relasi deklaratif (orbits, follows, attached_to)
  • Rig karakter dengan animasi kerangka dan keyframe pose v0.4
  • Membuat komposisi bersarang (precomp) dengan timeline lokal v0.4
  • Membangun alur kerja otomatis dan sistem pemrosesan batch

Contoh Penggunaan 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 });

Visi Kami

Kami sedang membangun platform motion graphics berbasis AI yang sesungguhnya pertama. Sementara alat lain menambahkan AI sebagai pemikiran belakangan, PinePaper dirancang dari hari pertama untuk dikendalikan oleh manusia dan mesin.

Tujuan kami adalah membuat motion graphics semudah menulis teks. Apakah Anda seorang desainer yang membuat konten secara manual, atau asisten AI yang membantu pengguna melalui bahasa alami, PinePaper menyediakan alat untuk membuat grafis animasi profesional dalam hitungan detik.

Apa Selanjutnya?

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.

Komunitas & Pengembangan Terbuka

PinePaper Studio dikembangkan secara transparan dengan komunitas kami. Kami menyambut umpan balik, permintaan fitur, dan laporan bug. Pengembangan kami dipandu oleh kebutuhan nyata pengguna dan lanskap kreativitas berbantuan AI yang terus berkembang.

Gratis & Terbuka

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
Bahasa yang Didukung
25+
Jenis Relasi
111+
API Methods
7
Format Ekspor

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.