О PinePaper Studio

Строим будущее моушн-графики: в браузере, AI-ориентированный и доступный для всех.

Наша миссия

PinePaper Studio демократизирует дизайн моушн-графики. Мы верим, что мощные творческие инструменты не должны требовать дорогих лицензий, мощных компьютеров или многих лет обучения. Объединяя современные веб-технологии с AI-ориентированным дизайном, мы делаем анимированный текст и графику доступными для авторов по всему миру.

Чем мы отличаемся

🤖

AI-ориентированный дизайн

Создан с нуля для бесперебойной работы с AI-ассистентами. Наш комплексный API позволяет AI-агентам создавать, анимировать и экспортировать графику через команды на естественном языке.

🎬

Экспорт в MP4 и GIF

Экспорт в MP4-видео (H.264 через WebCodecs) для Instagram, TikTok и LinkedIn. Создание GIF для Twitter, Discord и мессенджеров. Плюс анимированные SVG и PNG.

⏱️

Временная шкала и ключевые кадры

Профессиональный редактор временной шкалы с анимациями на основе ключевых кадров. Создавайте хореографические последовательности с точным контролем тайминга, 5 функциями сглаживания и интерполяцией цвета.

🌍

Глобально по умолчанию

Поддержка 52 языков и всех систем письма, включая китайский, арабский, хинди, бенгальский и эмодзи. Создавайте контент для любой аудитории в любой точке мира.

🚀

Свобода в браузере

Установка не требуется. Работает на любом устройстве с современным браузером. Ваши работы обрабатываются локально, гарантируя конфиденциальность и мгновенные результаты без серверных запросов.

📋

Библиотека шаблонов

Начните творить с готовых шаблонов. Красивые фоны, анимированный текст и профессиональные макеты готовы к настройке. Сохраняйте свои работы как многоразовые шаблоны.

🎨

Двойной интерфейс

Интуитивный UI для дизайнеров и мощный API для AI-агентов и разработчиков. Два интерфейса, одна миссия: расширение возможностей творчества.

🖨️

Дизайн для печати

Создавайте профессиональные печатные материалы с пресетами A3, A4, A5, Letter, Legal и Tabloid при 300 DPI. Экспорт в PDF с полями обреза и метками реза, или PNG высокого DPI (до 600 DPI) для коммерческой печати.

v0.4
🦴

Риггинг персонажей

Скелетная анимация с костями, FK-распространение и FABRIK IK-решатель. Сохранение и интерполяция поз, использование пресетных ригов (гуманоид, четвероногий, паук) и управление анимацией через ключевые кадры.

v0.4
🎭

Смешивание и композитинг

Режимы наложения для отдельных элементов и групп с 7 пресетами (призрак, неон, тень, свечение, рентген, мечтательный, винтаж). Анимированные переходы, интерактивные режимы при наведении/клике и реакции наложения на основе близости.

v0.4
✂️

Обрезка путей и маскирование

Анимация прорисовки штрихов с обрезкой путей для эффектов «рисования линии». Продвинутое маскирование с режимами обрезки/вычитания/пересечения, наложение масок, анимированные раскрытия (14 пресетов) и вершинная анимация.

v0.4
🔗

Процедурные связи

Новые типы связей: driven_by (привязка свойств), wiggle (процедурный шум) и time_expression (математические выражения с t). Плюс вложенные композиции (прекомпы) с независимыми локальными временными шкалами.

v0.4
🌐

Бесконечный холст

Рисовать везде без границ. Режим неограниченного холста снимает все ограничения по размеру — панорамирование и масштабирование свободно через бесконечное рабочее пространство.

v0.4
🖌️

Рисование инструментов

6 профессиональных инструментов для рисования: ручка, чернильная щетка, маркер, баллончик для распыления, ластик и ведро для заполнения. Каждый с пользовательскими курсорами и оптимизированными алгоритмами инсульта.

v0.4
🧊

Перспективный рендеринг

