Animate Text

Catalogue de 24 effets d'animation de texte avec spécifications JSON exactes, traduisibles en GSAP, Motion, WAAPI, CSS, Lottie ou Rive.

par sakuraoxo-clio · sakuraoxo-clio/sakura-animate-text

Testé · Fonctionne ★ 9.6/10

Animate Text — Catalogue de 24 effets d'animation de texte avec spécifications JSON exactes, traduisibles en GSAP, Motion, WAAPI, CSS, Lottie ou Rive.

Ce que fait

Fournit des contrats de mouvement portables et des recettes de reproduction d'animation exactes (courbes d'accélération, durées, décalage, formes de code adaptateur par bibliothèque) pour 24 effets de texte nommés comme soft-blur-in, typewriter, et kinetic-center-build, plus des scripts Node optionnels pour les rechercher. Se déclenche lorsqu'un utilisateur nomme un identifiant d'effet ou demande d'animer des en-têtes, des étiquettes, des compteurs, ou des échanges de texte dans une pile d'animation spécifique.

Rapport de test

A réellement exécuté les scripts groupés en direct : `node scripts/get-effect.mjs soft-blur-in` a renvoyé un contrat de reproduction entièrement spécifié (900ms/25ms de décalage par caractère d'entrée, accélération cubic-bezier exacte, enregistrement CustomEase spécifique à GSAP et un avertissement contre un bug de double durée documenté) par rapport à une estimation de base avec une durée/accélération arbitraire — une différence jour et nuit pour quiconque implémente l'effet réellement.

Testé le: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/sakuraoxo-clio/sakura-animate-text.git
mkdir -p ~/.claude/skills
cp -r sakura-animate-text ~/.claude/skills/animate-text

Commandes et exemples de prompts

  • /animate-textCatalogue de 24 effets d'animation de texte avec spécifications JSON exactes, traduisibles en GSAP, Motion, WAAPI, CSS, Lottie ou Rive.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • Give me the exact GSAP code for a soft-blur-in text entrance effect
  • I need a typewriter animation spec for my headline, done in CSS
  • Show me the kinetic-center-build effect recipe translated for Motion