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.

v0.4
🦴

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.

v0.4
🎭

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.

v0.4
✂️

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.

v0.4
🔗

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).

v0.4
🌐

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.

v0.4
🖌️

Ç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.

v0.4
🧊

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.

v0.5
🎛

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.

v0.5

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.

v0.5
📐

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

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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

Nabız Döndürme Zıplama Solma Sallanma Salınım Sarsma Jöle Daktilo Özel Yollar Anahtar Kare Animasyonu ✨ Yol Kırpma Uzamsal Hareket Yolları Yol Dönüşümü 13 Deform Presets 100+ Animation Presets

Efekt Sistemi

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.

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.

Skill docs →

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:

"HELLO yazan kırmızı titreşen metin oluştur" "Dünya'yı Güneş'in etrafında döndür"

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:

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.

59
Desteklenen Dil
25+
İlişki Türleri
111+
API Methods
7
Dışa Aktarma Formatı

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.