À propos de PinePaper Studio

Construire l'avenir du motion design : basé navigateur, nativement IA, et accessible à tous.

Notre Mission

PinePaper Studio démocratise la création de motion design. Nous croyons que des outils créatifs puissants ne devraient pas nécessiter de licences logicielles coûteuses, d'ordinateurs puissants ou d'années de formation. En combinant les technologies web modernes avec une conception IA-native, nous rendons le texte animé et les graphiques accessibles aux créateurs du monde entier.

Ce qui nous différencie

🤖

Conception IA-Native

Conçu dès le départ pour fonctionner en harmonie avec les assistants IA. Notre API complète permet aux agents IA de créer, animer et exporter des graphiques par commandes en langage naturel.

🎬

Export MP4 & GIF

Exportez en vidéo MP4 (H.264 via WebCodecs) pour Instagram, TikTok et LinkedIn. Créez des GIF pour Twitter, Discord et les apps de messagerie. Plus WebM (VP9), SVG animé et PNG.

⏱️

Timeline & Images-clés

Éditeur de timeline professionnel avec animations par keyframes. Créez des séquences chorégraphiées avec 9+ fonctions d'easing (dont bezier cubique personnalisé), easing par propriété, chemins de mouvement spatiaux, interpolation couleur/dégradé et morphing de chemins.

🌍

Global par défaut

Prise en charge de 52 langues et de tous les systèmes d'écriture, y compris le chinois, l'arabe, l'hindi, le bengali et les emoji. Créez du contenu pour tout public, partout dans le monde.

🚀

Liberté du navigateur

Aucune installation requise. Fonctionne sur tout appareil avec un navigateur moderne. Vos créations sont traitées localement, garantissant confidentialité et résultats instantanés sans aller-retour serveur.

📋

Bibliothèque de modèles

Lancez votre créativité avec des modèles prêts à l'emploi. Arrière-plans magnifiques, texte animé et mises en page professionnelles prêtes à personnaliser. Enregistrez vos propres créations comme modèles réutilisables.

🎨

Double interface

Interface intuitive pour les designers humains et une API puissante pour les agents IA et développeurs. Deux interfaces, une mission : donner du pouvoir à la créativité.

🖨️

Prêt pour l'impression

Créez des supports d'impression professionnels avec des préréglages A3, A4, A5, Letter, Legal et Tabloid à 300 DPI. Exportez en PDF avec fond perdu et repères de coupe, ou en PNG haute résolution (jusqu'à 600 DPI) pour l'impression commerciale.

v0.4
🦴

Rigging de personnages

Animation squelettique avec os, propagation FK et solveur IK FABRIK. Sauvegardez et interpolez des poses, utilisez des rigs prédéfinis (humanoïde, quadrupède, araignée) et pilotez l'animation via des keyframes sur la timeline.

v0.4
🎭

Fusion & Compositing

Modes de fusion par élément et par groupe avec 7 préréglages (fantôme, néon, ombre, lueur, rayon X, rêveur, vintage). Transitions animées, modes interactifs au survol/clic et réactions de fusion basées sur la proximité.

v0.4
✂️

Découpe de tracé & Masquage

Animez le dessin de traits avec la découpe de tracé pour des effets de « tracé progressif ». Masquage avancé avec modes découpe/soustraction/intersection, empilement de masques, révélations animées (14 préréglages) et animation de sommets.

v0.4
🔗

Relations procédurales

Nouveaux types de relations : driven_by (liaison de propriétés), wiggle (bruit procédural) et time_expression (expressions mathématiques avec t). Plus les compositions imbriquées (precomps) avec des timelines locales indépendantes.

v0.4
🌐

Toile infinie

Dessinez n'importe où sans frontières. Le mode toile sans limite supprime toutes les restrictions de taille — panoramique et zoom librement sur un espace de travail infini.

v0.4
🖌️

Outils de dessin

6 outils de dessin professionnels : stylo, brosse à encre, marqueur, pulvérisateur, gomme et seau de remplissage. Chacun avec des curseurs personnalisés et des algorithmes de course optimisés.

v0.4
🧊

Rendu des perspectives

Projet primitifs (cube, sphère, cylindre, tore, cône) sur la toile avec 5 types de projection. Le rendu accéléré par GPU (WebGPU/WebGL2), la caméra orbitale et les objets de perspective sélectionnables et draggables.

v0.5
🎛

Filtres d'image GPU

Traitement en temps réel de l'image alimenté par des shaders de calcul WebGPU avec repli WebGL2. Réglage HSL, luminosité, contraste, posterize, détection des bords, teinte de couleur, vignette, flou et chaîne de filtre en un seul passage GPU.

v0.5

Segmentation de l'image

Outil freehand lasso pour sélectionner et extraire des régions d'images à pleine résolution native. 8 préréglages de style découpé (papier, carte postale, autocollant, affiche, mono, croquis, chaud, frais) combinent les filtres GPU avec des effets d'ombre.

v0.5
📐

Moteur de mathématiques et de sciences

Calcul numérique alimenté par math.js — Résolveurs ODE (RK4/RK45), analyse du spectre FFT, tracé des fonctions, courbes paramétriques, simulation dynamique du système et surfaces paramétriques en perspective. De vrais maths, animés sur toile.

Conformité & Confiance

Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1

WCAG 2.1 AA

Arbre d'ombres d'accessibilité pour la navigation sur toile de lecteur d'écran. Navigation par clavier, annonces en direct, liens de saut, vérification du contraste et vérifications de sensibilité au mouvement. Utilise l'ontologie pp:PinePaper pour les descriptions sémantiques des éléments.

🔒

En-têtes de sécurité

