TypingSVG – Un générateur d'animations qui rend vos textes vivants

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 !

Source : korben.info