Блог
Сайт, который хочется трогать
Дизайн
25.09.2026

Сайт, который хочется трогать: hover, magnetic buttons, glow, parallax и tactile-интерфейсы

Хороший современный сайт всё чаще воспринимается не как статичная страница, а как физический объект.
Кнопка слегка тянется к курсору. Карточка реагирует на наведение. Свет следует за мышью. Изображение движется медленнее текста. Блок не просто появляется, а как будто имеет вес и инерцию.
Это и есть tactile-интерфейс — интерфейс, который создаёт ощущение отклика на действия пользователя.
Речь не про анимацию ради анимации. Правильные микроинтеракции помогают понять, что элемент интерактивный, усиливают визуальную иерархию, направляют внимание и делают сайт более живым.
Но те же самые эффекты легко превращают интерфейс в аттракцион.
Разберём конкретно, какие tactile-эффекты работают, как их использовать и где проходит граница между качественной интерактивностью и бессмысленным motion-дизайном.

Что такое tactile web design

Tactile web design можно перевести как «тактильный веб-дизайн».
Конечно, пользователь физически не чувствует кнопку через монитор. Но мозг хорошо считывает знакомые физические свойства:
  • вес;
  • сопротивление;
  • инерцию;
  • притяжение;
  • глубину;
  • ускорение;
  • деформацию;
  • реакцию на прикосновение.
Если карточка чуть наклоняется вслед за курсором, мозг воспринимает её как объект.
Если кнопка плавно смещается к указателю, возникает ощущение магнитного притяжения.
Если элемент после движения не останавливается мгновенно, а слегка продолжает движение, появляется ощущение массы.
Именно поэтому правильно настроенная анимация иногда делает обычный интерфейс визуально «дороже» сильнее, чем новая палитра или декоративная графика.

1. Hover — базовый уровень тактильности

Самая простая tactile-интеракция — hover.
И именно её чаще всего делают неправильно.
Типичный вариант:
.card:hover {
transform: translateY(-10px);
}
Элемент резко подпрыгивает вверх. Формально hover есть, но ощущения физического объекта не возникает.
Лучше использовать меньшую амплитуду и правильное ускорение.
.card {
transition:
transform 0.35s cubic-bezier(.2,.8,.2,1),
box-shadow 0.35s ease;
}

.card:hover {
transform: translateY(-4px);
}
Четырёх пикселей часто достаточно.
Главный принцип:
чем крупнее объект, тем меньше должна быть относительная амплитуда движения.
Карточка размером 500 × 400 px не должна прыгать на 20 px. Это выглядит как UI-анимация из шаблона.

Хорошие hover-реакции

Для карточек можно использовать:
  • подъём на 2–6 px;
  • изменение масштаба на 1.01–1.03;
  • появление изображения;
  • движение стрелки;
  • изменение фонового цвета;
  • локальный glow;
  • небольшое изменение изображения внутри контейнера.
Например:
.card img {
transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}

.card:hover img {
transform: scale(1.04);
}
Это воспринимается естественнее, чем увеличение всей карточки.

2. Magnetic buttons: кнопка, которая реагирует до наведения

Magnetic button — кнопка, которая слегка движется вслед за курсором, когда указатель оказывается рядом.
Эффект простой, но очень сильный психологически.
Обычная кнопка реагирует после того, как пользователь навёл на неё курсор.
Магнитная кнопка начинает реагировать раньше.
Она как будто замечает пользователя.

Как работает magnetic button

Алгоритм простой:
  1. получаем координаты курсора;
  2. вычисляем центр кнопки;
  3. определяем расстояние между курсором и центром;
  4. если курсор находится в заданном радиусе, смещаем кнопку;
  5. после ухода возвращаем её в исходное положение.
Условно:
const button = document.querySelector('.magnetic');

button.addEventListener('mousemove', e => {
const rect = button.getBoundingClientRect();

const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;

button.style.transform =
`translate(${x * 0.2}px, ${y * 0.2}px)`;
});

button.addEventListener('mouseleave', () => {
button.style.transform = 'translate(0, 0)';
});
Ключевой параметр здесь — коэффициент 0.2.
Если поставить 0.8, кнопка начнёт бегать за курсором.
Если 0.1–0.25, появляется ощущение лёгкого магнитного поля.

