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.

v0.4
🦴

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.

v0.4
🎭

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.

v0.4
✂️

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.

v0.4
🔗

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.

v0.4
🌐

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.

v0.4
🖌️

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.

v0.4
🧊

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.

v0.5
🎛

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.

v0.5

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.

v0.5
📐

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

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

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

Pulso Rotar Rebote Desvanecer Temblor Balanceo Agitar Gelatina Máquina de escribir Rutas personalizadas Animación Keyframe ✨ Rutas de recorte Rutas de movimiento espacial Morfismo de rutas 13 Deform Presets 100+ Animation Presets

Efectos y Composición

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 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.

Skill docs →

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:

"Crear un texto rojo pulsante que diga HOLA" "Haz que la Tierra orbite alrededor del Sol"

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:

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.

59
Idiomas soportados
25+
Tipos de relación
111+
API Methods
7
Formatos de exportación

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.