TOKOKINO : transformer une capture d’écran en visuel de produit
📌 TOKOKINO est un éditeur open source dans le navigateur qui transforme une capture d’écran brute en visuel de produit avec cadres d’appareil, arrière-plans, ombres, annotations et exports haute résolution.
Une capture d’écran seule raconte rarement toute l’histoire. Pour une page de lancement, une documentation ou un post sur les réseaux, il faut souvent ajouter un fond, un cadre de téléphone, une ombre et quelques indications. Ouvrir un outil de design complet pour ce travail est possible, mais un peu disproportionné. Tokokino se place exactement dans cet espace intermédiaire.
Vous importez une capture, puis vous composez votre visuel directement dans le navigateur. L’éditeur propose des cadres pour mobile, desktop et navigateur, des arrière-plans avec dégradés et overlays, des bordures, du padding, des ombres et des formes 3D. Vous pouvez aussi empiler plusieurs captures, ajouter du texte, des flèches ou des labels et enregistrer une composition réutilisable.
Les points qui ressortent :
- 🖼️ Habiller une capture avec des cadres d’appareil et de navigateur
- 🎨 Composer des fonds avec dégradés, overlays, ombres et bordures
- 🏷️ Ajouter textes, flèches, annotations et repères visuels
- 🧱 Organiser plusieurs captures dans une même composition
- 🎞️ Animer un canvas avec une timeline par composition
- 📤 Exporter en PNG, JPEG, WebP ou en vidéo depuis le navigateur
Le projet est annoncé comme client-heavy : l’édition et les exports restent autant que possible côté navigateur. Les images ne sont pas envoyées par défaut, et le site précise qu’un partage public nécessite une action explicite. C’est une bonne propriété pour des captures de produits encore confidentielles, des interfaces internes ou des écrans de travail non publiés.
La partie vidéo rend Tokokino plus intéressant qu’un simple générateur de mockups. Le dépôt mentionne WebCodecs et Mediabunny pour encoder la vidéo et mélanger l’audio localement, avec un décodeur AV1 WebAssembly en secours pour Safari. Les exports peuvent prendre la forme de WebM, MP4 ou GIF. Cela ouvre des usages pour une démo rapide, un changelog animé ou une courte présentation de fonctionnalité sans passer par un logiciel de montage.
Je trouve l’outil bien positionné pour les développeurs et les designers qui doivent régulièrement rendre une interface présentable. Il ne cherche pas à remplacer Figma ou un logiciel de motion design. Il enlève plutôt toute la friction autour d’une tâche répétitive : passer d’un écran brut à une image que l’on peut publier ou intégrer dans une documentation.
Il faut simplement garder en tête que le partage public et les brouillons utilisent les services Cloudflare du projet, tandis que l’édition locale n’a pas besoin d’envoyer les captures. Tokokino est distribué sous licence AGPL-3.0, un détail à regarder si vous souhaitez l’intégrer ou le modifier dans un contexte commercial.
Sources
