เกี่ยวกับ PinePaper Studio

สร้างอนาคตของ Motion Graphics: ใช้งานผ่านเบราว์เซอร์, ออกแบบมาสำหรับ AI, และเข้าถึงได้สำหรับทุกคน

ภารกิจของเรา

PinePaper Studio กำลังทำให้การออกแบบ motion graphics เป็นประชาธิปไตย เราเชื่อว่าเครื่องมือสร้างสรรค์ที่ทรงพลังไม่ควรต้องใช้ลิขสิทธิ์ซอฟต์แวร์ราคาแพง คอมพิวเตอร์ที่ทรงพลัง หรือการฝึกอบรมหลายปี ด้วยการรวมเทคโนโลยีเว็บสมัยใหม่กับการออกแบบที่เน้น AI เราทำให้ข้อความแอนิเมชันและกราฟิกเข้าถึงได้สำหรับผู้สร้างทั่วโลก

สิ่งที่ทำให้เราแตกต่าง

🤖

การออกแบบที่เกิดมาสำหรับ AI

สร้างตั้งแต่ต้นเพื่อทำงานอย่างราบรื่นกับผู้ช่วย AI API ที่ครอบคลุมของเราช่วยให้ AI agents สร้าง เคลื่อนไหว และส่งออกกราฟิกผ่านคำสั่งภาษาธรรมชาติ

🎬

ส่งออก MP4 และ GIF

ส่งออกเป็นวิดีโอ MP4 (H.264 ผ่าน WebCodecs) สำหรับ Instagram, TikTok และ LinkedIn สร้าง GIF สำหรับ Twitter, Discord และแอปส่งข้อความ รวมถึง SVG แอนิเมชันและ PNG

⏱️

ไทม์ไลน์และคีย์เฟรม

โปรแกรมแก้ไขไทม์ไลน์มืออาชีพพร้อมแอนิเมชันคีย์เฟรม สร้างลำดับที่จัดท่าทางพร้อมการควบคุมเวลาที่แม่นยำ ฟังก์ชัน easing 5 ตัว และการประมาณค่าสี

🌍

โกลบอลโดยค่าเริ่มต้น

รองรับ 52 ภาษาและระบบการเขียนทั้งหมดรวมถึงจีน อาหรับ ฮินดี เบงกาลี และอีโมจิ สร้างเนื้อหาสำหรับผู้ชมทุกคน ทุกที่ในโลก

🚀

อิสระบนเบราว์เซอร์

ไม่ต้องติดตั้ง ทำงานบนอุปกรณ์ใดก็ได้ที่มีเบราว์เซอร์สมัยใหม่ ผลงานของคุณประมวลผลในเครื่อง รับประกันความเป็นส่วนตัวและผลลัพธ์ทันทีโดยไม่ต้องเชื่อมต่อเซิร์ฟเวอร์

📋

ไลบรารีเทมเพลต

เริ่มต้นความคิดสร้างสรรค์ด้วยเทมเพลตที่ออกแบบไว้แล้ว พื้นหลังสวยงาม ข้อความแอนิเมชัน และเลย์เอาต์มืออาชีพพร้อมให้ปรับแต่ง บันทึกผลงานของคุณเป็นเทมเพลตที่นำกลับมาใช้ได้

🎨

อินเทอร์เฟซคู่

UI ที่ใช้งานง่ายสำหรับนักออกแบบมนุษย์และ API ที่ทรงพลังสำหรับ AI agents และนักพัฒนา สองอินเทอร์เฟซ หนึ่งภารกิจ: เสริมพลังความคิดสร้างสรรค์

🖨️

การออกแบบพร้อมพิมพ์

สร้างสื่อสิ่งพิมพ์มืออาชีพด้วยพรีเซ็ต A3, A4, A5, Letter, Legal และ Tabloid ที่ 300 DPI ส่งออกเป็น PDF พร้อมพื้นที่เลือดและเครื่องหมายตัด หรือ PNG ความละเอียดสูง (สูงสุด 600 DPI) สำหรับการพิมพ์เชิงพาณิชย์

v0. 4
🦴

การริกตัวละคร

แอนิเมชันโครงกระดูกพร้อมกระดูก, การกระจาย FK และตัวแก้ FABRIK IK บันทึกและประมาณค่าท่าทาง ใช้ริกพรีเซ็ต (มนุษย์, สี่ขา, แมงมุม) และขับเคลื่อนแอนิเมชันผ่านคีย์เฟรมไทม์ไลน์

v0. 4
🎭

การผสมและการจัดองค์ประกอบ

