Кастомный курсор мыши¶

Кастомный курсор — это пользовательский указатель мыши, заменяющий стандартный курсор операционной системы или браузера. Кастомные курсоры применяются в интерфейсах программ, веб-сайтов и игр для визуальной идентификации бренда, повышения удобства навигации или создания художественного оформления. Реализация курсора зависит от среды: для веб-страниц используются CSS-свойства, для десктопных приложений — системные API, для игр — собственные движки.

¶Способы создания кастомных курсоров

¶В веб-разработке

Самый распространённый способ — CSS-свойство cursor с указанием на изображение. Браузер поддерживает форматы PNG, GIF, SVG и CUR (специальный формат Windows-курсоров). Синтаксис:

``css .element { cursor: url("cursor.png"), auto; } ``

Второй аргумент задаёт резервный курсор, если изображение не загрузилось. Рекомендуется указывать размеры изображения — например, url("cursor.png") 16 16, auto, где 16 16 — координаты точки захвата (hotspot) относительно левого верхнего угла картинки. Стандартные размеры курсоров — 16×16, 24×24 и 32×32 пикселя.

Для анимированных курсоров используется формат .ani (анимированный курсор Windows) или GIF-анимация, хотя GIF в CSS-курсорах поддерживается не во всех браузерах. Альтернатива — скрыть системный курсор через cursor: none и отрисовать собственный указатель средствами JavaScript и Canvas или библиотеками вроде jQuery Custom Cursor. Такой подход даёт полный контроль над поведением: плавность движения, магнитные эффекты к интерактивным элементам, смену вида при наведении.

¶В десктопных приложениях

В Windows кастомные курсоры создаются как файлы .cur (статические) и .ani (анимированные). Их можно сгенерировать из изображений с помощью специализированных утилит — Axialis Cursor Workshop, RealWorld Cursor Editor, CursorFX. Процесс включает импорт растрового изображения, задание горячей точки, настройку масштабирования и экспорту в нужный формат. Установленный курсор применяется через «Параметры мыши» в панели управления Windows или через реестр (HKEY_CURRENT_USER\Control Panel\Cursors).

В Linux кастомные темы курсоров оформляются в формате Xcursor: набор PNG-изображений сопровождается файлом конфигурации, определяющим размеры и задержки анимации. Тема устанавливается через настройки оконного менеджера или утилиту xcursorgen.

В macOS системные курсоры защищены SIP (System Integrity Protection), поэтому их прямая замена ограничена; для пользовательского оформления применяются сторонние утилиты, изменяющие тему курсора целиком.

¶В играх

Игровые движки (Unity, Unreal Engine, Godot) позволяют использовать собственные текстуры курсора, отрисовываемые поверх сцены. Курсор в игре — это, как правило, спрайт, позиция которого обновляется по координатам мыши, а поведение (вид, размер, анимация) задаётся скриптом. Такой подход обеспечивает полную синхронизацию указателя с художественным стилем проекта.

¶Требования к изображениям курсора

Для веб-курсоров критичен вес: тяжёлые изображения увеличивают время загрузки страницы. Оптимальный размер PNG-курсора — до 10–20 КБ. Многие дизайнеры растрируют курсоры в несколько размеров для ретина-дисплеев, где стандартные 16×16 выглядят размытыми.

¶Практические особенности

При создании кастомных курсоров важно учитывать несколько моментов. Во-первых, доступность: полностью скрытый системный курсор (cursor: none) затрудняет навигацию пользователям с моторными нарушениями, поэтому такой приём применяется осторожно. Во-вторых, контраст: курсор должен быть виден на любом фоне интерфейса, для чего часто используется белая обводка или тень. В-третьих, поведение на мобильных устройствах — там курсор отсутствует, поэтому кастомизация имеет смысл только для десктопных сценариев.

В российских веб-проектах кастомные курсоры чаще всего встречаются в портфолио дизайнеров, на сайтах игровых студий и в промо-страницах брендов. Популярные библиотеки для веба — custom-cursor.js, cursor.js и аналогичные мини-плагины, упрощающие реализацию магнитных и анимированных указателей.

Источники:

• MDN Web Docs. CSS cursor property
• W3C CSS Basic User Interface Module Level 4
• Microsoft Learn. Custom Cursors (Windows)
• X.Org Foundation. Xcursor specification
• Axialis Software. Cursor Workshop documentation