Tentang PinePaper Studio

Membina masa depan grafik gerakan: berasaskan pelayar, berasaskan AI, dan boleh diakses oleh semua.

Misi Kami

PinePaper Studio mendemokrasikan reka bentuk grafik gerakan. Kami percaya alat kreatif yang berkuasa tidak sepatutnya memerlukan lesen perisian mahal, komputer berkuasa, atau latihan bertahun-tahun. Dengan menggabungkan teknologi web moden dengan reka bentuk mengutamakan AI, kami menjadikan teks dan grafik beranimasi boleh diakses oleh pencipta di seluruh dunia.

Apa yang Membezakan Kami

🤖

Reka Bentuk Berasaskan AI

Dibina dari awal untuk berfungsi lancar dengan pembantu AI. API komprehensif kami membolehkan agen AI mencipta, menganimasikan, dan mengeksport grafik melalui arahan bahasa semula jadi.

🎬

Eksport MP4 & GIF

Eksport ke video MP4 (H.264 melalui WebCodecs) untuk Instagram, TikTok, dan LinkedIn. Cipta GIF untuk Twitter, Discord, dan aplikasi pemesejan. Ditambah SVG beranimasi dan PNG.

⏱️

Garis Masa & Bingkai Kunci

Editor garis masa profesional dengan animasi berasaskan bingkai kunci. Cipta jujukan berkoreografi dengan kawalan masa tepat, 5 fungsi pelicinan, dan interpolasi warna.

🌍

Global secara Lalai

Sokongan untuk 52 bahasa dan semua sistem penulisan termasuk Cina, Arab, Hindi, Bengali, dan emoji. Cipta kandungan untuk mana-mana penonton, di mana-mana di dunia.

🚀

Kebebasan Berasaskan Pelayar

Tiada pemasangan diperlukan. Berfungsi pada mana-mana peranti dengan pelayar moden. Ciptaan anda diproses secara tempatan, memastikan privasi dan hasil segera tanpa perjalanan ke pelayan.

📋

Perpustakaan Templat

Mulakan kreativiti anda dengan templat pra-reka bentuk. Latar belakang cantik, teks beranimasi, dan susun atur profesional sedia untuk disesuaikan. Simpan ciptaan anda sendiri sebagai templat boleh guna semula.

🎨

Antara Muka Dwi

UI intuitif untuk pereka manusia dan API berkuasa untuk agen AI dan pembangun. Dua antara muka, satu misi: memperkasakan kreativiti.

🖨️

Reka Bentuk Sedia Cetak

Cipta bahan cetak profesional dengan praset A3, A4, A5, Surat, Legal, dan Tabloid pada 300 DPI. Eksport ke PDF dengan lebihan dan tanda potong, atau PNG DPI-tinggi (sehingga 600 DPI) untuk percetakan komersial.

va0.4
🦴

Rigging Watak

Animasi rangka dengan tulang, penyebaran FK, dan penyelesai IK FABRIK. Simpan dan interpolasi pose, gunakan rig praset (humanoid, berkaki empat, labah-labah), dan pacu animasi melalui bingkai kunci garis masa.

va0.4
🎭

Campuran & Komposisi

Mod campuran per-item dan per-kumpulan dengan 7 praset (hantu, neon, bayang, cahaya, x-ray, impian, vintaj). Peralihan beranimasi, mod hover/klik interaktif, dan reaksi campuran berasaskan kehampiran.

va0.4
✂️

Laluan Potong & Topeng

Animasikan lukisan goresan dengan laluan potong untuk kesan "lukis garisan". Topeng lanjutan dengan mod potong/tolak/silang, penyusunan topeng, pendedahan beranimasi (14 praset), dan animasi bucu.

va0.4
🔗

Hubungan Prosedural

Jenis hubungan baharu: driven_by (pautan sifat), wiggle (hingar prosedural), dan time_expression (ungkapan matematik dengan t). Ditambah komposisi bersarang (precomps) dengan garis masa tempatan bebas.

va0.4
🌐

Canvas Tak Terhingga

