Что я хотел сделать

Исходная задача была визуальной: чистая hero-сцена, где одно изображение видно всегда, а второе проявляется только через мягкий след курсора. Не жёсткая hover-лупа. Не обычный before/after slider. Нужен был широкий, плавный, исчезающий reveal, который следует за pointer и оставляет временный след.

Живой результат лежит здесь: страница проекта Mouse Trail Masking Reveal. Отдельное интерактивное демо здесь: открыть live demo.

Видео: Финальное демо реализации от @sergekost.

Публичный репозиторий: sergekostenchuk/mouse-trail-masking-reveal.

Референс был ручным

Идея была вдохновлена manual Figma workflow от @thedesignely. Важным было не копирование файла или чужого бренда, а сама interaction pattern: один слой остаётся стабильным, второй слой проявляется через контролируемую маску.

Видео: Референс @thedesignely, от которого пошла идея layer-mask reveal.

Такие эффекты часто выглядят простыми снаружи и становятся хрупкими при реализации. Изображения должны совпадать. Маска должна быть мягкой. След должен исчезать. Canvas должен оставаться чётким на desktop и mobile. Ползунки должны менять реальные параметры, а не просто двигаться на экране.

Почему получилось два skills, а не один

Первый вывод: frontend-эффект не исправит плохую пару изображений.

Если base image и reveal image не совпадают, cursor trail сразу показывает проблему. Лицо съезжает. Шлем прыгает. Объект на фоне ломает иллюзию. Надёжно спрятать это CSS-полировкой нельзя.

Поэтому package стал связкой из двух skills:

  • image-layer-alignment-validator проверяет, подходят ли два raster layers для compositing;
  • cursor-reveal-hero строит, чинит, настраивает и валидирует интерактивный canvas reveal.

Это и есть архитектура: сначала проверить исходные слои, потом строить interaction.

Главная формула

Эффект держится на простой формуле:

final = baseImage + revealImage * softCursorTrailMask

Видимый canvas каждый кадр рисует base image. Reveal image рисуется в offscreen canvas. Отдельный mask canvas хранит след курсора. Reveal layer обрезается этой маской и затем накладывается поверх base.

Основные части canvas-архитектуры:

canvas / ctx          - видимый результат
maskCanvas / maskCtx  - alpha map следа курсора
revealCanvas / revealCtx - временный reveal слой перед маской
baseImage             - всегда видимый слой
revealImage           - слой, видимый только через маску

Ключевой compositing step - destination-in. Он оставляет только ту часть reveal layer, где у mask есть alpha.

Почему эффект должен быть мягким

Первая версия такого эффекта легко превращается в жёсткий круглый фонарик. Это не то, что было нужно.

За ощущение отвечают параметры:

const settings = {
  radius: 245,
  feather: 0.8,
  fade: 0.028,
  strength: 0.82,
  opacity: 0.78,
  lerp: 0.14,
  idleStrength: 0
};

radius задаёт размер зоны reveal. feather отвечает за мягкость края. fade управляет скоростью исчезновения старого следа. opacity задаёт силу reveal layer поверх base. lerp добавляет инерцию, чтобы маска не была механически приклеена к курсору.

FX panel на demo page нужен именно потому, что эти значения нельзя подобрать только теоретически. Их нужно видеть.

Skill важнее, чем само демо

Демо - это видимый артефакт. Но переиспользуемая часть - это skill package.

В репозитории лежат:

  • два SKILL.md файла;
  • vanilla HTML/CSS/JS starter;
  • notes по canvas compositing;
  • notes по tuning and failure modes;
  • browser validation notes;
  • adapters для разных coding agents;
  • media attribution, privacy и security notes.

Это важно, потому что цель не в том, чтобы сделать одну страницу. Цель - дать coding agent достаточно структуры, чтобы он мог повторить, починить и проверить такой эффект в другом frontend project.

Что я понял

Главный вывод: creative frontend work тоже требует pipeline, а не только вдохновения.

Для этого эффекта pipeline такой:

  1. проверить, можно ли compositing для пары изображений;
  2. собрать canvas compositor;
  3. настроить radius, feather, fade, strength, opacity и momentum;
  4. проверить, что canvas не пустой и pointer movement меняет pixels;
  5. визуально посмотреть результат, потому что smoke checks не доказывают taste.

Это тот же паттерн, который я всё чаще вижу в agent-assisted работе. Хороший skill не просто говорит модели, что делать. Он задаёт sequence, evidence, checks и failure modes.

Mouse Trail Masking Reveal начался как визуальный эксперимент. В итоге он стал маленьким примером того, как хрупкий creative workflow можно превратить в переиспользуемый agent tooling.