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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
Sistem Efek
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.
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:
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:
-
📄
Desain Metode Pengetahuan Grafik Didorong oleh Data Heterogen Multi- Sumber Ilmu Terapan, 2025 Mendemonstrasikan bagaimana graph pengetahuan dapat menangkap hubungan metode desain dari sumber heterogen — fondasi untuk sistem relasi semantik kami.
-
📄
Menggunakan Model Bahasa Besar untuk Tantangan Fundamental Tackle dalam Pembelajaran Grafik arXiv, 2025 Survei pendekatan LLM untuk masalah pembelajaran graph — menginformasikan bagaimana alat MCP kami mengekspos struktur graph ke AI agents.
-
📄
LLM-Empowered Knowledge Graph Konstruksi: A Survey arXiv, 2025 Survei komprehensif konstruksi KG berbasis LLM — metodologi di balik ekstraksi graph desain otomatis kami.
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.
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 FreewareFree 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 DomainThe 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 MITThe Model Context Protocol server is open source and may be forked, modified, and redistributed. See github.com/pinepaper/mcp-server.
-
▹
PineWidget runtime EmbeddableThe standalone widget player ships unobfuscated and is intended for third-party embedding.
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.