HSTS avec preload, Content Security Policy, X-Frame-Options, Permissions-Policy. Aucun accès caméra, microphone, géolocalisation ou paiement.

👁

Confidentialité par conception

Traitement 100% côté client. Aucun téléversement, aucun cookie, aucune collecte de données. Tous les designs restent dans votre navigateur.

Technologie & Capacités

Technologie de base

  • Paper.js : Manipulation et rendu de graphiques vectoriels
  • HTML5 Canvas : Animation et export en temps réel
  • JavaScript natif : Léger, rapide, sans dépendances
  • Moteur de timeline : Interpolation de keyframes avec 9+ fonctions d'easing et chemins de mouvement spatiaux
  • Moteur de rigging : Animation squelettique avec solveurs FK/IK et interpolation de poses v0.4
  • Graphe de connaissances du design : Ontologie sémantique avec 25+ types de relations, 35+ fonctions mathématiques et hiérarchie de types v0.4
  • Runtime Rust/WASM: Accélération WebAssembly optionnelle — traitement des relations 10-100x plus rapide, sans pauses GC. Repli sur JS. v0.5
  • Ontologie pp:PinePaper: Vocabulaire sémantique de 55 jetons (éléments, relations, animations, masques, générateurs) — le langage des animations PinePaper. v0.5
  • Sentry : Suivi des erreurs et monitoring des performances

Formats d'export

  • Vidéo WebM : Codec VP9 - meilleure qualité pour les animations
  • Vidéo MP4 : H.264 via WebCodecs API - idéal pour les réseaux sociaux
  • Animation GIF : Via gif.js Web Workers - parfait pour la messagerie
  • PDF pour impression : 300 DPI avec fond perdu (3-5mm) et repères de coupe - impression professionnelle
  • PNG haute résolution : Jusqu'à 600 DPI pour une qualité d'impression commerciale
  • SVG animé : Animations SVG natives avec SMIL
  • Widget interactif: HTML autonome avec code spécifique (~8-20 Ko). Accéléré par WASM. Intégrable partout — pas de CDN, pas d'API, pas de dépendances. v0.5
  • Lottie JSON : Format d'animation standard. Convertit automatiquement les animations procédurales en keyframes natifs. v0.4

Types d'animation

Pulsation Rotation Rebond Fondu Oscillation Balancer Secouer Gelée Machine à écrire Chemins personnalisés Animation par keyframes ✨ Découpe de tracé Chemins de mouvement spatiaux Morphing de tracé 13 Deform Presets 100+ Animation Presets

Effets & Compositing

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.

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

Paire MCP avec la compétence officielle Claude

La Compétence enseigne à Claude quand atteindre PinePaper et comment le conduire correctement. Installez une fois et demandez en anglais simple — "animer ce logo", "faire un badge LIVE pulsant" — et Claude parcourt PinePaper au lieu de générer HTML/CSS.

Skill docs →

Installation rapide

1. Installer globalement :

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

2. Ajouter à la config 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. Essayez dans Claude Desktop :

"Créer un texte rouge pulsant disant HELLO" "Faire orbiter la terre autour du soleil"

Outils disponibles

  • • Créer du texte, des formes, des graphiques
  • • Ajouter des relations (25+ types : orbits, follows, wiggle, etc.)
  • • Animations par keyframes et préréglages
  • • Rigging de personnages (squelettes, os, IK/FK)
  • • Préréglages de fusion et transitions
  • • Diagrammes, cartes, création de polices
  • • Générer des arrière-plans procéduraux (14 générateurs)
  • • Vertex deformation (13 presets: fold, twist, wave, etc.)
  • • Exporter SVG, données d'entraînement

Plateformes IA supportées

  • • Claude Bureau
  • • Tout client compatible MCP
  • • Intégrations personnalisées via API

Graphe de connaissances du 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.

Cette approche novatrice permet aux agents IA de raisonner sur des animations complexes et des relations structurelles, permettant la génération de motion design sophistiqué qui maintient la cohérence sémantique.

Recherche attribuée

L'architecture du Graphe de connaissances du design s'appuie sur les idées de ces articles évalués par des pairs :

Pour les développeurs & agents IA

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

  • Créer et manipuler du texte, des formes et des éléments SVG importés
  • Appliquer des animations (9 préréglages de boucle, keyframes, trim paths) et des effets
  • Créer des animations par keyframes avec contrôle de la timeline
  • Exporter en WebM, MP4, GIF, SVG, PDF ou PNG via API
  • Utiliser 25+ relations déclaratives (orbits, follows, wiggle, driven_by, etc.)
  • Rigger des personnages avec animation squelettique et keyframes de poses v0.4
  • Créer des compositions imbriquées (precomps) avec des timelines locales v0.4
  • Construire des workflows automatisés et des systèmes de traitement par lots

Exemple d'utilisation de l'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 });

Notre Vision

Nous construisons la première plateforme de motion design véritablement IA-native. Alors que d'autres outils greffent l'IA après coup, PinePaper a été conçu dès le premier jour pour être contrôlé par les humains et les machines.

Notre objectif est de rendre le motion design aussi simple que d'écrire du texte. Que vous soyez un designer créant du contenu manuellement, ou un assistant IA aidant un utilisateur par langage naturel, PinePaper fournit les outils pour créer des graphiques animés professionnels en quelques secondes.

Et ensuite ?

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.

Communauté & Développement ouvert

PinePaper Studio est développé de manière transparente avec notre communauté. Nous accueillons les retours, les demandes de fonctionnalités et les signalements de bugs. Notre développement est guidé par les besoins réels des utilisateurs et l'évolution du paysage de la créativité assistée par IA.

Gratuit & Ouvert

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
Langues supportées
25+
Types de relations
111+
API Methods
7
Formats d'export

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.