À 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.
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.
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é.
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.
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.
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.
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.
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.
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.
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.
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
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
Effets & Compositing
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.
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 :
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 :
-
📄
Méthode de conception Graphique de connaissances alimenté par des données hétérogéniques multi-sources Sciences appliquées, 2025 Démontre comment les graphes de connaissances peuvent capturer les relations entre méthodes de conception à partir de sources hétérogènes — le fondement de notre système de relations sémantiques.
-
📄
Utiliser de grands modèles linguistiques pour relever les défis fondamentaux de l'apprentissage des graphiques arXiv, 2025 Revue des approches LLM pour les problèmes d'apprentissage sur graphes — éclaire comment nos outils MCP exposent la structure du graphe aux agents IA.
-
📄
LLM-Expowered Knowledge Graph Construction: Une enquête arXiv, 2025 Revue complète de la construction de KG pilotée par LLM — la méthodologie derrière notre extraction automatisée de graphe de conception.
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.
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.