Digambar di mana saja tanpa batasan. Mode kanvas yang tak terbantahkan menyingkirkan semua pembatasan ukuran — pan dan zoom secara bebas melintasi ruang kerja yang tak terbatas.

va0.4
🖌️

Alat Gambar

6. Alat lukis profesional: pena, kuas tinta, penanda, kaleng semprot, penghapus, dan isi ember. Trinidad masing-masing dengan kursor adat dan mengoptimalkan algoritma stroke.

va0.4
🧊

Penerapan Perspektif Perspektif

Proyek primitif (cube, sfera, silinder, torus, kerucut) ke kanvas dengan 5 tipe proyeksi. Renderasi dipercepat-GPU (WebGPU/WebGL2), kamera orbital, dan objek perspektif yang dapat dipilih dan dapat diseret.

v0.5
🎛

Penapis Gambar GPU

Pengolahan gambar waktu-nya-nyata yang ditenagai oleh WebGPU menghitung shader dengan WebGL2 fallback. Pelarasan HSL, kecerahan, kontras, posterisasi, deteksi tepi, warna tint, vignette, kabur, dan rantai filter dalam satu lulus GPU tunggal.

v0.5

Segmentasi Gambar

Alat laso freehand untuk memilih dan mengekstrak wilayah gambar pada resolusi asli penuh. Praset gaya cutout 8 (papercut, kartu pos, stiker, poster, mono, sketsa, hangat, dingin) menggabungkan filter GPU dengan efek bayangan.

v0.5
📐

Mesin Sains Math &

Komputasi Numerical numerik yang ditenagai oleh matematika.js — pemecah ODE (RK4/RK45), analisis spektrum FFT, plot fungsi, kurva parametrik, simulasi sistem dinamis, dan permukaan parametrik dalam perspektif. Matematika asli, animasi di kanvas.

Pematuhan & Kepercayaan

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2 2.11 AA

Kebolehcapaian pohon bayangan untuk navigasi kanvas pembaca layar. Navigasi keyboard, pengumuman wilayah langsung, melewatkan link, audit kontras, dan cek sensitivitas gerakan. Uses pp:PinePaper ontologi untuk deskripsi butir semantik.

🔒

Pengepala Keselamatan

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

👁

Privasi melalui Reka Bentuk

100% pemprosesan sisi pelanggan. Tiada muat naik pelayan, tiada kuki, tiada pengumpulan data.

Teknologi & Keupayaan

Teknologi Teras

  • Paper.js: Manipulasi dan pemaparan grafik vektor
  • HTML5 Kanvas: Animasi masa nyata dan eksport
  • JavaScript Vanila: Ringan, pantas, tiada kebergantungan
  • Enjin Garis Masa: Interpolasi bingkai kunci dengan fungsi pelicinan
  • Enjin Rigging: Animasi rangka dengan penyelesai FK/IK dan interpolasi pose va0.4
  • Graf Pengetahuan Reka Bentuk: Ontologi semantik dengan 25+ jenis hubungan, 35+ fungsi matematik, dan hierarki jenis va0.4
  • Runtime Rust/WASM: Pecutan WebAssembly pilihan — pemprosesan hubungan 10-100x lebih pantas, tiada jeda GC. Sandaran JS. v0.5
  • Ontologi pp:PinePaper: Kosa kata semantik 55 token (item, hubungan, animasi, topeng, penjana) — bahasa animasi PinePaper. v0.5
  • Entri: Penjejakan ralat dan pemantauan prestasi

Format Eksport

  • Video WebM: Kodek VP9 - kualiti terbaik untuk animasi
  • Video MP4: H.264 melalui API WebCodecs - sesuai untuk media sosial
  • Animasi GIF: Melalui gif.js Web Workers - sempurna untuk pemesejan
  • PDF untuk Cetak: 300 DPI dengan lebihan (3-5mm) dan tanda potong - percetakan profesional
  • PNG DPI-Tinggi: Sehingga 600 DPI untuk kualiti cetak komersial
  • SVG Beranimasi: Animasi SVG asli dengan SMIL
  • Widget Interaktif: HTML berdiri sendiri dengan kod khusus adegan (~8-20KB). Dipercepat WASM. Boleh dibenamkan di mana-mana. v0.5
  • Lottie JSON: Format animasi standard industri. Menukar animasi prosedur kepada bingkai kunci asli secara automatik. v0.4