Проектные примитивы (куб, сфера, цилиндр, тор, конус) на холсте с 5 типами проекций. GPU-ускоренный рендеринг (WebGPU/WebGL2), орбитальная камера и выбираемые и перетаскиваемые перспективные объекты.

v0.5
🎛

Фильтры изображений GPU

Обработка изображений в режиме реального времени на основе WebGPU вычисляет шейдеры с запасом WebGL2. Настройка HSL, яркость, контрастность, плакатизация, обнаружение края, цветной оттенок, виньетка, размытие и цепь фильтров в одном GPU-пропуске.

v0.5

Сегментация изображений

Инструмент Freehand lasso для выбора и извлечения областей изображения в полном разрешении. 8 предустановок стиля вырезов (формат, открытка, наклейка, плакат, моно, эскиз, теплый, прохладный) сочетают GPU-фильтры с теневыми эффектами.

v0.5
📐

Математический и научный двигатель

Численные вычисления на основе math.js — ODE-решатели (RK4 / RK45), анализ спектра FFT, построение графиков функций, параметрические кривые, моделирование динамических систем и параметрические поверхности в перспективе. Настоящая математика, анимированная на холсте.

Соответствие и доверие

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Теневое дерево доступности для навигации по экранному ридеру. Навигация по клавиатуре, объявления в реальном времени, пропуск ссылок, аудит контрастности и проверки чувствительности движения. Использует онтологию pp:PinePaper для описания семантических элементов.

🔒

Заголовки безопасности

HSTS с предзагрузкой, CSP, X-Frame-Options, Permissions-Policy. Нет доступа к камере, микрофону, геолокации или оплате.

👁

Конфиденциальность по дизайну

100% обработка на стороне клиента. Без загрузок на сервер, без куки, без сбора данных.

Технологии и возможности

Основные технологии

  • Paper.js: Манипуляция и рендеринг векторной графики
  • HTML5 Canvas: Анимация и экспорт в реальном времени
  • Vanilla 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-видео: H.264 через WebCodecs API — идеально для соцсетей
  • GIF-анимация: Через gif.js Web Workers — идеально для мессенджеров
  • PDF для печати: 300 DPI с полями обреза (3-5 мм) и метками реза — профессиональная печать
  • PNG высокого DPI: До 600 DPI для коммерческого качества печати
  • Анимированный SVG: Нативные SVG-анимации со SMIL
  • Интерактивный виджет: Автономный HTML со сценарным кодом (~8-20КБ). Ускорение WASM. Встраивается куда угодно — без CDN, без API. 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.

MCP-сервер PinePaper

Use PinePaper with Claude Desktop and other AI assistants via the @pinepaper.studio/mcp-server npm package. Create animated graphics using natural language:

Пара MCP с официальным Клодом Скиллом

Навык учит Клода, когда обращаться к PinePaper и как правильно управлять им. Установите один раз и спросите на простом английском языке - "оживите этот логотип", "сделать пульсирующий значок LIVE" - и Клод маршрутизирует через PinePaper вместо генерации HTML/CSS.

Skill docs →

Быстрая установка

1. Установить глобально:

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

2. Добавить в конфигурацию 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. Попробовать в Claude Desktop:

«Создайте красный пульсирующий текст, который говорит «HELLO»» «Сделаем Землю вокруг Солнца»

Доступные инструменты

  • • Создание текста, форм, графики
  • Добавить отношения (25+ типов: орбиты, слежения, шевелиться и т.д.)
  • • Keyframe и предустановленная анимация
  • • Подделка характеристик (скелеты, кости, IK/FK)
  • • Смешивание предустановок и переходов
  • • Диаграммы, карты, создание шрифтов
  • • Создание процедурных фонов (14 генераторов)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • Экспорт SVG, данные обучения

Поддерживаемые AI-платформы

  • • Claude Desktop
  • Любой 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 пресетов) и эффекты (искры, взрыв)
  • Создавать анимации на основе ключевых кадров с управлением временной шкалой
  • Экспортировать в MP4, GIF, SVG или PNG через API
  • Использовать декларативные связи (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.