Presenta Design, développé par Craftwork, est un studio de maquettes d'appareils 3D et de vidéos promotionnelles sans inscription qui traite l'ensemble des éléments visuels côté client avec Three.js, WebGL et HTML5 Canvas sans transférer les images vers des serveurs distants. En plus des exports statiques PNG, JPG ou WebP, la plateforme génère des animations vidéo WebM via une timeline de caméra intégrée et fournit un serveur local Playwright MCP pour agents d'IA tels que Claude Code et Cursor, intégrant la création de maquettes au terminal.
Résumé d
Contrairement aux outils SaaS traditionnels, Presenta Design supprime les files d'attente de rendu sur serveur. Les captures sont traitées dans la mémoire GPU du navigateur. Les transformations 3D sont calculées via les matrices Three.js, tandis que les interpolations de caméra (Orbit Right, Punch In, Slow Zoom Out, Scan Left to Right) sont encodées en WebM dans le client. De plus, il propose un serveur MCP local basé sur Playwright (presenta-mcp.mjs) permettant aux agents IA de compiler des maquettes 3D via un navigateur headless.
Pourquoi Cet Outil Retient l'Attention : Cas Réel de Production
Les équipes produit et ingénieurs marketing font face à deux contraintes majeures : modéliser des cadres d'appareils 3D en perspective dans Figma est chronophage, tandis que les teasers vidéo nécessitent des suites lourdes comme After Effects ou Premiere. La majorité des solutions cloud téléverse les images vers des serveurs distants, soulevant des risques de confidentialité. Comme souligné dans notre revue de Shots.so, le rendu côté client optimise ce processus, et Presenta Design va encore plus loin.
Développé par l'équipe de Craftwork, Presenta fonctionne instantanément dès l'ouverture de l'URL, sans authentification. Les designers peuvent glisser des éléments issus de leurs systèmes de design UI/UX d'entreprise sur le canevas, les projeter sur des modèles 3D, ajuster les ombres et exporter des vidéos WebM micro-animées en quelques secondes. Son avancée la plus marquante réside dans son module Model Context Protocol (MCP) basé sur Playwright pour Claude Code, Codex CLI et Cursor.
Sous le Capot : Architecture, Interactions et Stack Technique
Le fonctionnement de Presenta s'articule autour de trois couches logicielles majeures : le moteur de rendu WebGL, l'encodeur vidéo par images clés et la couche d'automatisation locale headless.
- Scène WebGL / Three.js dans le Navigateur : Les captures d'écran sont converties en URLs Blob locales et appliquées comme textures sur des maillages Three.js. Les châssis d'appareils (iPhone, MacBook, iPad, moniteurs) sont des modèles 3D low-poly optimisés ; les reflets et ombres portées sont calculés en temps réel avec accélération matérielle WebGL.
- Timeline Caméra et Export WebM : La plateforme intègre des trajectoires de caméra prédéfinies comme Orbit Right, Punch In, Slow Zoom Out et Scan Left to Right. Durant l'animation, les matrices Three.js sont interpolées et les images du canvas HTML5 sont enregistrées via l'API MediaRecorder pour compiler un flux vidéo WebM sans perte.
- AI Site Shots et Serveur Playwright MCP : Au lieu d'API cloud distantes, Presenta met à disposition un script Node.js local (https://presenta.design/agents/presenta-mcp.mjs). Les développeurs l'intègrent dans Claude Code ou Cursor avec la commande
. Le serveur MCP lance Chromium en tâche de fond via Playwright, capture l'URL ciblée, l'injecte dans le canevas Presenta et enregistre le mockup 3D sur le disque local.claude mcp add --scope user presenta -- node ~/.presenta/presenta-mcp.mjs - Validation des Performances : Les équipes souhaitant optimiser les temps de capture peuvent utiliser notre analyseur de vitesse pour auditer les ressources du site cible et accélérer les rendus avec Presenta MCP.
| Paramètre Technique | Architecture Presenta Design | Outils de Mockup Cloud Traditionnels |
|---|---|---|
| Sécurité des Données | Zéro transfert serveur ; traitement local en mémoire Blob et WebGL | Images téléversées et traitées sur des serveurs distants |
| Génération Vidéo | Rendu WebM client via interpolation de caméra par keyframes | Limité aux exports d'images statiques PNG ou GIF |
| Intégration d'Agents | Serveur MCP local officiel basé sur Playwright (presenta-mcp.mjs) | APIs REST limitées ou webhooks externes |
| Modèle d'Accès | Gratuit sans inscription (No-signup), sans filigrane | Inscription obligatoire et formules freemium restrictives |
| Résolution Minimale | Largeur desktop de 1200 px (Le canevas se verrouille sur petit écran) | Interfaces web responsives ou mobiles limitées |
Quand l'Utiliser en Production et Quand l'Éviter
Presenta Design offre une rapidité exceptionnelle dans des cas ciblés, mais son architecture implique des compromis précis :
- Cas d'Usage Recommandés : Création rapide de vidéos teasers de lancement, intégration de maquettes 3D dans des notes de version (changelogs), et automatisation de captures d'écran de documentation via CI/CD ou agents IA (Claude Code, etc.).
- Situations à Éviter : Travail sur des résolutions inférieures à 1200 px ou appareils mobiles (l'éditeur se bloque avec l'avertissement 'Presenta needs a wider screen'). Environnements nécessitant obligatoirement du MP4 sans transcodage ffmpeg tiers.
Note d
Selon les critères d'ingénierie de Kling Digital, l'atout majeur de Presenta réside dans son serveur headless Playwright MCP. Connecter ce serveur à votre pipeline CI/CD ou à vos sessions Cursor/Claude permet de générer automatiquement des maquettes 3D de votre site en production à chaque déploiement frontend, sans intervention humaine.
