Animate Text

24-effekters text-animationskatalog med exakta JSON-specifikationer, översättbara till GSAP, Motion, WAAPI, CSS, Lottie eller Rive.

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

Testad · Fungerar ★ 9.6/10

Animate Text — 24-effekters text-animationskatalog med exakta JSON-specifikationer, översättbara till GSAP, Motion, WAAPI, CSS, Lottie eller Rive.

Vad den gör

Levererar portabla rörelsekontrakt och exakta animations-reproduktionsrecept (easing-kurvor, varaktigheter, stagger, per-bibliotekets adapterkodformer) för 24 namngivna texteffekter som soft-blur-in, typewriter och kinetic-center-build, plus valfria Node-skript för att slå upp dem. Triggers när en användare namnger en effekt-ID eller ber att animera rubriker, etiketter, räknare eller textbyten i en specifik animationsstack.

Testrapport

Körde faktiskt de medföljande skripten live: `node scripts/get-effect.mjs soft-blur-in` returnerade ett fullständigt specificerat reproduktionskontrakt (900ms/25ms-stagger per-tecken enter, exakt cubic-bezier easing, GSAP-specifik CustomEase-registrering och en varning mot en dokumenterad dubbel-varaktighetsbugg) jämfört med en baslinjegissning med godtycklig varaktighet/easing — natt och dag skillnad för alla som implementerar effekten på riktigt.

Testad: 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

Kommandon och exempelprompter

  • /animate-text24-effekters text-animationskatalog med exakta JSON-specifikationer, översättbara till GSAP, Motion, WAAPI, CSS, Lottie eller Rive.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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