animation-gen
Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.
How to use
Upewnij się, że masz zainstalowany Node.js w wersji 18 lub wyższej. Nie musisz nic instalować – narzędzie uruchamia się przez npx.
Otwórz terminal i wykonaj polecenie z opisem animacji, którą chcesz stworzyć. Na przykład: npx ai-animation "fade in from left with bounce" – system automatycznie wygeneruje kod CSS.
Jeśli potrzebujesz kodu dla Framer Motion zamiast CSS, dodaj flagę -f framer: npx ai-animation "staggered list entrance" -f framer.
Aby uzyskać oba formaty jednocześnie i zapisać wynik do pliku, użyj: npx ai-animation "smooth slide up reveal" -f both -o animations.ts – kod trafi do pliku animations.ts.
Opisując animację, bądź konkretny: dodaj kierunek ("from left", "upward"), tempo ("slow", "fast", "0.5s") i liczbę powtórzeń jeśli istotna. Na przykład "shake horizontally three times then settle" da lepszy wynik niż "make it move".
Wygenerowany kod możesz od razu wkleić do projektu. Jeśli chcesz dostroić efekt, przetestuj go na urządzeniu mobilnym – animacje mogą wyglądać inaczej na różnych ekranach.