โหมดผสมต่อรายการและต่อกลุ่มพร้อม 7 พรีเซ็ต (ผี, นีออน, เงา, เรืองแสง, เอ็กซ์เรย์, ฝัน, วินเทจ) การเปลี่ยนผ่านแบบแอนิเมชัน โหมดโต้ตอบเมื่อชี้/คลิก และปฏิกิริยาการผสมตามความใกล้

v0. 4
✂️

ตัดเส้นทางและมาสก์

เคลื่อนไหวการวาดเส้นด้วยตัดเส้นทางสำหรับเอฟเฟกต์ "วาดเส้น" มาสก์ขั้นสูงพร้อมโหมดตัด/ลบ/ตัดกัน การซ้อนมาสก์ การเปิดเผยแบบแอนิเมชัน (14 พรีเซ็ต) และแอนิเมชันจุดยอด

v0. 4
🔗

ความสัมพันธ์เชิงขั้นตอน

ประเภทความสัมพันธ์ใหม่: driven_by (เชื่อมโยงคุณสมบัติ), wiggle (สัญญาณรบกวนเชิงขั้นตอน) และ time_expression (นิพจน์คณิตศาสตร์กับ t) รวมถึงการจัดองค์ประกอบซ้อน (precomps) พร้อมไทม์ไลน์ในตัวที่เป็นอิสระ

v0. 4
🌐

แคน วาส

วาดตรงไหนก็ได้ที่ไม่มีขอบเขต วิธี ทํา ผ้า ลินิน ที่ ไม่ มี ขีด จํากัด.

v0. 4
🖌️

เครื่องมือวาดภาพ

6 เครื่องมือวาดแบบมืออาชีพ: ปากกา, แปรงหมึก, เครื่องหมาย, หมึก, ยางลบ, และเติมถัง แต่ละคนมีเคอร์เซอร์ที่กําหนดเอง และอัลกอริทึมของเส้นเลือดในสมอง.

v0. 4
🧊

นําเสนอภาพ

โปรเจกต์แบบโบราณ (Cubbe, ทรงกลม, กระบอก, Torus, กรวย) ลงบนผ้าใบด้วยรูปแบบการฉาย 5 ชนิด ส่วนแสดงผลแบบ GPU แบบเร่งความเร็ว (PPU/WebGL2), กล้องออร์บิทัล, และเครื่องมือมุมมองแบบลากได้.

v0.5
🎛

ตัวกรองรูปภาพแบบ GPU

การประมวลผลภาพแบบเรียลไทม์โดยเครื่อง WebGPU คํานวณไดเร็คเซอร์ด้วย WebGL2 ย้อนกลับ HSL ปรับปรุง, ความคมชัด, ความเหลื่อมล้ํา, การตรวจจับขอบ, สี, วีเน็ตต์, เบลอ, และการกรองในผ่าน GPU ครั้งเดียว.

v0.5

การแยกภาพ

เครื่องมือฟรี แลสโซ ในการเลือกและแยกขอบเขตภาพ ในความละเอียดภาษา ชุดสไตล์ตัดออก 8 ชุด (ตัดกระดาษ, โปสการ์ด, สติ๊กเกอร์, โปสเตอร์, ซิงเกิล, ภาพร่าง, อบอุ่น, เย็น) รวมตัวกรอง GPU เข้ากับลูกเล่นเงา.

v0.5
📐

กลไกคณิตศาสตร์และวิทยาศาสตร์

การคํานวณตัวเลขขับเคลื่อนโดยคณิตศาสตร์ js — ODE Culors (RK4/RK45), การวิเคราะห์สเปกตรัม (RK4/RK45) ฟังก์ชันวางแผน, คณิตศาสตร์ที่แท้จริง ภาพเคลื่อนไหวบนผ้าใบ.

การปฏิบัติตามและความไว้วางใจ

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2. 1 AA

ความง่ายของต้นไม้เงาสําหรับอ่านหน้าจอ การ นํา ทาง คีย์บอร์ด, การ ประกาศ เขต ที่ มี ชีวิต, การ ข้าม ลิงก์, การ ตรวจ สอบ ความ แตก ต่าง, และ การ ตรวจ สอบ ความ ไว ใน การ เคลื่อน ไหว. ใช้ MON: PinePaper ontology for secmantic files.

🔒

ส่วนหัวความปลอดภัย

HSTS พร้อมพรีโหลด, CSP, X-Frame-Options, Permissions-Policy ไม่มีการเข้าถึงกล้อง ไมโครโฟน ตำแหน่ง หรือการชำระเงิน