Где использовать

Magnetic buttons хорошо работают для:
  • основной CTA-кнопки;
  • кнопки открытия меню;
  • стрелки перехода;
  • кнопки формы;
  • крупных круглых элементов.
Не нужно делать магнитными все кнопки сайта.
Если десять элементов одновременно пытаются притянуть курсор, эффект перестаёт быть особенным.

3. Glow под курсором

Glow — один из самых простых способов добавить сайту глубину.
Но лучше всего он работает не как отдельный декоративный объект, а как реакция интерфейса на курсор.
Например, вокруг указателя появляется мягкое свечение, которое проходит под карточками и другими элементами.
Технически это можно сделать через радиальный градиент.
.pointer-glow {
position: fixed;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255,255,255,.08) 0%,
rgba(255,255,255,0) 70%
);
pointer-events: none;
transform: translate(-50%, -50%);
}
JavaScript обновляет координаты:
document.addEventListener('mousemove', e => {
glow.style.left = `${e.clientX}px`;
glow.style.top = `${e.clientY}px`;
});

Главная ошибка

Glow делают слишком ярким.
Если пользователь начинает замечать сам круг свечения, эффект уже слишком сильный.
Хороший glow ощущается раньше, чем осознаётся.
Обычно достаточно:
opacity: 0.15;
filter: blur(20px);
или даже меньше.

4. Spotlight внутри карточек

Более аккуратная версия glow — локальный spotlight.
Курсор двигается внутри карточки, а под ним появляется мягкое освещение.
Это особенно хорошо работает в тёмных интерфейсах.
Пример структуры:
.card {
position: relative;
overflow: hidden;
}

.card::before {
content: "";
position: absolute;
inset: 0;

background:
radial-gradient(
400px circle at var(--x) var(--y),
rgba(255,255,255,.10),
transparent 40%
);

opacity: 0;
transition: opacity .3s;
}

.card:hover::before {
opacity: 1;
}
JS передаёт координаты:
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();

card.style.setProperty(
'--x',
`${e.clientX - rect.left}px`
);

card.style.setProperty(
'--y',
`${e.clientY - rect.top}px`
);
});
Так карточка начинает реагировать непосредственно на положение указателя.

5. Tilt: псевдо-3D без WebGL

Следующий уровень — наклон карточки относительно положения курсора.
Курсор слева — карточка немного поворачивается влево.
Курсор сверху — верхняя часть приближается.
Это создаёт ощущение объёма.
Принцип:
const rotateX = (mouseY - centerY) * -0.03;
const rotateY = (mouseX - centerX) * 0.03;

card.style.transform =
`perspective(1000px)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)`;

Главное — не переусердствовать

Хороший диапазон:
2–5 градусов.
Плохой:
15–20 градусов.
Большой наклон напоминает демонстрацию JavaScript-эффекта из 2018 года.
Tilt лучше использовать для:
  • кейсов;
  • продуктовых карточек;
  • постеров;
  • изображений;
  • необычных CTA.
Не стоит применять его к длинному тексту.

6. Parallax: движение с разной скоростью

Parallax создаёт ощущение глубины за счёт того, что разные слои страницы движутся с разной скоростью.
Самый очевидный пример:
  • фон движется медленно;
  • контент — со скоростью страницы;
  • декоративный объект движется быстрее.
Мозг интерпретирует разные скорости как разные расстояния до объектов.

Хороший parallax

Допустим, hero содержит:
  • фотографию;
  • заголовок;
  • небольшой декоративный объект.
При прокрутке можно задать:
фон × 0.3
объект × 0.6
контент × 1
Разница должна быть небольшой.
Parallax становится неприятным, когда элементы начинают разъезжаться по экрану на сотни пикселей.

Хорошее правило

Если пользователь думает:
«О, здесь parallax»,
скорее всего, эффект слишком заметный.
Лучший parallax ощущается как глубина, а не как отдельная анимация.

7. Mouse parallax

