VIBEUI

Beautiful UI — 21 компонент для ai-интерфейсов Сайт · GitHub · бесплатно · React + Tailwind Что это: небольшая, но очень аккуратно сделанная библиотека всего, через что агент общается с человеком. В ней есть индикаторы загрузки и рассуждений, потоковый ответ с источниками, карточка «агент спрашивает разрешения», вызовы инструментов в виде чипов, статусы задач, поле ввода с @-упоминаниями и выбором модели, таблица с правками от AI, панель выделения текста «улучшить / сократить», экран агента. Зачем дизайнеру: паттерны для AI-продуктов ещё только складываются, и каждый рисует их по-своему. Здесь собран почти полный комплект ai-интерфейса в одном стиле. #components #react #shadcn - - - - - - - - - - - - - - ❖ VIBEUI

Transitions.dev — 43+ готовых микроанимаций для интерфейса Сайт · GitHub · есть бесплатная версия · CSS, React Что это: библиотека интерфейсных компонентов с микроанимациями. Всё можно скопировать вручную или подключить агенту как скилл. Ещё есть агент-ревьюер: он проверяет анимации в проекте, ставит оценку от 0 до 100 и предлагает исправления. Зачем дизайнеру: агенты почти никогда не добавляют нормальную анимацию сами, и интерфейс получается дёрганым: всё появляется и исчезает мгновенно. Со скиллом агент берёт готовые компоненты и правила, а не придумывает анимацию на ходу. #components #skills #animation - - - - - - - - - - - - - - ❖ VIBEUI

Liquid Metal — анимированная хромированная обводка для кнопок Сайт · GitHub · бесплатно · React Что это: эффект жидкого металла вокруг кнопки, чипа или иконки. Обводка переливается в реальном времени, отражается на соседних элементах и реагирует на курсор. Есть три пресета: радужный хром, серебро и золото. Зачем дизайнеру: для одной главной кнопки на экране. Металл сразу выделяет её среди остальных и при этом не выглядит яркой, в отличие от полной заливки. #shaders #buttons #react - - - - - - - - - - - - - - ❖ VIBEUI

Mesurer — линейки, отступы и комментарии прямо поверх живого сайта Сайт · GitHub · бесплатно · Chrome-расширение, React Что это: панель инструментов, знакомых по Figma, только работает она на настоящей странице в браузере. Можно кликнуть по элементу и увидеть его размеры и стили, замерить расстояние между блоками, включить пиксельные линейки и направляющие. Ещё можно рисовать поверх интерфейса, оставлять комментарии и вставлять скриншоты, а потом отдать всё это агенту с точной привязкой к элементам. Работает как расширение для Chrome на любом сайте или встраивается в свой проект. Зачем дизайнеру: когда макет уже превратился в код, проверять качество приходится в браузере. Mesurer позволяет делать это привычными инструментами: замерил отступ, увидел, что он 14 вместо 16, отметил прямо на …

Ripple — шейдерный эффект перехода Сайт · GitHub · бесплатно · React + WebGL Что это: эффект смены картинки. Нажимаешь в любую точку фото, от неё расходится светящаяся волна с радужным краем, и за ней проступает второе изображение. Повторное нажатие возвращает всё обратно, плавно и без рывков. Толщину волны, количество ряби, свечение, силу искажения и скорость можно покрутить в панели прямо на сайте. Зачем дизайнеру: для галерей, портфолио, «было / стало» и переходами между страниц #shaders #animation - - - - - - - - - - - - - - ❖ VIBEUI

Procedural Sounds — генератор звуков для интерфейса Сайт · GitHub · бесплатно Что это: сервис генерирует короткие звуки для интерфейса: нажатие, наведение, переход, успех, ошибка, уведомление. Выбираешь категорию, слушаешь прямо в браузере и забираешь понравившийся файлом или одной строкой кода. Пока бета. Зачем дизайнеру: Здесь можно за пару минут собрать свой набор звуков для продукта #sounds - - - - - - - - - - - - - - ❖ VIBEUI

beUI — 100+ анимированных компонентов, блоков и графиков для React Сайт · GitHub · бесплатно · React + Tailwind Что это: большая библиотека интерфейсных деталей с пружинной анимацией: • кнопки, табы, свитчи, тултипы, аккордеон; • модалка, которая меняет высоту при переходах внутри; • Dynamic Island как на iPhone, док как в macOS, командное меню; • ввод кода из SMS, свайпы в списках, переключение темы с эффектом шторки. • компоненты AI-чатов (сообщения, поле ввода, карточка подтверждения) • графики Зачем дизайнеру: когда нужен не один эффект, а целый набор деталей, которые выглядят как одна система. Удобно собрать из них продуктовый интерфейс целиком и не смешивать разные библиотеки. #components #shadcn #react #animation - - - - - - - - - - - - - - ❖ VIBEUI

Wallet Animations —компоненты анимаций и прототипов для Telegram-приложений Сайт · GitHub · бесплатно · React Что это: Внутри отдельные компоненты с анимациями (кнопки, стеклянные панели, переходы между экранами) и целые прототипы: онбординг, кошелёк, трейдинг, навигация. Интерфейс сам подстраивается под платформу: на iPhone у него iOS-плавность, размытия и скругления, на Android — Material. Светлая и тёмная темы берутся прямо из Telegram. Зачем дизайнеру: если делаешь мини-приложение для Telegram. Можно забрать готовые паттерны, а не собирать их с нуля. #components #animation #react - - - - - - - - - - - - - - ❖ VIBEUI

Wallet Animations —компоненты анимаций и прототипов для Telegram-приложений Сайт · GitHub · бесплатно · React Что это: Внутри отдельные компоненты с анимациями (кнопки, стеклянные панели, переходы между экранами) и целые прототипы: онбординг, кошелёк, трейдинг, навигация. Интерфейс сам подстраивается под платформу: на iPhone у него iOS-плавность, размытия и скругления, на Android — Material. Светлая и тёмная темы берутся прямо из Telegram. Зачем дизайнеру: если делаешь мини-приложение для Telegram. Можно забрать готовые паттерны, а не собирать их с нуля. #components #animation #react