Acerca de PinePaper Studio
Construyendo el futuro del motion graphics: basado en navegador, nativo de IA y accesible para todos.
Nuestra Misión
PinePaper Studio está democratizando el diseño de motion graphics. Creemos que las herramientas creativas poderosas no deberían requerir licencias de software costosas, computadoras potentes o años de formación. Al combinar tecnologías web modernas con diseño nativo de IA, estamos haciendo que el texto animado y los gráficos sean accesibles para creadores de todo el mundo.
Lo que nos diferencia
Diseño Nativo de IA
Construido desde cero para trabajar perfectamente con asistentes de IA. Nuestra API integral permite a los agentes de IA crear, animar y exportar gráficos mediante comandos en lenguaje natural.
Exportación MP4 y GIF
Exporta a video MP4 (H.264 vía WebCodecs) para Instagram, TikTok y LinkedIn. Crea GIFs para Twitter, Discord y apps de mensajería. Además WebM (VP9), SVG animado y PNG.
Timeline y Keyframes
Editor de timeline profesional con animaciones basadas en keyframes. Crea secuencias coreografiadas con 9+ funciones de easing (incluyendo bezier cúbico personalizado), easing por propiedad, rutas de movimiento espacial, interpolación de color/degradado y morphing de rutas.
Global por defecto
Soporte para 52 idiomas y todos los sistemas de escritura, incluyendo chino, árabe, hindi, bengalí y emoji. Crea contenido para cualquier audiencia, en cualquier parte del mundo.
Libertad del navegador
Sin instalación requerida. Funciona en cualquier dispositivo con un navegador moderno. Tus creaciones se procesan localmente, garantizando privacidad y resultados instantáneos sin viajes al servidor.
Biblioteca de plantillas
Impulsa tu creatividad con plantillas prediseñadas. Fondos hermosos, texto animado y diseños profesionales listos para personalizar. Guarda tus propias creaciones como plantillas reutilizables.
Interfaz dual
Interfaz intuitiva para diseñadores humanos y una poderosa API para agentes de IA y desarrolladores. Dos interfaces, una misión: potenciar la creatividad.
Listo para imprimir
Crea materiales de impresión profesionales con preajustes A3, A4, A5, Carta, Legal y Tabloide a 300 DPI. Exporta a PDF con sangrado y marcas de corte, o PNG de alta resolución (hasta 600 DPI) para impresión comercial.
Rigging de personajes
Animación esquelética con huesos, propagación FK y solver IK FABRIK. Guarda e interpola poses, usa rigs predefinidos (humanoide, cuadrúpedo, araña) y controla la animación mediante keyframes de timeline.
Mezcla y composición
Modos de mezcla por elemento y por grupo con 7 preajustes (fantasma, neón, sombra, brillo, rayos X, onírico, vintage). Transiciones animadas, modos interactivos hover/clic y reacciones de mezcla basadas en proximidad.
Rutas de recorte y enmascaramiento
Anima el trazo del dibujo con rutas de recorte para efectos de "dibujo de línea". Enmascaramiento avanzado con modos recortar/restar/intersecar, apilamiento de máscaras, revelados animados (14 preajustes) y animación de vértices.
Relaciones procedurales
Nuevos tipos de relación: driven_by (enlace de propiedades), wiggle (ruido procedural) y time_expression (expresiones matemáticas con t). Además, composiciones anidadas (precomps) con timelines locales independientes.
Canvas infinitas
Dibuja cualquier lugar sin límites. El modo de lona sin límites elimina todas las restricciones de tamaño: pan y zoom libremente a través de un espacio de trabajo infinito.
Herramientas de dibujo
6 herramientas de dibujo profesionales: bolígrafo, pincel de tinta, marcador, spray, borrador y cubo de relleno. Cada uno con cursores personalizados y algoritmos de trazo optimizados.
Perspective Rendering
Proyecto primitivo (cubo, esfera, cilindro, toro, cono) sobre el lienzo con 5 tipos de proyección. Reproducción acelerada de GPU (WebGPU/WebGL2), cámara orbital y objetos de perspectiva seleccionables " arrastrables.
Filtros de imagen GPU
Procesamiento de imagen en tiempo real alimentado por los sombreadores compute WebGL2 con retroceso WebGL2. Ajuste HSL, brillo, contraste, afiche, detección de bordes, tinte de color, vignette, borrón y encadenamiento de filtros en un solo paso GPU.
Segmentación de imagen
Herramienta láser de mano libre para seleccionar y extraer regiones de imagen en resolución nativa completa. 8 presets de estilo cutout (corte de papel, postal, pegatina, póster, mono, boceto, cálido, fresco) combinan filtros GPU con efectos de sombra.
Math & Science Engine
Numerical computing powered by math.js — ODE solvers (RK4/RK45), FFT spectrum analysis, function plotting, parametric curves, dynamic system simulation, and parametric surfaces in perspective. Matemáticas reales, animadas sobre lienzo.
Cumplimiento y Confianza
WCAG 2.1 AA
Accesibilidad árbol sombra para el lector de pantalla navegación lienzo. Navegación de teclado, anuncios en la región en vivo, enlaces de salto, auditoría de contraste y controles de sensibilidad de movimiento. Uses pp:PinePaper ontology for semantic item descriptions.
Cabeceras de seguridad
HSTS con precarga, Content Security Policy, X-Frame-Options, Permissions-Policy. Sin acceso a cámara, micrófono, geolocalización ni pagos.
Privacidad por diseño
Procesamiento 100% del lado del cliente. Sin subidas al servidor, sin cookies, sin recopilación de datos. Todos los diseños permanecen en su navegador.
Tecnología y Capacidades
Tecnología base
- ▹ Paper.js: Manipulación y renderizado de gráficos vectoriales
- ▹ HTML5 Canvas: Animación y exportación en tiempo real
- ▹ JavaScript puro: Ligero, rápido, sin dependencias
- ▹ Motor de timeline: Interpolación de keyframes con 9+ funciones de easing y rutas de movimiento espacial
- ▹ Motor de rigging: Animación esquelética con solvers FK/IK e interpolación de poses v0.4
- ▹ Grafo de conocimiento de diseño: Ontología semántica con 25+ tipos de relación, 35+ funciones matemáticas y jerarquía de tipos v0.4
- ▹ Runtime Rust/WASM: Aceleración WebAssembly opcional — procesamiento de relaciones 10-100x más rápido, sin pausas de GC. Respaldo a JS. v0.5
- ▹ Ontología pp:PinePaper: Vocabulario semántico de 55 tokens (elementos, relaciones, animaciones, máscaras, generadores) — el lenguaje de las animaciones PinePaper. v0.5
- ▹ Sentry: Seguimiento de errores y monitoreo de rendimiento
Formatos de exportación
- ▹ Video WebM: Códec VP9 - mejor calidad para animaciones
- ▹ Video MP4: H.264 vía WebCodecs API - ideal para redes sociales
- ▹ Animación GIF: Vía gif.js Web Workers - perfecto para mensajería
- ▹ PDF para impresión: 300 DPI con sangrado (3-5mm) y marcas de corte - impresión profesional
- ▹ PNG de alta resolución: Hasta 600 DPI para calidad de impresión comercial
- ▹ SVG animado: Animaciones SVG nativas con SMIL
- ▹ Widget interactivo: HTML autónomo con código específico (~8-20KB). Acelerado por WASM. Incrustable en cualquier lugar — sin CDN, sin API, sin dependencias. v0.5
- ▹ Lottie JSON: Formato de animación estándar. Convierte automáticamente animaciones procedurales en keyframes nativos. v0.4
Tipos de animación
Efectos y Composición
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 Server
Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:
Par MCP con el oficial Claude Skill
La Habilidad enseña a Claude cuando llegar a PinePaper y cómo manejarlo correctamente. Instala una vez y pide en inglés claro: "animate este logotipo", "haga una insignia pulsante de LIVE" y rutas de Claude a través de PinePaper en lugar de generar HTML/CSS.
Configuración rápida
1. Instalar globalmente:
npm install -g @pinepaper.studio/mcp-server
2. Agregar a la config de Claude Desktop:
macOS: ~/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. Pruébalo en Claude Desktop:
Herramientas disponibles
- • Crear texto, formas, gráficos
- • Agregar relaciones (25+ tipos: orbits, follows, wiggle, etc.)
- • Animaciones keyframe y preajustes
- • Rigging de personajes (esqueletos, huesos, IK/FK)
- • Preajustes y transiciones de mezcla
- • Diagramas, mapas, creación de fuentes
- • Generar fondos procedurales (14 generadores)
- • Vertex deformation (13 presets: fold, twist, wave, etc.)
- • Exportar SVG, datos de entrenamiento
Plataformas de IA compatibles
- • Claude Desktop
- • Cualquier cliente compatible con MCP
- • Integraciones personalizadas vía API
Grafo de Conocimiento de Diseño
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.
Este enfoque novedoso permite a los agentes de IA razonar sobre animaciones complejas y relaciones estructurales, permitiendo la generación de motion graphics sofisticados que mantienen la consistencia semántica.
Investigación atribuida
La arquitectura del Grafo de Conocimiento de Diseño se basa en ideas de estos artículos revisados por pares:
-
📄
Método de Diseño Conocimiento Gráfico Conducido por Datos Heterogéneos Multi-Fuente Ciencias aplicadas, 2025 Demuestra cómo los grafos de conocimiento pueden capturar relaciones entre métodos de diseño de fuentes heterogéneas — la base de nuestro sistema de relaciones semánticas.
-
📄
Usando modelos de lenguaje grande para corregir retos fundamentales en el aprendizaje de Gráficos arXiv, 2025 Revisión de enfoques LLM para problemas de aprendizaje en grafos — informa cómo nuestras herramientas MCP exponen la estructura del grafo a los agentes de IA.
-
📄
LLM-Empowered Knowledge Graph Construction: A Survey arXiv, 2025 Revisión completa de la construcción de KG impulsada por LLM — la metodología detrás de nuestra extracción automatizada de grafos de diseño.
Para desarrolladores y agentes de IA
PinePaper exposes a comprehensive global API (window.PinePaper)
that enables programmatic control of the entire application. AI assistants and developers can:
- • Crear y manipular texto, formas y elementos SVG importados
- • Aplicar animaciones (9 preajustes de bucle, keyframes, trim paths) y efectos
- • Crear animaciones basadas en keyframes con control de timeline
- • Exportar a WebM, MP4, GIF, SVG, PDF o PNG vía API
- • Usar 25+ relaciones declarativas (orbits, follows, wiggle, driven_by, etc.)
- • Animar personajes con animación esquelética y keyframes de pose v0.4
- • Crear composiciones anidadas (precomps) con timelines locales v0.4
- • Construir flujos de trabajo automatizados y sistemas de procesamiento por lotes
Ejemplo de uso de la 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 });
Nuestra Visión
Estamos construyendo la primera plataforma de motion graphics verdaderamente nativa de IA. Mientras otras herramientas añaden la IA como un accesorio, PinePaper fue diseñado desde el primer día para ser controlado tanto por humanos como por máquinas.
Nuestro objetivo es hacer que el motion graphics sea tan fácil como escribir texto. Ya seas un diseñador creando contenido manualmente, o un asistente de IA ayudando a un usuario mediante lenguaje natural, PinePaper proporciona las herramientas para crear gráficos animados profesionales en segundos.
✨ ¿Qué sigue?
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.
Comunidad y Desarrollo abierto
PinePaper Studio se desarrolla de manera transparente con nuestra comunidad. Damos la bienvenida a comentarios, solicitudes de funciones e informes de errores. Nuestro desarrollo se guía por las necesidades reales de los usuarios y el panorama cambiante de la creatividad asistida por IA.
Gratuito y Abierto
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.