PinePaper Studio Hakkında
Hareketli grafiklerin geleceğini inşa ediyoruz: tarayıcı tabanlı, yapay zeka doğal ve herkes için erişilebilir.
Misyonumuz
PinePaper Studio, hareketli grafik tasarımını demokratikleştiriyor. Güçlü yaratıcı araçların pahalı yazılım lisansları, güçlü bilgisayarlar veya yıllarca eğitim gerektirmemesi gerektiğine inanıyoruz. Modern web teknolojilerini yapay zeka öncelikli tasarımla birleştirerek, animasyonlu metin ve grafikleri dünya çapındaki içerik üreticileri için erişilebilir hale getiriyoruz.
Bizi Farklı Kılan
Yapay Zeka Doğal Tasarım
Yapay zeka asistanlarıyla sorunsuz çalışmak için sıfırdan tasarlandı. Kapsamlı API’miz, AI ajanlarının doğal dil komutları aracılığıyla grafik oluşturmasına, animasyon yapmasına ve dışa aktarmasına olanak tanır.
MP4 ve GIF Dışa Aktarma
Instagram, TikTok ve LinkedIn için MP4 videoya (WebCodecs üzerinden H.264) dışa aktarın. Twitter, Discord ve mesajlaşma uygulamaları için GIF oluşturun. Ayrıca animasyonlu SVG ve PNG desteği.
Zaman Çizelgesi ve Anahtar Kareler
Anahtar kare tabanlı animasyonlarla profesyonel zaman çizelgesi düzenleyicisi. Hassas zamanlama kontrolü, 5 yumuşatma fonksiyonu ve renk enterpolasyonu ile koreografik diziler oluşturun.
Doğası Gereği Küresel
Çince, Arapça, Hintçe, Bengalçe ve emoji dahil 52 dil ve tüm yazı sistemleri desteği. Dünyanın her yerinde, her kitle için içerik oluşturun.
Tarayıcı Özgürlüğü
Kurulum gerektirmez. Modern tarayıcısı olan herhangi bir cihazda çalışır. Çalışmalarınız yerel olarak işlenir, gizliliği ve sunucu gidiş-dönüşü olmadan anında sonuçları garanti eder.
Şablon Kütüphanesi
Önceden tasarlanmış şablonlarla yaratıcılığınızı hızlandırın. Güzel arka planlar, animasyonlu metinler ve özelleştirmeye hazır profesyonel düzenler. Kendi oluşturduklarınızı yeniden kullanılabilir şablonlar olarak kaydedin.
Çift Arayüz
İnsan tasarımcılar için sezgisel kullanıcı arayüzü ve AI ajanları ile geliştiriciler için güçlü API. İki arayüz, tek misyon: yaratıcılığı güçlendirmek.
Baskıya Hazır Tasarım
A3, A4, A5, Letter, Legal ve Tabloid ön ayarlarıyla 300 DPI’da profesyonel baskı materyalleri oluşturun. Taşma payı ve kesim işaretleriyle PDF’ye veya ticari baskı için yüksek DPI’da PNG’ye (600 DPI’a kadar) dışa aktarın.
Karakter İskeleti
Kemikler, FK yayılımı ve FABRIK IK çözücüsü ile iskelet animasyonu. Pozları kaydedin ve enterpolasyon yapın, hazır iskelet şablonları (insansı, dört ayaklı, örümcek) kullanın ve zaman çizelgesi anahtar kareleri ile animasyonu yönetin.
Karıştırma ve Birleştirme
7 ön ayarla (hayalet, neon, gölge, parlama, röntgen, rüya, retro) öğe ve grup bazlı karıştırma modları. Animasyonlu geçişler, etkileşimli üzerine gelme/tıklama modları ve yakınlık tabanlı karıştırma tepkileri.
Yol Kırpma ve Maskeleme
"Çizgi çizme" efektleri için kırpma yollarıyla çizgi animasyonu. Kırpma/çıkarma/kesişim modları, maske yığınlama, animasyonlu ortaya çıkış (14 ön ayar) ve köşe animasyonu ile gelişmiş maskeleme.
Prosedürel İlişkiler
Yeni ilişki türleri: driven_by (özellik bağlama), wiggle (prosedürel gürültü) ve time_expression (t ile matematiksel ifadeler). Artı bağımsız yerel zaman çizelgeleri olan iç içe kompozisyonlar (precomp'lar).
Sonsuza dek
Sınırlar olmadan herhangi bir yere çizin. Sınırsız tuval modu tüm boyut kısıtlamalarını ortadan kaldırır - pan ve sonsuz bir çalışma alanı boyunca özgürce.
Çizim Araçları
6 profesyonel çizim araçları: pen, ink fırça, işaretleyici, sprey, silinir ve kova doldurabilir. Her biri özel cursors ve optimize edilmiş vuruş algoritmaları ile.
Perspektif
Proje ilkelleri (rbe, alan, silindir, torus, cone) 5 projeksiyon türü ile tuval üzerinde. GPU-akcelerated (WebGPU/WebGL2), yörünge kamera ve uygun olmayan perspektif nesneleri.
GPU Görüntü Filtreleri
WebGPU hesap gölgeleri WebGL2 geri çekilme ile güçlendirilen gerçek zamanlı görüntü işleme. HSL ayarı, parlaklık, kontrast, posterleme, kenar algılaması, renkli tint, vignette, bulanık ve tek bir GPU geçişinde filtre zinciri.
Image Segmentation
Freehand lasso aracı tam yerli kararda görüntü bölgeleri seçmek ve çıkarmak için. 8 Cutout tarzı presets (papercut, postcard, çıkartma, poster, monolitik, sıcak, serin) GPU filtrelerini gölge etkileri ile birleştirir.
Math & Science Engine
Matematik.js tarafından desteklenen Numerical Computing - ODE çözücüler (RK4/RK45), FFT spektrum analizi, işlev arsa, parametrik eğriler, dinamik sistem simülasyonu ve perspektifteki parametrik yüzeyler. Gerçek matematik, tuval üzerinde animasyon.
Uyumluluk ve Güven
WCAG 2.1 AA
Ekran okuyucu tuval navigasyon için erişilebilirlik gölge ağacı. Klavye navigasyon, canlı bölge duyuruları, bağlantıları atlar, kontrast denetim ve hareket duyarlılığı kontrolleri. pp:PinePaper semantic item açıklaması içintoloji.
Güvenlik Başlıkları
HSTS ön yükleme, CSP, X-Frame-Options, Permissions-Policy. Kamera, mikrofon, konum veya ödeme API erişimi yok.
Tasarımla Gizlilik
100% istemci tarafı işleme. Sunucu yüklemesi yok, çerez yok, veri toplama yok.
Teknoloji ve Yetenekler
Çekirdek Teknoloji
- ▹ Paper.js: Vektör grafik manipülasyonu ve görüntüleme
- ▹ HTML5 Canvas: Gerçek zamanlı animasyon ve dışa aktarma
- ▹ Vanilla JavaScript: Hafif, hızlı, bağımlılıksız
- ▹ Zaman Çizelgesi Motoru: Yumuşatma fonksiyonlarıyla anahtar kare enterpolasyonu
- ▹ İskelet Motoru: FK/IK çözücüler ve poz enterpolasyonu ile iskelet animasyonu v0.4
- ▹ Tasarım Bilgi Grafiği: 25+ ilişki türü, 35+ matematik fonksiyonu ve tür hiyerarşisi ile anlamsal ontoloji v0.4
- ▹ Rust/WASM Çalışma Zamanı: İsteğe bağlı WebAssembly hızlandırma — ilişki işleme 10-100x daha hızlı, GC duraklaması yok. v0.5
- ▹ pp:PinePaper Ontolojisi: 55 jetonluk semantik kelime dağarcığı (öğeler, ilişkiler, animasyonlar, maskeler, oluşturucular) — PinePaper animasyonlarının dili. v0.5
- ▹ Sentry: Hata takibi ve performans izleme
Dışa Aktarma Formatları
- ▹ WebM Video: VP9 kodek - animasyonlar için en iyi kalite
- ▹ MP4 Video: WebCodecs API üzerinden H.264 - sosyal medya için ideal
- ▹ GIF Animasyonu: gif.js Web Workers üzerinden - mesajlaşma için mükemmel
- ▹ Baskı İçin PDF: 300 DPI taşma payı (3-5mm) ve kesim işaretleriyle - profesyonel baskı
- ▹ Yüksek DPI PNG: Ticari baskı kalitesi için 600 DPI’a kadar
- ▹ Animasyonlu SVG: SMIL ile yerel SVG animasyonları
- ▹ Etkileşimli Widget: Sahneye özel kodlu bağımsız HTML (~8-20KB). WASM hızlandırmalı. Her yere gömülebilir. v0.5
- ▹ Lottie JSON: Endüstri standardı animasyon formatı. Prosedürel animasyonları otomatik olarak yerel anahtar karelere dönüştürür. v0.4
Animasyon Türleri
Efekt Sistemi
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 Sunucusu
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 resmi Claude Skill ile
Beceri, PinePaper için ne zaman ulaştığını ve doğru şekilde nasıl kullanılacağını öğretir. Bir kez yükleyin ve HTML /CSS'i oluşturmak yerine PinePaper ile PinePaper /CSS'i oluşturmak için PinePaper'e gidin.
Hızlı Kurulum
1. Global olarak yükleyin:
npm install -g @pinepaper.studio/mcp-server
2. Claude Desktop yapılandırmasına ekleyin:
linux: ~/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. Claude Desktop’ta deneyin:
Kullanılabilir Araçlar
- • Metin, şekiller, grafikler oluşturun
- • İlişkiler ekleyin (25+ tür: yörünge, takip, sallanma vb.)
- • Anahtar kare ve hazır animasyonlar
- • Karakter iskeleti (iskeletler, kemikler, IK/FK)
- • Karışım hazır ayarları ve geçişler
- • Diyagramlar, haritalar, yazı tipi oluşturma
- • Prosedürel arka planlar oluşturun (14 oluşturucu)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • SVG, eğitim verisi dışa aktarın
Desteklenen AI Platformları
- • Claude Desktop
- • Herhangi bir MCP uyumlu istemci
- • API aracılığıyla özel entegrasyonlar
Tasarım Bilgi Grafiği
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.
Bu yenilikçi yaklaşım, AI ajanlarının karmaşık animasyonlar ve yapısal ilişkiler hakkında akıl yürütmesini sağlayarak, anlamsal tutarlılığı koruyan sofistike hareketli grafikler oluşturmaya olanak tanır.
Araştırmaya Dayalı
Tasarım Bilgi Grafiği mimarisi, bu hakemli makalelerden faydalanmaktadır:
-
📄
Design Method Knowledge Graph Driven by Multi- Source Heterogeneous Data Uygulamalı Bilimler, 2025 Bilgi grafiklerinin heterojen kaynaklardan tasarım yöntemi ilişkilerini nasıl yakalayabileceğini gösterir — anlamsal ilişki sistemimizin temeli.
-
📄
Graph Learning arXiv, 2025 Graf öğrenme problemlerine yönelik LLM yaklaşımlarının araştırması — MCP araçlarımızın AI ajanlarına graf yapısını nasıl sunduğunu bilgilendirir.
-
📄
LLM Güçlü Bilgi Graph Construction: A Survey arXiv, 2025 LLM destekli KG oluşturmanın kapsamlı araştırması — otomatik tasarım grafik çıkarımımızın arkasındaki metodoloji.
Geliştiriciler ve AI Ajanları İçin
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Metin, şekil ve içe aktarılan SVG öğeleri oluşturun ve düzenleyin
- • Animasyonlar (9 ön ayar) ve efektler (parıltı, patlama) uygulayın
- • Zaman çizelgesi kontrolüyle anahtar kare tabanlı animasyonlar oluşturun
- • API üzerinden MP4, GIF, SVG veya PNG olarak dışa aktarın
- • Bildirimsel ilişkileri kullanın (orbits, follows, attached_to)
- • İskelet animasyonu ve poz anahtar kareleri ile karakter iskeleti oluşturun v0.4
- • Yerel zaman çizelgeleri olan iç içe kompozisyonlar (precomp'lar) oluşturun v0.4
- • Otomatik iş akışları ve toplu işleme sistemleri oluşturun
Örnek API Kullanımı:
// 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 });
Vizyonumuz
İlk gerçek anlamda yapay zeka doğal hareketli grafik platformunu oluşturuyoruz. Diğer araçlar yapay zekayı sonradan eklerken, PinePaper ilk günden hem insanlar hem de makineler tarafından kontrol edilmek üzere tasarlandı.
Amacımız hareketli grafikleri metin yazmak kadar kolay hale getirmektir. İster el ile içerik oluşturan bir tasarımcı olun, ister doğal dil aracılığıyla kullanıcıya yardım eden bir AI asistanı — PinePaper saniyeler içinde profesyonel animasyonlu grafikler oluşturmak için gereken araçları sunar.
✨ Sırada Ne Var?
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.
Topluluk ve Açık Geliştirme
PinePaper Studio, topluluğumuzla şeffaf bir şekilde geliştirilmektedir. Geri bildirimleri, özellik isteklerini ve hata raporlarını memnuniyetle karşılıyoruz. Geliştirmemiz, gerçek kullanıcı ihtiyaçları ve yapay zeka destekli yaratıcılığın gelişen ortamı tarafından yönlendirilmektedir.
Ücretsiz ve Açık
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.