Формы, которые приятно трогать: jelly ui и мягкая физика интерфейсов

Заходишь на сайт, заполняешь форму логина, и кнопка «Войти» просто сидит на месте. Мёртвая. Статичная. Как кнопка на старой клавиатуре.

А теперь представь: нажал — кнопка слегка прогнулась, будто желе, отпустил — пружинит обратно. Чекбокс при активации мягко заполняется, а слайдер едет с приятным сопротивлением.

Непривычно? Зато запоминается.

Что такое jelly ui

По сути это набор веб-компонентов, которые оборачивают стандартные <input>, <button>, <checkbox> и другие HTML-элементы формы. Jelly UI не заменяет нативные контролы, а добавляет к ним мягкую физику.

Главная фишка — нулевые зависимости. Подключаешь один скрипт и получаешь десятки кастомных элементов с мягким откликом.

<jelly-theme mode="auto"> <jelly-button variant="mint">Опубликовать</jelly-button> </jelly-theme>

Всё. Никаких React, Vue или Tailwind. Чистый HTML с эффектами.

Как работает эффект мягкого тела

Здесь начинается самое интересное. Вместо того чтобы перерисовывать элементы с нуля, Jelly UI берёт нативный контрол и добавляет к нему слой физики. Деформация, пружинение, сопротивление — всё это через CSS и JavaScript, встроенные в сами компоненты.

ТРАДИЦИОННЫЙ ПОДХОД          JELLY UI
───────────────────          ────────
┌─────────────┐              ┌─────────────┐
│ HTML input  │              │ HTML input  │
│    [___]    │              │    [___]    │
└─────────────┘              └──────┬──────┘
                                   │
                             ┌─────▼─────┐
                             │  Физика   │
                             │ (деформация,│
                             │ пружины)  │
                             └───────────┘
                                   │
                             ┌─────▼─────┐
                             │ Jelly     │
                             │ контрол   │
                             └───────────┘

Браузер по-прежнему видит обычный <input>. Скринридеры работают. Семантика на месте. Но пользователь получает тактильный отклик, который обычно ассоциируется с нативными приложениями.

Что умеет библиотека

Авторы заявляют поддержку 40+ элементов форм. Из основного:

• Кнопки — с вариантами вроде primary, secondary, mint и других
• Поля ввода — text, email, password с анимациями фокуса
• Чекбоксы и радио — с мягким переходом состояний
• Слайдеры — с плавным перемещением
• Переключатели — с пружинящим эффектом

ПОДДЕРЖИВАЕМЫЕ ЭЛЕМЕНТЫ
──────────────────────
Кнопки:     [●]  Чекбоксы:   [✓]
Поля:       [_]  Радио:      ( )
Слайдеры:   ━●━  Тоглы:     [==]
Селекты:    [▾]  Свитчи:    ◐

Отдельно радует поддержка тёмной темы и направления текста справа налево. Плюс цветовые токены соответствуют стандарту WCAG AA.

Когда это полезно

Форма входа — кнопка «Войти» с мягким нажатием создаёт ощущение отзывчивости. Пользователь понимает: система среагировала.

Оформление заказа — этапы с прогрессом, где слайдер выбора количества плавно двигается, добавляют веса процессу.

Настройки профиля — тоглы и чекбоксы с физикой воспринимаются как реальные переключатели.

Дашборды — панели с фильтрами, где много контролов. Мягкая физика объединяет их визуально.

Подводные камни

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

Уместность. В критически важных формах, например в медицине или финансах, лишняя анимация может отвлекать. Интерфейс должен быть предсказуемым.

Привычка. Не все оценят «желе» на кнопке. Кто-то нажмёт и удивится, что произошло.

Внешний вид. Если у тебя уже есть дизайн-система с кастомными контролами, Jelly UI может конфликтовать визуально.

Моя оценка

Jelly UI — это не замена продуманному дизайну. Это усилитель.

Если у тебя стандартная форма без изысков и хочется добавить жизни, библиотека даёт быстрый результат почти без настройки. Если продукт сложный и у команды уже есть дизайн-система, стоит подумать, нужен ли ещё один слой абстракции.

Практический вывод: Jelly UI подходит для лендингов, портфолио и MVP, где важна тактильность без кастомной разработки. Не подходит для энтерпрайза и высоконагруженных форм, где важнее стабильность и предсказуемость.

Формы — это то, с чем пользователь взаимодействует постоянно. Сделать их приятнее — не роскошь, а забота. Вопрос лишь в мере.

Ссылки

• Jelly UI — официальный сайт — проект с мягкой физикой для нативных HTML-контролов