Kokonut UI: анимированные компоненты React, примеры и настройка

С чего начать

Kokonut UI распространяет компоненты исходниками: их добавляют в React-проект, а затем меняют под свои задачи. Ниже работают компоненты из официального открытого репозитория, а не похожие CSS-имитации.

Перед вами 12 самостоятельных примеров и составной сценарий. Можно нажимать, менять параметры, сравнивать оформление и открывать исходники прямо здесь. Все операции учебные: формы ничего не отправляют, кнопки ничего не публикуют, выбранное время не создаёт напоминание.

В каждом разделе есть переключение оформления и остановка демонстраций. Кнопка сброса возвращает исходное состояние примера, «Код» показывает установку и JSX с выбранными параметрами, «Исходник» открывает оригинальный TSX.

Оболочка, русские подписи, настройки и учебные сценарии подготовлены для этой статьи. Компоненты взяты из Kokonut UI; авторские заголовки и MIT-лицензия сохранены. Некоторые встроенные подписи оставлены на английском, чтобы не менять исходники.

Кнопки и обратная связь

Четыре разных повода для анимации. Сравните подтверждение действия, защиту от случайного нажатия и чисто декоративный эффект. Particle Button показывает ход операции; Hold Button требует удержания; Slide to Confirm использует направленный жест; Gradient Button выделяет действие цветом.

Начните с Particle Button: нажмите кнопку, затем откройте настройки и выберите «Ошибка». Хорошая обратная связь должна одинаково понятно объяснять успех и неудачу. Удержание и перетаскивание проверяйте также с клавиатуры.

Текст, который меняется

Анимация может привлечь внимание или скрыть ответ до клика. Dynamic Text позволяет сравнить морфинг, расшифровку и смену слов; Spoiler Text оставляет решение об открытии читателю. Введите собственное слово и посмотрите, остаётся ли заголовок читаемым.

Не помещайте единственную копию важного сообщения в сменяющийся текст. Скрытый ответ в спойлере уже находится в браузере: этот эффект не защищает конфиденциальные данные.

Ввод, который можно почувствовать

Потяните за уровень жидкости, прокрутите барабан и нарисуйте линию. Liquid Slider помогает оценить количество, Wheel Picker выбирает время, Signature Pad принимает рисунок. Важны не только внешний вид, но и точность, обратная связь и управление на сенсорном экране.

Для точного уровня жидкости есть числовое поле в настройках. На холсте используйте произвольные штрихи, а не настоящую подпись: это учебная демонстрация, не система электронной подписи. Undo отменяет штрих, Clear очищает поле.

Карточки и навигация

Посмотрите на пространственный переход и переключение панелей. Flick Card показывает две стороны карточки, Smooth Tab переключает связанные представления. Попробуйте мышь, Tab, Enter и стрелки; на сенсорном экране проверьте жесты.

На лицевой стороне карточки должно оставаться достаточно смысла без переворота. Во вкладках отдельно проверьте самый длинный текст: эффект не должен обрезать содержание или неожиданно сдвигать соседние элементы.

Живой фон, спокойный контент

Сколько движения нужно первому экрану? В Background Paths меняйте плотность линий и скорость, пока текст остаётся главным. Проведите курсором по фону и сравните результат на светлой и тёмной поверхности.

Нулевая скорость останавливает течение линий, но для полного выключения демонстрации используйте «Остановить». После продолжения внутреннее состояние начнётся заново; выбранные настройки сохранятся.

А теперь компоненты вместе

Отдельный эффект легко полюбить. В реальном интерфейсе важнее, чтобы он не спорил с соседними элементами. В этой учебной панели соединены Smooth Tab, Particle Button и Slide to Confirm: сначала проверка сохранения, затем намеренное подтверждение.

Вместо сервера используется задержка, а завершение остаётся внутри страницы. Для рабочего проекта эти обработчики нужно заменить реальными запросами и показывать успешное состояние только после успешного ответа.

Как перенести компонент в проект

Kokonut UI подключается через shadcn CLI: команда копирует исходники и добавляет зависимости. Это не универсальный скрипт для любого HTML. Подготовьте React-проект с Tailwind CSS по официальной инструкции установки.

1. Выберите один компонент. Не переносите всю витрину: начните с конкретной задачи.
2. Добавьте исходник. Во вкладке «Код» есть команда установки и JSX с выбранными настройками.
3. Подключите реальные действия. Замените учебную задержку запросом к своему API, обработайте ошибку и повторное нажатие.

npx shadcn@latest add https://kokonutui.com/r/particle-button.json

Если сайт работает на WordPress

Мастерскую можно собрать отдельным React-приложением и подключить через плагин. Здесь разделы с примерами изолированы во фреймах, а основной текст и заголовки остаются в статье. Стили Tailwind внутри примеров не должны изменять меню, формы и другие публикации сайта.

После переноса обязательно проверьте реальную тему, навигацию, высоту встроенных разделов и мобильное управление. Успешный запуск отдельного приложения ещё не означает правильную интеграцию в сайт.

Подойдёт ли вам эта библиотека?

Проверка перед внедрением

• Результат можно понять без анимации.
• Длинный русский текст не ломает блок.
• Действие работает с клавиатуры.
• На телефоне удобно нажимать и прокручивать.
• Ошибки не выглядят как успех.
• Движение можно уменьшить или остановить.

Здесь использованы открытые компоненты, а не платные блоки Pro. Условия выбранного компонента сверяйте на официальном сайте Kokonut UI. Изучить реализацию и историю изменений можно в репозитории проекта.

Автор компонентов: Dorian Baffier / Kokonut UI. Использован снимок репозитория d33a196. Исходники распространяются под MIT-лицензией; изменения в вашей копии компонентов потребуется поддерживать самостоятельно.