Sobre o PinePaper Studio

Construindo o futuro do motion graphics: baseado em navegador, nativo de IA e acessível a todos.

Nossa Missão

O PinePaper Studio está democratizando o design de motion graphics. Acreditamos que ferramentas criativas poderosas não deveriam exigir licenças de software caras, computadores potentes ou anos de formação. Ao combinar tecnologias web modernas com design nativo de IA, estamos tornando texto animado e gráficos acessíveis a criadores de todo o mundo.

O que nos diferencia

🤖

Design Nativo de IA

Construído desde o início para funcionar perfeitamente com assistentes de IA. Nossa API abrangente permite que agentes de IA criem, animem e exportem gráficos através de comandos em linguagem natural.

🎬

Exportação MP4 e GIF

Exporte para vídeo MP4 (H.264 via WebCodecs) para Instagram, TikTok e LinkedIn. Crie GIFs para Twitter, Discord e apps de mensagens. Além de WebM (VP9), SVG animado e PNG.

⏱️

Timeline e Keyframes

Editor de timeline profissional com animações baseadas em keyframes. Crie sequências coreografadas com 9+ funções de easing (incluindo bezier cúbico personalizado), easing por propriedade, caminhos de movimento espacial, interpolação de cor/gradiente e morphing de caminhos.

🌍

Global por padrão

Suporte para 52 idiomas e todos os sistemas de escrita, incluindo chinês, árabe, hindi, bengali e emoji. Crie conteúdo para qualquer público, em qualquer lugar do mundo.

🚀

Liberdade do navegador

Nenhuma instalação necessária. Funciona em qualquer dispositivo com um navegador moderno. Suas criações são processadas localmente, garantindo privacidade e resultados instantâneos sem viagens de ida e volta ao servidor.

📋

Biblioteca de modelos

Impulsione sua criatividade com modelos pré-desenhados. Fundos bonitos, texto animado e layouts profissionais prontos para personalizar. Salve suas próprias criações como modelos reutilizáveis.

🎨

Interface dupla

Interface intuitiva para designers humanos e uma API poderosa para agentes de IA e desenvolvedores. Duas interfaces, uma missão: empoderar a criatividade.

🖨️

Pronto para impressão

Crie materiais de impressão profissionais com predefinições A3, A4, A5, Carta, Legal e Tablóide a 300 DPI. Exporte para PDF com sangria e marcas de corte, ou PNG de alta resolução (até 600 DPI) para impressão comercial.

v0. 4
🦴

Rigging de Personagens

Animação esquelética com ossos, propagação FK e solver IK FABRIK. Salve e interpole poses, use rigs predefinidos (humanoide, quadrúpede, aranha) e controle a animação via keyframes da timeline.

v0. 4
🎭

Mesclagem e Composição

Modos de mesclagem por item e por grupo com 7 predefinições (fantasma, neon, sombra, brilho, raio-x, onírico, vintage). Transições animadas, modos interativos ao passar/clicar e reações de mesclagem por proximidade.

v0. 4
✂️

Caminhos de Corte e Máscaras

Anime o traçado com caminhos de corte para efeitos de "desenho de linha". Máscaras avançadas com modos de recorte/subtração/interseção, empilhamento de máscaras, revelações animadas (14 predefinições) e animação de vértices.

v0. 4
🔗

Relações Procedurais

Novos tipos de relações: driven_by (ligação de propriedades), wiggle (ruído procedural) e time_expression (expressões matemáticas com t). Além de composições aninhadas (precomps) com timelines locais independentes.

v0. 4
🌐

Tela Infinita

Desenhar em qualquer lugar sem limites. O modo de lona não ligado remove todas as restrições de tamanho — pan e zoom livremente em um espaço de trabalho infinito.

v0. 4
🖌️

Ferramentas de desenho

6 ferramentas de desenho profissional: caneta, pincel de tinta, marcador, spray lata, borracha, e encher balde. Cada um com cursores personalizados e algoritmos de cursor otimizados.

