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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
Efeitos e Composição
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.
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:
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:
-
📄
Método de projeto Gráfico de conhecimento conduzido por dados heterogêneos de várias fontes Ciências Aplicadas, 2025 Demonstra como grafos de conhecimento podem capturar relações entre métodos de design de fontes heterogéneas — a base do nosso sistema de relações semânticas.
-
📄
Usando modelos de linguagem grandes para resolver desafios fundamentais na aprendizagem de gráficos arXiv, 2025 Revisão de abordagens LLM para problemas de aprendizagem em grafos — informa como as nossas ferramentas MCP expõem a estrutura do grafo aos agentes de IA.
-
📄
Construção de gráficos de conhecimento movidos por LLM: uma pesquisa arXiv, 2025 Revisão abrangente da construção de KG impulsionada por LLM — a metodologia por trás da nossa extração automatizada de grafos de design.
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.
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.