Morphicons
Безкоштовна бібліотека для плавного перетворення SVG-іконок одна в одну. Підтримує різні набори іконок та популярні вебфреймворки.
Про ресурс
У BenDay замість звичного кружечка завантаження рухається сам логотип. Зображення розбивається на безліч крапок: вони розходяться, утворюють хвилі або обертаються, поки програма обробляє запит. Коли все готово, крапки повертаються на свої місця й знак знову стає чітким. Автор проєкту, Kacem Mathlouthi, підготував 21 варіант такої анімації. Їх можна переглянути в Playground, порівняти рухи й вибрати той, який пасує до конкретного логотипа. Є й можливість написати власну поведінку крапок. Для використання на сайті BenDay встановлюється як React-компонент через shadcn. Файли потрапляють безпосередньо у ваш проєкт, тож за потреби можна змінити код і налаштування. Підтримуються стани thinking, idle та done. Компонент також враховує налаштування зменшення анімації в системі користувача. Вихідний код опублікований на GitHub під ліцензією MIT. Спробувати ефекти у браузері можна без встановлення, але для додавання у свій продукт знадобиться React-проєкт.
Використання та ліцензія
Код BenDay поширюється за ліцензією MIT. Для використання чужих логотипів і зображень потрібні відповідні права.
Перед використанням перевірте актуальні умови на сайті автора.Схожі ресурси
Cursor Lab — налаштування курсорів для вебсайтів
Безкоштовна майстерня з 28 курсорами для вебсайтів, живим налаштуванням параметрів і копіюванням коду JavaScript, React та CSS.
Movin Easings – редактор кривих анімації
Добірка easing-функцій із редактором cubic-bezier, переглядом руху та прикладами коду для вебанімації.