rendering-animate-svg
Przyspiesz animacje SVG dzięki akceleracji sprzętowej przeglądarki
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umożliwia płynne animacje ikon SVG i elementów pixel art poprzez opakowanie ich w div. Zamiast animować bezpośrednio element SVG, owijasz go w kontener div i aplikujesz animacje CSS na wrapperze. To rozwiązanie aktywuje akcelerację GPU w przeglądarkach, co jest szczególnie ważne dla retro komponentów 8-bitowych z animowanymi ikonami. Obsługuje wszystkie transformacje CSS: rotacje, skalowanie, przezroczystość i przesunięcia.
Jak używać
Zainstaluj skill rendering-animate-svg w swoim projekcie Claude/Copilot, dodając go do konfiguracji agenta lub integrując z repozytorium 8bitcn-ui.
Zidentyfikuj elementy SVG, które chcesz animować — szczególnie ikony, spinnery lub elementy pixel art w komponentach retro.
Zamiast stosować klasę animacji bezpośrednio na elemencie SVG, opakowuj SVG w element div: umieść tag svg wewnątrz div, a następnie przenieś klasę animacji (np. animate-spin, transition-transform) na div.
Dla efektów hover na ikonach retro użyj struktury: div z klasami transition-transform i hover:scale-110, wewnątrz którego umieszczasz komponent ikony SVG.
Pamiętaj, że to podejście dotyczy wszystkich transformacji CSS — nie tylko rotacji, ale też opacity, translate, scale i rotate — więc zawsze owijaj SVG w div, gdy chcesz animować te właściwości.
Przetestuj animacje w różnych przeglądarkach, aby potwierdzić, że GPU acceleration jest aktywna i animacje działają płynnie bez spadków wydajności.