Эффект проявления под курсором — вязкие пятна открывают второй слой

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

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

Это SVG-маска из кругов. Круги пропускают через фильтр «goo»: сначала размытие, потом резкий контраст по прозрачности. Близкие капли от этого склеиваются в одно пятно с мягкими, будто жидкими краями. Эффект сделан по мотивам «Smudge Revealer» от Codegrid, но без GSAP.

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

• Первый экран с загадкой: крупное слово сверху, а главный посыл спрятан под ним.
• Промо и акции: «сотрите и узнайте скидку».
• Портфолио: под тёмным слоем — фото или видео работы.

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

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

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

Разметка — блок с двумя слоями. Проявляемый слой помечен data-smudge-reveal и лежит поверх основного, маску на него скрипт надевает сам:

<section class="smudge">
  <div class="smudge__top"><p>Ищите</p></div>
  <div class="smudge__under" data-smudge-reveal><p>Скрытый текст</p></div>
</section>

createSmudgeReveal(document.querySelector('.smudge'), { size: 0.2, grow: 2 });

Под пятнами может быть что угодно: текст, фото, видео.

Настройки

• Размер пятен — насколько крупные капли оставляет быстрое движение.
• Отставание — как быстро след догоняет курсор. Чем меньше, тем длиннее и шире след.
• Разрастание — во сколько раз капля раздувается после того, как упала.
• Время роста и время таяния — сколько капля раздувается и сколько потом исчезает.
• Слипание — насколько охотно соседние капли сливаются в одно пятно.

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

Оба слоя — обычный текст, и скринридер читает их целиком, ничего стирать не нужно. Если в системе включено «Уменьшить движение», следа нет. Когда все капли растаяли, скрипт засыпает до следующего движения мыши. Фильтр размытия довольно тяжёлый, поэтому на очень больших экранах уменьшите время таяния: тогда капель одновременно будет меньше.

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

Работает ли на телефоне? Да, пятна рисует палец. Если вести пальцем вверх-вниз, страница прокручивается: для рисования проводите в стороны.

В каких браузерах работает? В современных Chrome, Edge, Safari и Firefox: нужна поддержка CSS-маски со ссылкой на SVG.

Нужен ли GSAP, как в оригинале? Нет, анимацию капель считает сам скрипт.