Parallax можно связать не только со скроллом, но и с движением мыши.
Например, фон hero-блока смещается на 10–20 px в противоположную сторону от курсора.
JS-логика:
const x =
(e.clientX / window.innerWidth - 0.5);

const y =
(e.clientY / window.innerHeight - 0.5);

element.style.transform =
`translate(${x * 20}px, ${y * 20}px)`;
Это особенно хорошо работает с:
  • абстрактной графикой;
  • 3D-объектами;
  • сетками;
  • световыми пятнами;
  • фоновыми изображениями.
Но плохо работает с интерфейсными элементами, которые пользователь должен точно нажимать.
Интерактивность не должна мешать интерактивности.

8. Inertia: почему мгновенная остановка выглядит искусственно

Реальные предметы имеют массу.
Если толкнуть объект, он не останавливается мгновенно.
В цифровом интерфейсе этого ограничения нет, но мозг всё равно ожидает похожего поведения.
Поэтому движение:
transform: translateX(40px);
часто выглядит механически.
А движение через spring или правильную easing-функцию — естественнее.
Например:
transition:
transform .8s cubic-bezier(.16,1,.3,1);
Эта кривая быстро начинает движение и очень плавно его завершает.
Именно длинный «хвост» движения создаёт ощущение инерции.

9. Smooth scroll и ощущение массы страницы

Обычный браузерный скролл довольно резкий.
Поэтому многие интерактивные сайты используют smooth scrolling.
Но здесь есть важный нюанс.
Слишком сильная инерция превращает прокрутку в борьбу с интерфейсом.
Пользователь прокрутил страницу на 500 px, отпустил колесо, а сайт продолжает ехать ещё секунду.
Это выглядит эффектно первые десять секунд и раздражает следующие пять минут.

Нормальная инерция

Scroll должен:
  • быстро реагировать на ввод;
  • иметь небольшой хвост;
  • не менять ожидаемую дистанцию прокрутки;
  • останавливаться почти там, где ожидает пользователь.
Интерактивность должна усиливать контроль, а не отнимать его.

10. Cursor interactions

Кастомный курсор — один из самых узнаваемых элементов интерактивных сайтов.
Но здесь особенно легко перейти грань.
Плохой вариант:
огромный круг постоянно следует за мышью и перекрывает интерфейс.
Хороший вариант:
курсор меняется только в конкретных контекстах.
Например:
над изображением:
VIEW CASE
над draggable-галереей:
DRAG
над видео:
PLAY
над ссылкой:
небольшое увеличение.
Таким образом курсор становится частью интерфейса.
Он сообщает пользователю, что можно сделать.

11. Cursor follower с инерцией

Если просто привязать кастомный курсор к координатам мыши:
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
он будет двигаться механически.
Гораздо приятнее использовать интерполяцию.
currentX += (targetX - currentX) * 0.12;
currentY += (targetY - currentY) * 0.12;
Каждый кадр курсор проходит только часть оставшегося расстояния.
В результате появляется плавный хвост.
Именно такие мелочи создают ощущение качественной motion-системы.

12. Text hover

Интерактивность не обязательно должна двигать весь блок.
Иногда достаточно текста.
Например, список проектов:
01 Selecty
02 Elaris
03 HorseHub
04 The Opus
При наведении:
  • название слегка смещается;
  • появляется изображение проекта;
  • номер становится прозрачнее;
  • стрелка двигается вправо.
Получается полноценная интеракция практически без декоративных элементов.
Такой подход особенно хорошо работает в портфолио.

13. Image reveal

Другой tactile-приём — появление изображения вслед за курсором.
Например, пользователь наводит курсор на название проекта, а возле указателя появляется превью.
Важно, чтобы изображение не было жёстко приклеено к мыши.
Лучше добавить:
  • задержку;
  • инерцию;
  • небольшой scale;
  • плавное исчезновение.
Сценарий:
hover
↓
preview opacity 0 → 1
scale 0.9 → 1
follow cursor with inertia
mouseleave
opacity 1 → 0
Так interaction ощущается цельным.

14. Elastic hover