v0. 4
🧊

Renderização da Perspectiva

Projete primitivos (cubo, esfera, cilindro, toro, cone) na tela com 5 tipos de projeção. renderização acelerada por GPU (WebGPU/WebGL2), câmera orbital, e objetos de perspectiva selecionáveis e arrastáveis.

v0.5
🎛

Filtros de Imagem GPU

Processamento de imagem em tempo real alimentado por shaders de computação WebGPU com backback WebGL2. Ajuste HSL, brilho, contraste, posterização, detecção de bordas, coloração, vinheta, borrão e encadeamento de filtro em um único passe GPU.

v0.5

Segmentação da Imagem

Ferramenta de lasso livre para selecionar e extrair regiões de imagem em resolução nativa completa. 8 predefinições de estilo de recorte (papel, cartão postal, adesivo, cartaz, mono, esboço, quente, fresco) combinar filtros GPU com efeitos de sombra.

v0.5
📐

Motor de Matemática e Ciência

Computação numérica alimentada por math.js — resolvedores ODE (RK4/RK45), análise de espectro FFT, plotagem de funções, curvas paramétricas, simulação dinâmica do sistema e superfícies paramétricas em perspectiva. Matemática verdadeira, animada sobre tela.

Conformidade e Confiança

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Árvore de sombra de acessibilidade para navegação de canvas com leitor de tela. Navegação por teclado, anúncios de regiões ao vivo, links de pulo, auditoria de contraste e verificações de sensibilidade ao movimento. Usa ontologia pp:PinePaper para descrições semânticas de itens.

🔒

Cabeçalhos de Segurança

HSTS com preload, Content Security Policy, X-Frame-Options, X-Content-Type-Options, Permissions-Policy. Sem acesso a câmera, microfone, geolocalização ou API de pagamento. Frame-ancestors restrito.

👁

Privacidade por Design

100% processamento no lado do cliente. Sem uploads para servidor, sem cookies, sem coleta de dados do usuário. Todos os designs ficam no seu navegador. Exporte localmente — nada sai do seu dispositivo a menos que você escolha compartilhar.

Tecnologia e Capacidades

Tecnologia base

  • Paper.js: Manipulação e renderização de gráficos vetoriais
  • Tela HTML5: Animação e exportação em tempo real
  • JavaScript puro: Leve, rápido, sem dependências
  • Motor de Timeline: Interpolação de keyframes com 9+ funções de easing e caminhos de movimento espacial
  • Motor de Rigging: Animação esquelética com solvers FK/IK e interpolação de poses v0. 4
  • Grafo de Conhecimento de Design: Ontologia semântica com mais de 25 tipos de relação, mais de 35 funções matemáticas e hierarquia de tipos v0. 4
  • Rust/WASM Runtime: Aceleração WebAssembly opcional para computação de widgets — processamento de relações 10-100x mais rápido, sem pausas de GC. Usa JS como fallback quando WASM não está disponível v0.5
  • pp:PinePaper Ontologia: Vocabulário semântico de 55 tokens (itens, relações, animações, máscaras, geradores) — a linguagem das animações PinePaper. Incorporado em cada widget exportado v0.5
  • Sentinela: Rastreamento de erros e monitoramento de desempenho

Formatos de exportação

  • Vídeo WebM: Codec VP9 - melhor qualidade para animações
  • Vídeo MP4: H.264 via WebCodecs API - ideal para redes sociais
  • Animação GIF: Via gif.js Web Workers - perfeito para mensagens
  • PDF para impressão: 300 DPI com sangria (3-5mm) e marcas de corte - impressão profissional
  • PNG de alta resolução: Até 600 DPI para qualidade de impressão comercial
  • SVG animado: Animações SVG nativas com SMIL
  • Widget Interativo: HTML autossuficiente com código tree-shaken específico da cena (~8-20KB). Acelerado por WASM quando disponível. Incorpore em qualquer lugar — sem CDN, sem API, sem dependências v0.5
  • Lottie JSON: Formato de animação padrão da indústria. Converte automaticamente animações procedurais em keyframes nativos para qualquer player Lottie v0.4

