Animate Text

Katalog mit 24 Effekten für Textanimationen mit exakten JSON-Spezifikationen, übersetzbar in GSAP, Motion, WAAPI, CSS, Lottie oder Rive.

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

Getestet · Funktioniert ★ 9.6/10

Animate Text — Katalog mit 24 Effekten für Textanimationen mit exakten JSON-Spezifikationen, übersetzbar in GSAP, Motion, WAAPI, CSS, Lottie oder Rive.

Was es kann

Liefert portable Motion-Verträge und exakte Animationswiederherstellungsrezepte (Easing-Kurven, Dauern, Stagger, pro-Bibliothek-Adapter-Codeformen) für 24 benannte Texteffekte wie soft-blur-in, typewriter und kinetic-center-build, plus optionale Node-Skripte zum Nachschlagen. Wird ausgelöst, wenn ein Benutzer eine Effekt-ID nennt oder auffordert, Überschriften, Labels, Zähler oder Textwechsel in einem bestimmten Animationsstapel zu animieren.

Testbericht

Die gebündelten Skripte tatsächlich live ausgeführt: `node scripts/get-effect.mjs soft-blur-in` lieferte einen vollständig spezifizierten Wiederherstellungsvertrag (900ms/25ms-Stagger pro Zeichen Enter, exaktes Cubic-Bezier-Easing, GSAP-spezifische CustomEase-Registrierung und eine Warnung vor einem dokumentierten Doppel-Dauer-Fehler) gegenüber einer Basislinien-Schätzung mit willkürlicher Dauer/Easing — ein Unterschied wie Tag und Nacht für jeden, der den Effekt tatsächlich implementiert.

Getestet am: 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

Befehle & Beispiel-Prompts

  • /animate-textKatalog mit 24 Effekten für Textanimationen mit exakten JSON-Spezifikationen, übersetzbar in GSAP, Motion, WAAPI, CSS, Lottie oder Rive.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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