Некоторые элементы можно слегка деформировать при движении.
Например, круглая кнопка при быстром движении курсора становится чуть овальной.
Или изображение слегка растягивается по направлению движения.
Здесь используется скорость указателя.
Если:
currentX - previousX
даёт большое значение, значит курсор движется быстро.
Полученную скорость можно использовать в:
scaleX()
skewX()
rotate()
Например:
медленно → scaleX(1)

быстро вправо → scaleX(1.08)

быстро влево → scaleX(1.08) + rotate
Эффект почти незаметный, но хорошо передаёт физику движения.

15. Scroll reveal без банального fade-up

Один из самых заезженных эффектов:
opacity: 0;
transform: translateY(30px);
и затем:
opacity: 1;
transform: translateY(0);
Fade-up сам по себе нормальный. Проблема возникает, когда так появляется абсолютно всё.
Заголовок.
Текст.
Карточки.
Фотография.
Футер.
В итоге анимация перестаёт что-либо означать.

Лучше связать motion с объектом

Фотография может открываться через mask.
Текст — появляться построчно.
Карточки — двигаться с разной задержкой.
Большой номер — масштабироваться.
Линия — физически прорисовываться.
Анимация должна продолжать визуальный язык элемента.

16. Clip-path reveal

Один из самых аккуратных способов появления изображения — маска.
Например:
.image {
clip-path: inset(100% 0 0 0);
transition: clip-path 1s cubic-bezier(.76,0,.24,1);
}

.image.visible {
clip-path: inset(0 0 0 0);
}
Изображение открывается снизу вверх.
Можно использовать:
слева направо
из центра
диагонально
круговой reveal
Такая анимация выглядит гораздо интереснее обычного opacity.

17. Stacking cards

Один из сильных эффектов для длинных страниц — stacking cards.
Карточки последовательно приезжают поверх предыдущих.
При этом старые карточки могут:
  • уменьшаться;
  • становиться прозрачнее;
  • слегка уходить назад;
  • менять blur.
Главная ошибка — оставлять предыдущие карточки слишком заметными.
Если opacity остаётся около 0.5, через пять карточек получается визуальная каша.
Лучше использовать сильную деградацию:
активная карточка: opacity 1

предыдущая: 0.25

ещё ниже: 0.08
Или вообще скрывать дальние карточки.
Stacking работает, когда пользователь должен воспринимать контент последовательно.

18. Sticky-секции

Sticky — ещё один способ добавить ощущение физического пространства без сложного WebGL.
Например:
слева остаётся заголовок,
а справа при прокрутке меняются изображения.
Или изображение закреплено, а поверх него проходят текстовые блоки.
Плюс sticky-подхода в том, что пользователь продолжает управлять интерфейсом обычным скроллом.
То есть интерактивность высокая, а когнитивная нагрузка низкая.

19. Когда motion становится плохим

Есть простой тест.
Спросите:
если убрать эту анимацию, пользователю станет сложнее понимать интерфейс?
Если нет — возможно, это чистая декорация.
Декоративные эффекты допустимы. Но их количество нужно контролировать.
Особенно опасная комбинация:
  • smooth scroll;
  • custom cursor;
  • parallax;
  • magnetic buttons;
  • tilt;
  • background glow;
  • animated gradients;
  • text reveal;
  • floating objects.
По отдельности каждый эффект может выглядеть хорошо.
Одновременно — сайт начинает напоминать техническое демо.

20. Один главный interaction на экран

Практичное правило для tactile-интерфейсов:
на одном экране должен быть один главный интерактивный эффект.
Например:
Hero:
mouse parallax.
Следующий экран:
hover-карточки.
Кейсы:
cursor preview.
CTA:
magnetic button.
Футер:
минимальная реакция ссылок.
Так эффекты не конкурируют друг с другом.

21. Скорость анимации

Одна из главных причин дешёвого ощущения — неправильный timing.
Ориентиры:

Hover

150–350 ms

Кнопка

200–400 ms

Карточка

300–600 ms

Reveal изображения

600–1200 ms

Большая смена секции

800–1400 ms
Но важнее не абсолютное число, а easing.
Линейное движение:
linear
почти всегда выглядит искусственно.
Универсальный вариант:
cubic-bezier(.16,1,.3,1)
Для более драматичных переходов:
cubic-bezier(.76,0,.24,1)