Tipos de animação

Pulsar Girar Saltar Desvanecer Oscilar Balançar Tremer Gelatina Máquina de escrever Caminhos personalizados Animação Keyframe ✨ Caminhos de corte Caminhos de movimento espacial Transformação de caminho 13 Deform Presets 100+ Animation Presets

Efeitos e Composição

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.

Servidor 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:

Emparelhe o MCP com o oficial Claude Skill

A habilidade ensina Claude quando alcançar PinePaper e como dirigi-lo corretamente. Instale uma vez e pergunte em inglês simples — "animar este logotipo", "fazer um emblema LIVE pulsante" — e Claude roteia através do PinePaper em vez de gerar HTML/CSS.

Skill docs →

Configuração rápida

1. Instalar globalmente:

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

2. Adicionar à config do Claude Desktop:

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

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

3. Experimente no Claude Desktop:

"Crie um texto vermelho pulsante que diga OLÁ" "Faça a Terra orbitar o Sol"

Ferramentas disponíveis

  • • Criar texto, formas, gráficos
  • • Adicionar relações (25+ tipos: orbits, follows, wiggle, etc.)
  • • Animações keyframe e predefinidas
  • • Rigging de personagens (esqueletos, ossos, IK/FK)
  • • Predefinições e transições de mesclagem
  • • Diagramas, mapas, criação de fontes
  • • Gerar fundos procedurais (14 geradores)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Exportar SVG, dados de treinamento

Plataformas de IA compatíveis

  • • Claude Desktop
  • • Qualquer cliente compatível com MCP
  • • Integrações personalizadas via API

Grafo de Conhecimento de Design

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.

Esta abordagem inovadora permite que agentes de IA raciocinem sobre animações complexas e relações estruturais, permitindo a geração de motion graphics sofisticados que mantêm a consistência semântica.

Pesquisa atribuída

A arquitetura do Grafo de Conhecimento de Design baseia-se em ideias destes artigos revisados por pares:

Para desenvolvedores e agentes de IA

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

  • Criar e manipular texto, formas e elementos SVG importados
  • Aplicar animações (9 predefinições de loop, keyframes, trim paths) e efeitos
  • Criar animações baseadas em keyframes com controle de timeline
  • Exportar para WebM, MP4, GIF, SVG, PDF ou PNG via API
  • Usar 25+ relações declarativas (orbits, follows, wiggle, driven_by, etc.)
  • Rigging de personagens com animação esquelética e keyframes de poses v0. 4
  • Criar composições aninhadas (precomps) com timelines locais v0. 4
  • Construir fluxos de trabalho automatizados e sistemas de processamento em lote

Exemplo de uso da 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 });

Nossa Visão

Estamos construindo a primeira plataforma de motion graphics verdadeiramente nativa de IA. Enquanto outras ferramentas adicionam IA como um acessório, o PinePaper foi projetado desde o primeiro dia para ser controlado por humanos e máquinas.

Nosso objetivo é tornar o motion graphics tão fácil quanto escrever texto. Seja você um designer criando conteúdo manualmente, ou um assistente de IA ajudando um usuário através de linguagem natural, o PinePaper fornece as ferramentas para criar gráficos animados profissionais em segundos.

O que vem a seguir?

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.

Comunidade e Desenvolvimento aberto

O PinePaper Studio é desenvolvido de forma transparente com a nossa comunidade. Acolhemos feedback, pedidos de funcionalidades e relatórios de bugs. O nosso desenvolvimento é guiado pelas necessidades reais dos usuários e pela evolução da criatividade assistida por IA.

Gratuito e Aberto

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
Idiomas suportados
25+
Tipos de relação
111+
API Methods
7
Formatos de exportação

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.