Jenis Animasi

Denyut Putar Lantunan Pudar Goyang Ayun Goncang Jeli Mesin Taip Laluan Tersuai Animasi Bingkai Kunci ✨ Laluan Potong Laluan Gerakan Spatial Pengubahan Laluan 13 Deform Presets 100+ Animation Presets

Sistem Kesan

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.

Pelayan MCP PinePaper

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

Pasangan suami istri MCP dengan resmi Claude Skill

Keterampilan mengajarkan Claude kapan untuk mencapai PinePaper dan bagaimana mengemudikannya dengan benar. Instal sekali dan tanyakan dalam bahasa Inggris biasa — " animated logo ini", "make a pulsing LIVE lencana" — dan Claude rute melalui PinePaper daripada menghasilkan HTML/CSS.

Skill docs →

Persediaan Pantas

1. Pasang secara global:

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

2. Tambah ke konfigurasi Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Jendela: %APPDATA%\Claude\claude_desktop_config.json

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

3. Cuba di Claude Desktop:

"Cipta teks merah berdenyut yang bertulis HELLO" "Buat bumi mengorbit matahari"

Alat Tersedia

  • • Cipta teks, bentuk, grafik
  • • Tambah hubungan (25+ jenis: mengorbit, mengikuti, goyang, dll.)
  • • Animasi bingkai kunci & praset
  • • Rigging watak (rangka, tulang, IK/FK)
  • • Praset campuran & peralihan
  • • Rajah, peta, penciptaan fon
  • • Jana latar belakang prosedural (14 penjana)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Eksport SVG, data latihan

Platform AI yang Disokong

  • Claude Desktop
  • • Mana-mana klien serasi MCP
  • • Integrasi tersuai melalui API

Graf Pengetahuan Reka Bentuk

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 novel ini membolehkan agen AI menaakul tentang animasi kompleks dan hubungan struktur, membolehkan penjanaan grafik gerakan canggih yang mengekalkan konsistensi semantik.

Penyelidikan Berkredit

Seni bina Graf Pengetahuan Reka Bentuk mengambil idea daripada kertas-kertas kajian yang dinilai rakan sejawat ini:

Untuk Pembangun & Agen AI

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

  • Cipta dan manipulasi teks, bentuk, dan elemen SVG yang diimport
  • Gunakan animasi (9 praset) dan kesan (sparkle, blast)
  • Cipta animasi berasaskan bingkai kunci dengan kawalan garis masa
  • Eksport ke MP4, GIF, SVG, atau PNG melalui API
  • Gunakan hubungan deklaratif (mengorbit, mengikuti, dilampirkan_ke)
  • Rig watak dengan animasi rangka dan bingkai kunci pose va0.4
  • Cipta komposisi bersarang (precomps) dengan garis masa tempatan va0.4
  • Bina aliran kerja automatik dan sistem pemprosesan kelompok

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 membina platform grafik gerakan berasaskan AI yang pertama sebenarnya. Sementara alat lain menambah AI sebagai pemikiran terkemudian, PinePaper direka dari hari pertama untuk dikawal oleh kedua-dua manusia dan mesin.

Matlamat kami adalah menjadikan grafik gerakan semudah menulis teks. Sama ada anda seorang pereka mencipta kandungan secara manual, atau pembantu AI membantu pengguna melalui bahasa semula jadi, PinePaper menyediakan alat untuk mencipta grafik beranimasi profesional dalam beberapa saat.

Apa Seterusnya?

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.

Komuniti & Pembangunan Terbuka

PinePaper Studio dibangunkan secara telus bersama komuniti kami. Kami mengalu-alukan maklum balas, permintaan ciri, dan laporan pepijat. Pembangunan kami dipandu oleh keperluan pengguna sebenar dan landskap kreativiti berbantukan AI yang berkembang.

Percuma & 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 Disokong
25+
Jenis Hubungan
111+
API Methods
7
Format Eksport

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.