22. Motion должен быть системным

Если одна карточка двигается за 0.2s ease, другая за 0.8s ease-out, а кнопка использует третью кривую, интерфейс начинает ощущаться несобранным.
Лучше создать motion-токены.
Например:
:root {
--motion-fast: 220ms;
--motion-base: 420ms;
--motion-slow: 850ms;

--ease-out:
cubic-bezier(.16,1,.3,1);

--ease-in-out:
cubic-bezier(.76,0,.24,1);
}
И использовать их во всём сайте.
Это такой же элемент дизайн-системы, как цвета или типографика.

23. Не забывайте про mobile

Большая часть cursor interactions на смартфоне вообще не существует.
Нет hover.
Нет указателя.
Нет mouse parallax.
Поэтому tactile-интерфейс должен иметь мобильную альтернативу.
Например:
Desktop:
карточка реагирует на hover.
Mobile:
реагирует на scroll reveal.
Desktop:
cursor preview.
Mobile:
изображение постоянно находится внутри карточки.
Desktop:
magnetic button.
Mobile:
обычный press-scale.
button:active {
transform: scale(.97);
}
На смартфоне такой эффект воспринимается особенно естественно: пользователь действительно касается экрана.

24. Проверяйте prefers-reduced-motion

Не все пользователи хотят видеть активную анимацию.
В CSS существует системная настройка:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Это особенно важно для:
  • сильного parallax;
  • smooth scroll;
  • масштабирования;
  • вращений;
  • постоянного движения фона.
Качественная интерактивность не должна быть обязательной.

25. Производительность важнее эффекта

Самый красивый tactile-сайт перестаёт быть красивым, если работает в 20 FPS.
Лучше всего анимировать:
transform
opacity
Хуже:
width
height
top
left
margin
Потому что первые обычно обрабатываются композитором браузера, а вторые могут провоцировать перерасчёт layout.
Если нужно двигать элемент:
плохо:
left: 20px;
лучше:
transform: translateX(20px);

Практический набор эффектов для обычного лендинга

Не обязательно превращать сайт в Awwwards-проект.
Для большинства коммерческих лендингов достаточно четырёх уровней интерактивности.

1. Глобальный уровень

Лёгкий cursor glow.
Очень слабый.

2. Контент

Scroll reveal через opacity + mask.

3. Карточки

Hover:
translateY(-4px)
+
scale изображения 1.03

4. Главный CTA

Magnetic button.
Этого уже достаточно, чтобы сайт ощущался значительно живее стандартной страницы.

Как понять, что tactile-дизайн работает

Хороший интерактивный интерфейс не заставляет пользователя изучать эффекты.
Он создаёт ощущение:
  • элементы понимают курсор;
  • интерфейс реагирует мгновенно;
  • движение имеет массу;
  • контент находится на разных слоях;
  • нажатия дают обратную связь;
  • сайт ощущается цельным.
При этом пользователь продолжает спокойно:
читать,
скроллить,
нажимать,
заполнять форму.
Если взаимодействие начинает мешать этим действиям, эффект уже работает против интерфейса.

Сайт должен реагировать, а не развлекать

Tactile web design — это не набор модных эффектов.
Magnetic buttons, hover, glow, inertia, parallax и cursor interactions — всего лишь инструменты.
Главное — реакция.
Пользователь двигает мышь — интерфейс отвечает.
Наводит на карточку — карточка показывает, что она активна.
Начинает скроллить — пространство получает глубину.
Подводит курсор к CTA — кнопка реагирует раньше клика.
Нажимает — элемент визуально подтверждает действие.
Из таких маленьких реакций появляется ощущение физического интерфейса.
И здесь особенно хорошо работает принцип:
чем заметнее эффект, тем реже его нужно использовать.
Сильный parallax — один раз.
Magnetic interaction — на главной кнопке.
Cursor preview — в списке проектов.
Glow — едва заметный.
Hover — почти везде, но минимальный.
Хороший tactile-сайт не кричит:
«посмотрите, сколько здесь анимаций».
Он просто ощущается отзывчивым.
Именно поэтому его хочется не только смотреть.
Его хочется трогать.