À l'occasion d'un direct célébrant aussi les 40 ans de Mario, Nintendo a communiqué un peu plus sur le prochain film d'animation mettant en scène le célèbre plombier moustachu. Le film, appelé Super Mario Galaxy Le Film, est attendu pour avril 2026.
À l'occasion d'un direct célébrant aussi les 40 ans de Mario, Nintendo a communiqué un peu plus sur le prochain film d'animation mettant en scène le célèbre plombier moustachu. Le film, appelé Super Mario Galaxy Le Film, est attendu pour avril 2026.
Avez-vous déjà passé des heures sur After Effects pour créer une simple animation de 30 secondes qui explique un concept. Entre nous, c’est un cauchemar. Jongler avec les keyframes, les courbes de bézier et 150 calques qui se battent en duel pour savoir lequel doit apparaître en premier, c’est bien relou et on finit par perdre plus de temps à se battre avec le logiciel qu’à créer du contenu.
Vous voyez de quoi je parle, non ?
Mais voilà, j’ai testé un truc qui s’appelle StoryMotion et qui permet de créer des animations façon tableau blanc aussi facilement que vous faites des slides PowerPoint. Pas de compétences professionnelles requises, pas de formation de 3 mois sur YouTube. Juste vous, vos idées, et un outil qui sait que votre temps est précieux.
L’idée de StoryMotion est venue à son créateur, Chun Rapeepat, après avoir utilisé Excalidraw et Keynote pendant des années pour créer des visuels pour ses articles de blogs techniques. Quand il a voulu passer à la vidéo, il s’est retrouvé à passer des heures interminables sur des logiciels complexes pour obtenir un résultat qu’il aurait pu dessiner à la main en 5 minutes.
Pour ceux qui ne connaissent pas, Excalidraw c’est un outil de dessin collaboratif open source qui a conquis le cœur des développeurs et créateurs tech, et qui permet de dessiner vos schémas, diagrammes ou illustrations directement sur un espèce de tableau blanc.
StoryMotion permet de faire la même chose mais est en plus équipé d’un éditeur de timeline. Avec cet éditeur, au lieu de jongler avec des dizaines de paramètres obscurs, vous assignez simplement des effets à vos éléments : zoom, fade, apparition progressive et la timeline vous permet d’ajuster la durée et le timing de chaque animation avec une simplicité t’as peur. C’est vraiment pensé pour ceux qui veulent créer du contenu, et pas devenir des experts en motion design.
Les cas d’usage sont nombreux. Vous pouvez par exemple expliquer un algorithme étape par étape, ou créer une animation qui montre comment fonctionne une recherche Google. Si vous voulez saire une vidéo explicative sur un concept technique complexe c’est aussi tout à fait possible ! Je vous invite à aller voir les exemples sur le site. C’est génial pour les créateurs de contenu éducatif qui veulent produire des vidéos de qualité sans y passer leur week-end.
Et une fois votre animation créée, vous pouvez l’exporter vers votre éditeur vidéo préféré, que ce soit Canva, CapCut, After Effects ou Premiere Pro. L’idée, vous l’aurez compris, n’est pas de tout faire dans StoryMotion, mais juste de gérer la partie la plus chronophage à savoir la création d’animations et cela de la manière la plus efficace possible.
L’outil est actuellement en early beta, ce qui signifie que de nouvelles fonctionnalités arrivent régulièrement et c’est gratuit pour le moment. Mais ne vous y trompez pas, dès que ça sortira de beta, ça passera payant je pense. Alors en attendant, autant en profiter !
Vous avez déjà vu ces README GitHub avec du texte qui s’écrit tout seul comme si quelqu’un tapait en temps réel ? Hé bien voilà ce qu’il vous faut pour faire pareil sur votre propre site. Ça s’appelle TypingSVG , ça a été créé par un certain whiteSHADOW1234 et c’est donc un générateur d’animations SVG qui transforme n’importe quel texte en animation de frappe dynamique. Et surtout c’est complètement gratuit et ça tourne directement dans votre navigateur.
Le truc sympa avec TypingSVG, c’est qu’il ne se contente pas de faire défiler bêtement du texte. Non non, c’est un vrai système complet avec support multi-lignes, gestion des emojis 😎🚀, et même la possibilité de personnaliser la vitesse de suppression du texte. Parce que oui, l’outil simule aussi l’effacement, comme si quelqu’un revenait en arrière pour corriger une faute de frappe…
L’interface web est dispo sur typingsvg.vercel.app . Vous tapez votre texte, vous réglez quelques paramètres (police, taille, couleur, vitesse d’animation), et hop, vous avez un aperçu en temps réel de votre animation. Pas besoin d’installer quoi que ce soit, pas de compte à créer, juste vous et votre créativité.
Pour les dev, c’est du pain béni car vous pouvez intégrer ces animations directement dans vos README GitHub, vos portfolios, ou même vos sites web. Le générateur vous donne ainsi plusieurs formats d’export : une URL directe, du Markdown pour GitHub, ou du HTML pur pour vos pages web. Et comme c’est du SVG, ça reste léger et ça scale parfaitement sur tous les écrans.
Au niveau de la personnalisation, vous avez le choix entre plusieurs styles de curseur (droit, souligné, bloc, ou même invisible si vous préférez). La police Monaco par défaut donne un côté terminal très classe, mais vous pouvez changer pour n’importe quelle police web. L’espacement des lettres est ajustable, vous pouvez centrer le texte horizontalement et verticalement, et même ajouter une bordure autour de votre SVG si l’envie vous prend.
Le code derrière tout ça, c’est du Next.js avec TypeScript et Tailwind CSS ce qui fait que c’est moderne et maintenable et whiteSHADOW1234 a fait un sacré boulot pour que l’API soit simple à utiliser. Un simple appel à /api/svg avec les bons paramètres et vous récupérez votre animation. Par exemple, pour un “Hello, World!” qui clignote, il suffit d’ajouter ?text=Hello,+World! à l’URL.
Et pour ceux qui veulent aller plus loin, vous pouvez même déployer votre propre instance sur Vercel. Un bouton “Deploy to Vercel” est disponible sur le repo GitHub, et en quelques clics vous avez votre propre générateur personnel. Pratique si vous voulez des fonctionnalités custom ou si vous préférez garder le contrôle total sur vos animations.
Bref, pas de fioritures inutiles mais juste ce qu’il faut pour créer des animations de texte qui claquent, que ce soit pour pimper votre profil GitHub, ajouter un peu de dynamisme à votre site, ou juste pour le fun !
Connexion