👁

ความเป็นส่วนตัวจากการออกแบบ

ประมวลผลฝั่งไคลเอนต์ 100% ไม่มีการอัปโหลดเซิร์ฟเวอร์ ไม่มีคุกกี้ ไม่มีการเก็บข้อมูล

เทคโนโลยีและความสามารถ

เทคโนโลยีหลัก

  • Paper.js: การจัดการและเรนเดอร์กราฟิกเวกเตอร์
  • พิมพ์แบบ HTML5 Canvas: แอนิเมชันเรียลไทม์และการส่งออก
  • วานิลา จาวาสคริปต์: น้ำหนักเบา, เร็ว, ไม่มีการพึ่งพา
  • กลไกเส้นเวลา: การประมาณค่าคีย์เฟรมพร้อมฟังก์ชัน easing
  • กลไกการสั่น: แอนิเมชันโครงกระดูกพร้อมตัวแก้ FK/IK และการประมาณค่าท่าทาง v0. 4
  • ออกแบบกราฟความรู้: ออนโทโลยีเชิงความหมายพร้อมความสัมพันธ์ 25+ ประเภท, ฟังก์ชันคณิตศาสตร์ 35+ ตัว, และลำดับชั้นประเภท v0. 4
  • Rust/WASM รันไทม์: การเร่งความเร็ว WebAssembly เสริม — ประมวลผลความสัมพันธ์เร็วขึ้น 10-100 เท่า ไม่มี GC pause ใช้ JS เป็นทางเลือก v0.5
  • ออนโทโลยี pp:PinePaper: คำศัพท์เชิงความหมาย 55 โทเค็น (รายการ, ความสัมพันธ์, แอนิเมชัน, มาส์ก, ตัวสร้าง) — ภาษาของแอนิเมชัน PinePaper v0.5
  • SATE: การติดตามข้อผิดพลาดและการตรวจสอบประสิทธิภาพ

รูปแบบการส่งออก

  • WebM วิดีโอ: ตัวแปลงสัญญาณ VP9 - คุณภาพดีที่สุดสำหรับแอนิเมชัน
  • MP4 วิดีโอ: H.264 ผ่าน WebCodecs API - เหมาะสำหรับโซเชียลมีเดีย
  • การเคลื่อนไหวของ GIF: ผ่าน gif.js Web Workers - เหมาะสำหรับแอปส่งข้อความ
  • PDF สําหรับการพิมพ์: 300 DPI พร้อมพื้นที่เลือด (3-5mm) และเครื่องหมายตัด - สำหรับการพิมพ์มืออาชีพ
  • High-PG1X PNG: สูงสุด 600 DPI สำหรับคุณภาพการพิมพ์เชิงพาณิชย์
  • การเคลื่อนไหวของ SVG: แอนิเมชัน SVG ดั้งเดิมด้วย SMIL
  • วิดเจ็ตแบบโต้ตอบ: HTML แบบพึ่งพาตัวเองพร้อมโค้ดเฉพาะฉาก (~8-20KB) เร่งความเร็วด้วย WASM ฝังได้ทุกที่ v0.5
  • Lottie JSON: รูปแบบแอนิเมชันมาตรฐานอุตสาหกรรม แปลงแอนิเมชันขั้นตอนเป็นคีย์เฟรมดั้งเดิมอัตโนมัติ v0.4

ประเภทแอนิเมชัน

เต้น หมุน เด้ง จางหาย โยกเยก แกว่ง สั่น เยลลี่ พิมพ์ดีด เส้นทางกำหนดเอง แอนิเมชันคีย์เฟรม ✨ ตัดเส้นทาง เส้นทางการเคลื่อนที่เชิงพื้นที่ การแปรรูปเส้นทาง 13 Deform Presets 100+ Animation Presets

ระบบเอฟเฟกต์

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

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 ด้วยทักษะ Claude อย่างเป็นทางการ

ความ สามารถ นี้ สอน คลา วด์ เมื่อ ไป ถึง PinePaper และ วิธี ขับ รถ อย่าง ถูก ต้อง. ติดตั้งและถามในภาษาอังกฤษธรรมดา -- "แสดงโลโก้นี้", "สร้างตราการดํารงอยู่" — และ Caude เส้นทางผ่าน PinePaper แทนการสร้าง HTML/CSS.

Skill docs →

การตั้งค่าด่วน

1. ติดตั้งทั่วโลก:

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

2. เพิ่มในการตั้งค่า Claude Desktop:

