Как добавить свой курсор и не испортить ссылки и кнопки
Кастомный курсор уместен как небольшой фирменный акцент на портфолио, но не должен заменять смысл интерфейса. Готовый MOD-012 рисует отдельное кольцо поверх системного указателя, реагирует на ссылки и кнопки и не запускается на устройствах без настоящего hover. Если движение в системе уменьшено, эффект тоже отключается — сайт остаётся полностью рабочим.
Короткий ответ
Используйте курсор как украшение, а не навигацию. Все кнопки и ссылки обязаны оставаться понятными, если мод не загрузился.
Когда эффект работает
Лучшие места — студийное портфолио, промостраница события, галерея или один экспериментальный экран. В магазине, длинной форме и личном кабинете движение быстро становится помехой.
MOD-012 уже собран и проверен. Он работает на всей странице, поэтому CSS-класс секции не нужен. Второй похожий пункт, MOD-153, добавляет подпись у указателя и пока остаётся планом.
Что не делать
- не ставить важную подсказку только рядом с курсором;
- не увеличивать задержку настолько, чтобы кольцо отставало от клика;
- не включать постоянное движение при
prefers-reduced-motion; - не считать телефон «неподдерживаемым» — там просто остаётся обычный интерфейс;
- не подключать два курсора одновременно.
Проверка
Пройдите все ссылки мышью и клавиатурой. Убедитесь, что кольцо не перехватывает
клики (pointer-events: none), не закрывает поля формы и исчезает при уходе
мыши из окна. Затем полностью удалите код: страница должна выглядеть законченной
и без него.
Это лучший критерий декоративной модификации: она усиливает дизайн, но не держит его смысл в заложниках.