Активируем вибрацию на телефоне в вебе — и удивляем наших клиентов.

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

📱 Что такое вибрация в вебе?

Это возможность запустить виброотклик на поддерживающем устройстве (обычно Android-смартфоны), используя Vibration API. Всё просто:

navigator.vibrate(200); // вибрация 200 миллисекунд

✨ В чём изюминка?

Делает интерфейс ощутимым — особенно на мобильных,
Добавляет эмоциональную реакцию на действие,
Вызывает вау-эффект — ведь многие не знают, что так можно,
Создаёт дополнительный уровень фидбека.

🛠 Где можно использовать

При открытии/закрытии попапа,
При ошибке или валидации формы,
При нажатии кнопки или action’а,
При успешном действии (например, «Скопировано!»),
В играх или интерактивных элементах.

🔧 Можно настраивать

Вы можете задавать любую вибрационную схему:

navigator.vibrate([100, 50, 100]); // вибрация-пауза-вибрация
navigator.vibrate([300, 100, 300, 100, 100]); // сложный паттерн

⚠️ А что по поддержке?

Работает на большинстве Android-устройств в Chrome, Edge, Samsung Internet,
iOS не поддерживает Vibration API в Safari,
Лучше использовать как дополнение, а не основной способ фидбека.

✅ Как проверять

Откройте DevTools → Sensors → «Emulate touch screen» и тестируйте прямо в браузере на Android.

📝 Вывод

🎯 Вибрация — простой способ сделать ваше приложение ощутимым и уникальным. Она:

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