animation-gen
Animacje CSS i Framer Motion z opisów w języku naturalnym – bez wzorów matematycznych
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Zamień angielskie opisy na gotowy kod animacji. Narzędzie generuje keyframy CSS lub warianty Framer Motion na podstawie tego, co chcesz zobaczyć. Idealne do landing page'ów, mikro-interakcji i prototypowania – opisz efekt słowami, a otrzymasz produkcyjny kod do wklejenia bezpośrednio do projektu.
Jak używać
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.