มากอส: ~/Library/Application Support/Claude/claude_desktop_config.json
หน้าต่าง: %APPDATA%\Claude\claude_desktop_config.json

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

3. ลองใช้ใน Claude Desktop:

"สร้างข้อความเต้นสีแดงที่เขียนว่า HELLO" "ให้โลกโคจรรอบดวงอาทิตย์"

เครื่องมือที่มี

  • • สร้างข้อความ, รูปทรง, กราฟิก
  • • เพิ่มความสัมพันธ์ (25+ ประเภท: orbits, follows, wiggle ฯลฯ)
  • • แอนิเมชันคีย์เฟรมและพรีเซ็ต
  • • การริกตัวละคร (โครงกระดูก, กระดูก, IK/FK)
  • • พรีเซ็ตการผสมและการเปลี่ยนผ่าน
  • • ไดอะแกรม, แผนที่, การสร้างแบบอักษร
  • • สร้างพื้นหลังเชิงขั้นตอน (ตัวสร้าง 14 ตัว)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • ส่งออก SVG, ข้อมูลฝึกสอน

แพลตฟอร์ม AI ที่รองรับ

  • • พื้น ที่ ทํา งาน
  • • ไคลเอนต์ที่รองรับ MCP ใดๆ
  • • การผสานรวมแบบกำหนดเองผ่าน API

กราฟความรู้การออกแบบ

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.

แนวทางใหม่นี้ช่วยให้ AI agents สามารถให้เหตุผลเกี่ยวกับแอนิเมชันที่ซับซ้อนและความสัมพันธ์เชิงโครงสร้าง ทำให้สามารถสร้าง motion graphics ที่ซับซ้อนซึ่งรักษาความสอดคล้องเชิงความหมาย

งานวิจัยอ้างอิง

สถาปัตยกรรมกราฟความรู้การออกแบบได้รับแรงบันดาลใจจากงานวิจัยที่ผ่านการพิจารณาเหล่านี้:

สำหรับนักพัฒนาและ AI Agents

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

  • สร้างและจัดการข้อความ, รูปทรง, และองค์ประกอบ SVG ที่นำเข้า
  • ใช้แอนิเมชัน (9 พรีเซ็ต) และเอฟเฟกต์ (ประกาย, ระเบิด)
  • สร้างแอนิเมชันคีย์เฟรมพร้อมการควบคุมไทม์ไลน์
  • ส่งออกเป็น MP4, GIF, SVG หรือ PNG ผ่าน API
  • ใช้ความสัมพันธ์แบบประกาศ (orbits, follows, attached_to)
  • ริกตัวละครด้วยแอนิเมชันโครงกระดูกและคีย์เฟรมท่าทาง v0. 4
  • สร้างการจัดองค์ประกอบซ้อน (precomps) พร้อมไทม์ไลน์ในตัว v0. 4
  • สร้างเวิร์กโฟลว์อัตโนมัติและระบบประมวลผลแบบกลุ่ม

ตัวอย่างการใช้ 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 });

วิสัยทัศน์ของเรา

เรากำลังสร้างแพลตฟอร์ม motion graphics ที่ออกแบบมาสำหรับ AI อย่างแท้จริงเป็นครั้งแรก ขณะที่เครื่องมืออื่นเพิ่ม AI เข้าไปภายหลัง PinePaper ได้รับการออกแบบตั้งแต่วันแรกให้ควบคุมได้ทั้งโดยมนุษย์และเครื่องจักร

เป้าหมายของเราคือทำให้ motion graphics ง่ายเหมือนการเขียนข้อความ ไม่ว่าคุณจะเป็นนักออกแบบที่สร้างเนื้อหาด้วยมือ หรือผู้ช่วย AI ที่ช่วยผู้ใช้ผ่านภาษาธรรมชาติ PinePaper ให้เครื่องมือสร้างกราฟิกแอนิเมชันมืออาชีพในไม่กี่วินาที

อะไรต่อไป?

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.

ชุมชนและการพัฒนาแบบเปิด

PinePaper Studio พัฒนาอย่างโปร่งใสร่วมกับชุมชนของเรา เรายินดีรับความคิดเห็น คำขอฟีเจอร์ และรายงานบัก การพัฒนาของเราได้รับการชี้นำจากความต้องการจริงของผู้ใช้และภูมิทัศน์ที่เปลี่ยนแปลงของความคิดสร้างสรรค์ที่ AI ช่วยเหลือ

ฟรีและเปิดกว้าง

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
ภาษาที่รองรับ
25+
ประเภทความสัมพันธ์
111+
API Methods
7
รูปแบบการส่งออก

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.