PinePaper Studio 소개

모션 그래픽의 미래를 구축: 브라우저 기반, AI 네이티브, 모두에게 접근 가능.

우리의 미션

PinePaper Studio는 모션 그래픽 디자인을 민주화하고 있습니다. 강력한 크리에이티브 도구는 비싼 소프트웨어 라이선스, 고성능 컴퓨터, 또는 수년간의 훈련을 필요로 해서는 안 된다고 믿습니다. 최신 웹 기술과 AI 우선 디자인을 결합하여 전 세계 크리에이터에게 애니메이션 텍스트와 그래픽을 접근 가능하게 만들고 있습니다.

우리만의 차별점

🤖

AI 네이티브 디자인

AI 어시스턴트와 원활하게 작동하도록 처음부터 구축. 포괄적인 API를 통해 AI 에이전트가 자연어 명령으로 그래픽을 생성, 애니메이션, 내보내기할 수 있습니다.

🎬

MP4 & GIF 내보내기

Instagram, TikTok, LinkedIn용 MP4 비디오(WebCodecs를 통한 H.264)로 내보내기. Twitter, Discord, 메시징 앱용 GIF 생성. 애니메이션 SVG와 PNG도 지원.

⏱️

타임라인 & 키프레임

키프레임 기반 애니메이션을 갖춘 전문 타임라인 편집기. 5가지 이징 함수와 색상 보간으로 정밀한 타이밍 제어의 안무 시퀀스 생성.

🌍

기본적으로 글로벌

중국어, 아랍어, 힌디어, 벵골어, 이모지를 포함한 52개 언어와 모든 쓰기 시스템 지원. 전 세계 모든 대상을 위한 콘텐츠를 만드세요.

🚀

브라우저 기반의 자유

설치 불필요. 최신 브라우저가 있는 모든 기기에서 작동. 로컬에서 처리되어 프라이버시 보장, 서버 왕복 없이 즉각적인 결과.

📋

템플릿 라이브러리

미리 디자인된 템플릿으로 창의성을 빠르게 시작. 아름다운 배경, 애니메이션 텍스트, 커스터마이즈 가능한 전문 레이아웃. 자신의 작품을 재사용 가능한 템플릿으로 저장.

🎨

이중 인터페이스

인간 디자이너를 위한 직관적 UI와 AI 에이전트 및 개발자를 위한 강력한 API. 두 가지 인터페이스, 하나의 미션: 창의성 향상.

🖨️

인쇄 대응 디자인

A3, A4, A5, Letter, Legal, Tabloid 프리셋으로 300 DPI의 전문 인쇄물 제작. 블리드와 재단선이 있는 PDF로 내보내기, 또는 상업 인쇄용 고 DPI PNG(최대 600 DPI)로 내보내기.

v0.4의
🦴

캐릭터 리깅

본, FK 전파, FABRIK IK 솔버를 이용한 스켈레탈 애니메이션. 포즈 저장 및 보간, 프리셋 리그(인간형, 사족보행, 거미) 사용, 타임라인 키프레임으로 애니메이션 구동.

v0.4의
🎭

블렌딩 & 합성

항목별 및 그룹별 블렌드 모드와 7가지 프리셋(고스트, 네온, 그림자, 글로우, X-ray, 몽환적, 빈티지). 애니메이션 전환, 인터랙티브 호버/클릭 모드, 근접 기반 블렌드 반응.

v0.4의
✂️

트림 경로 & 마스킹

트림 경로로 '선 그리기' 효과의 스트로크 그리기 애니메이션. 클립/제외/교차 모드, 마스크 스태킹, 애니메이션 리빌(14개 프리셋), 버텍스 애니메이션의 고급 마스킹.

v0.4의
🔗

절차적 관계

새로운 관계 유형: driven_by(속성 링크), wiggle(절차적 노이즈), time_expression(t를 사용한 수학 표현식). 독립적인 로컬 타임라인을 가진 중첩 컴포지션(프리컴프) 추가.

v0.4의
🌐

무한 캔버스

경계 없이 어디에서 끌기. 언바운드 캔버스 모드는 모든 크기 제한을 제거 — 팬과 줌은 무한한 작업 공간에서 자유롭게.

v0.4의
🖌️

그림 공구

6 직업적인 그림 공구: 펜, 잉크 솔, 감적, 살포 깡통, 지우개 및 충분한 물통. 사용자 정의 커서 및 최적화 된 스트로크 알고리즘을 각각.

v0.4의
🧊

Perspective 렌더링

Project primitives (cube, sphere, 실린더, 토러스, 콘)는 캔버스에 5 개의 투사 유형. GPU 가속 렌더링 (WebGPU / WebGL2), 궤도 카메라 및 선택 가능 및 드래그 가능한 관점 개체.

v0.5
🎛

GPU 이미지 필터

WebGPU에 의해 구동되는 실시간 이미지 처리는 WebGL2 fallback를 가진 셰이퍼를 따릅니다. HSL 조정, 광도, 대조, 포스터, 가장자리 탐지, 색깔 주석, vignette, blur 및 단 하나 GPU 통행에 있는 사슬을 두는 여과기.

v0.5

이미지 세그먼트

Freehand lasso 도구는 전체 네이티브 해상도에서 이미지 영역을 선택하고 추출합니다. 8개의 커트아웃 작풍 presets (papercut, postcard, 스티커, 포스터, 단청, 스케치, 온난한, 차가운)는 그림자 효력을 가진 GPU 여과기를 결합합니다.

