Курсор с иконкой — точка, которая раздувается в круг с play и тянется в движении

Что это за эффект

Системный курсор заменяет маленькая тёмная точка, которая мягко следует за мышью. Наведите её на работу: точка раздуется в большой круг, а внутри появится иконка play или стрелка. В движении курсор вытягивается по ходу мыши: чем быстрее движение, тем он длиннее и тоньше. Когда мышь останавливается, он снова становится круглым. Иконка внутри при этом не поворачивается.

Эффект сделан по мотивам курсора на cuberto.com, но без GSAP и библиотек.

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

• Шоурил или видео на первом экране: иконка play сразу говорит, что по клику что-то запустится.
• Сетка проектов в портфолио: стрелка над карточкой зовёт открыть кейс.
• Галереи и слайдеры: курсор с надписью «Листайте» или «Смотреть».

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши фото. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<a href="/showreel" data-cursor-icon="play">…</a>
<a href="/projects/one" data-cursor-icon="arrow">…</a>
<a href="/gallery" data-cursor-text="Смотреть">…</a>

createIconCursor(document.body, { hoverSize: 96, stretch: 0.5 });

Иконки: play, arrow и plus. Вместо иконки можно показать короткую надпись через data-cursor-text. Курсор работает во всей области, которую вы передали первым аргументом: на всём сайте или в одном блоке.

Настройки

• Точка и Круг — размер курсора вне плашек и над ними.
• Инерция — насколько курсор отстаёт от мыши.
• Рост — как плавно он раздувается и сжимается.
• Растяжение — насколько скорость вытягивает курсор. При нуле он всегда круглый.
• Предел растяжения — сильнее этого курсор не вытянется даже при очень быстром движении.
• Скрыть системный курсор — оставить только точку или показывать её вместе с обычной стрелкой.

Доступность и производительность

На сенсорных экранах и при включённом «Уменьшить движение» остаётся обычный курсор, а плашки работают как обычные ссылки. Курсор не перехватывает клики. Двигается только transform, а когда мышь стоит, скрипт засыпает.

Частые вопросы

Можно ли поставить курсор на весь сайт? Да, передайте document.body первым аргументом. Тогда точка заменит курсор везде, а раздуваться будет над всеми элементами с data-cursor-icon или data-cursor-text.

Можно ли поменять цвет? Да, через опции color (круг) и iconColor (иконка и надпись).