COLORION TEXT EFFECTS : 66 effets de texte en CSS pur
https://text-effects.colorion.co
📌 COLORION TEXT EFFECTS est une galerie de 66 effets de texte animés en CSS pur, sans JavaScript ni dépendance, à copier-coller ou à régénérer via un prompt pour agent de code.
La plupart des bibliothèques d’effets CSS se contentent de proposer des dégradés et des ombres. Colorion Text Effects va plus loin : on y trouve des effets de glitch, de tableau d’aéroport, de terminal CRT, de néon, de remplissage liquide, de hologramme, de tampon en caoutchouc, de code-barres ou de réseau de pixels. Chaque effet est animé uniquement en CSS, sans une seule ligne de JavaScript.
Le principe est volontairement simple. Vous cliquez sur un effet, puis vous choisissez entre deux options : copier le CSS autoportant ou récupérer un prompt structuré conçu pour qu’un agent de code recrée l’effet dans votre projet. Le CSS extrait inclut automatiquement les @keyframes partagés dont il dépend, ce qui évite les surprises quand on colle le snippet dans un fichier existant.
Le système de couleurs mérite d’être souligné. Chaque effet utilise trois tokens : --ink pour la couleur principale du texte, --ink-2 et --ink-3 pour les accents. Surcharger ces variables suffit pour relooker un effet sans toucher au reste du CSS. Toutes les animations respectent également prefers-reduced-motion, ce qui désactive proprement les effets pour les utilisateurs sensibles au mouvement.
Quelques effets qui se démarquent du lot :
- 🌌 Borealis : aurore boréale en dégradé animé
- 🖥️ Phosphor : terminal CRT avec scintillement vert
- ✈️ Split-Flap : tableau d’affichage d’aéroport lettre par lettre
- 💧 Aqua-Fill : remplissage liquide de bas en haut
- 🔮 Holograph : hologramme irisé avec scintillement
- 📦 Rubber-Stamp : tampon APPROVED en caoutchouc
Je trouve la double sortie CSS et prompt particulièrement bien pensée. Le CSS s’adresse aux développeurs qui veulent intégrer un effet directement, tandis que le prompt permet de demander à Claude, Codex ou n’importe quel agent de code de l’adapter à un contexte précis avec une police, une couleur ou une taille différente. C’est une reconnaissance pragmatique du fait que beaucoup de code front-end passe désormais par des assistants IA.
Le catalogue couvre un spectre large : néon, chrome, glitch, typewriter, scanner, ember, echo, depth, anaglyph 3D, dot-matrix, barcode, moiré, topographic, signal noise, eclipse, frostbite, vapor trail, duotone et bien d’autres. Certains effets sont des classiques revisités, d’autres sont suffisamment rares pour justifier une visite à eux seuls. Le site fait partie du réseau Colorion, qui propose également des générateurs de palettes, de dégradés, de boutons, de loaders et de combinaisons de polices.
Le projet est construit avec Astro et publié sous MIT. L’architecture du dépôt est lisible : un fichier global.css contient tous les effets avec des marqueurs numérotés, un script de build découpe ces blocs et génère les snippets autoportants, puis les expose via un fichier JSON statique. C’est ingénieux et minimal.
COLORION TEXT EFFECTS ne remplacera pas une bibliothèque d’animation JavaScript pour des scénarios complexes. Mais pour ajouter du caractère à un titre, une page de maintenance, un écran de chargement ou un projet personnel, c’est l’une des sources les plus rapides et les plus soignées que j’ai vues. Le tout sans une seule dépendance, ce qui est rarement le cas des galeries d’effets CSS en ligne.
Sources