v0.5
📐

수학 및 과학 엔진

Math.js — ODE 해결사 (RK4/RK45), FFT 스펙트럼 분석, 기능 플로팅, 기하학적 곡선, 동적 시스템 시뮬레이션 및 관점의 기하학적 표면에 의해 구동 수치 컴퓨팅. 현실 math, animated 에 화포.

규정 준수 및 신뢰

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

모델 번호: WCAG

스크린 리더 캔버스 네비게이션을위한 접근성 그림자 나무. 키보드 항법, 살아있는 지역 발표, 건너뛰기 연결, 대조 감사 및 동의 감도 체크. PP를 사용하십시오: semantic 품목 묘사를 위한 PinePaper 투과.

🔒

보안 헤더

HSTS 프리로드, CSP, X-Frame-Options, Permissions-Policy. 카메라, 마이크, 위치, 결제 API 접근 없음.

👁

설계에 의한 프라이버시

100% 클라이언트 측 처리. 서버 업로드 없음, 쿠키 없음, 데이터 수집 없음. 모든 디자인은 브라우저에 남습니다.

기술 & 기능

핵심 기술

  • Paper.js: 벡터 그래픽 조작 및 렌더링
  • HTML5 화포: 실시간 애니메이션 및 내보내기
  • 바닐라 JavaScript: 경량, 빠름, 의존성 없음
  • 타임라인 엔진: 이징 함수를 사용한 키프레임 보간
  • 리깅 엔진: FK/IK 솔버와 포즈 보간을 사용한 스켈레탈 애니메이션 v0.4의
  • 디자인 지식 그래프: 25개 이상의 관계 유형, 35개 이상의 수학 함수, 유형 계층을 갖춘 시맨틱 온톨로지 v0.4의
  • Rust/WASM 런타임: 위젯 계산을 위한 선택적 WebAssembly 가속 — 관계 처리 10-100배 빠름, GC 일시정지 없음. v0.5
  • pp:PinePaper 온톨로지: 55개 토큰 시맨틱 어휘(항목, 관계, 애니메이션, 마스크, 생성기) — PinePaper 애니메이션의 언어. v0.5
  • 문장: 오류 추적 및 성능 모니터링

내보내기 형식

  • WebM 비디오: VP9 코덱 - 애니메이션에 최고 품질
  • MP4 비디오: WebCodecs API를 통한 H.264 - 소셜 미디어에 적합
  • GIF 애니메이션: gif.js Web Workers를 통해 - 메시징에 적합
  • 인쇄용 PDF: 300 DPI, 블리드(3-5mm) 및 재단선 - 전문 인쇄용
  • 고 DPI PNG: 최대 600 DPI - 상업 인쇄 품질
  • 애니메이션 SVG: SMIL을 사용한 네이티브 SVG 애니메이션
  • 인터랙티브 위젯: 씬별 코드가 포함된 자체 완결형 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:

공식 Claude Skill을 가진 쌍 MCP

Skill은 PinePaper에 도달 할 때 Claude를 가르치고 올바르게 구동하는 방법. PDFG2X/CSS를 생성하는 대신 PinePaper를 통해 한 번 설치하고 일반 영어에 묻습니다.

Skill docs →

빠른 설정

1. 전역 설치:

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

2. Claude Desktop 설정에 추가:

맥 OS: ~/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 + 유형 : 궤도, 다음과, 마법사, 등)
  • • Keyframe & 프리셋 애니메이션
  • • 특성 삭구 (skeletons, 뼈, IK/FK)
  • • 혼합 프리셋 및 전환
  • • 다이어그램, 맵, 폰트 생성
  • • 유전 적 배경 (14 발전기)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • 수출 SVG의 훈련 자료

지원 AI 플랫폼

  • • Claude 데스크탑
  • • 모든 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 에이전트가 복잡한 애니메이션과 구조적 관계를 추론할 수 있게 하여, 시맨틱 일관성을 유지하는 정교한 모션 그래픽 생성을 가능하게 합니다.

인용 연구

디자인 지식 그래프 아키텍처는 다음 동료 심사 논문의 아이디어를 기반으로 합니다:

개발자 & AI 에이전트용

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

  • 텍스트, 도형, 가져온 SVG 요소 생성 및 조작
  • 애니메이션(9개 프리셋) 및 효과(스파클, 블래스트) 적용
  • 타임라인 제어를 통한 키프레임 기반 애니메이션 생성
  • API를 통해 MP4, GIF, SVG 또는 PNG로 내보내기
  • 선언적 관계(orbits, follows, attached_to) 사용
  • 스켈레탈 애니메이션과 포즈 키프레임으로 캐릭터 리깅 v0.4의
  • 로컬 타임라인을 가진 중첩 컴포지션(프리컴프) 생성 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 });

우리의 비전

우리는 진정한 AI 네이티브 모션 그래픽 플랫폼을 최초로 구축하고 있습니다. 다른 도구들이 AI를 나중에 추가하는 반면, PinePaper는 처음부터 인간과 기계 모두가 제어할 수 있도록 설계되었습니다.

우리의 목표는 모션 그래픽을 텍스트 작성만큼 쉽게 만드는 것입니다. 수동으로 콘텐츠를 만드는 디자이너든, 자연어로 사용자를 돕는 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.