Prop For That: CSS-свойства для отслеживания курсора и скролла без JavaScript

Если вы когда-нибудь хотели стилизовать элемент в зависимости от того, где находится курсор мыши, или анимировать что-то в ритме скролла, вам приходилось писать JavaScript. Но теперь появился Prop For That — утилита, которая экспортирует браузерные события в CSS-свойства (custom properties). Это зна

Prop For That создаёт «живые» CSS-свойства на основе того, что браузер обычно не показывает CSS: позиция курсора (X, Y), значения прогресса, некоторые состояния форм, текущее время, скорость скролла. Инструмент написан на JavaScript, но его задача — передать данные в CSS, чтобы стили могли реагировать на них декларативно.

Как работает Prop For That

Идея проста: скрипт отслеживает нужные события (mousemove, scroll, time, input и т.д.) и обновляет CSS-переменные на корневом элементе или на указанном контейнере. Вы задаёте конфигурацию: какие свойства отслеживать, с какой частотой обновлять. В ответ получаете набор CSS-свойств, которые можно использовать прямо в стилях.

Например, чтобы отслеживать позицию курсора, вы подключаете скрипт и в CSS пишете: css body { background: hsl(var(--cursor-x, 0) 50% 50%); } Теперь фон меняется в зависимости от того, где находится мышь. Без JS в CSS, без обработчиков событий в разметке. Всё чисто и декларативно.

Чем Prop For That отличается от обычного подхода?

Раньше для таких эффектов приходилось писать JS-обработчик, который менял стили через DOM или CSS-переменные. Prop For That делает это за вас, предоставляя готовый набор переменных и оптимизируя производительность (например, используя requestAnimationFrame для сглаживания обновлений). Это не замена JS, а мост между событиями и CSS.

Технические подробности

Prop For That — это небольшая JS-библиотека, которая не имеет зависимостей. Она работает в современных браузерах (Chrome, Firefox, Safari, Edge). Установка через npm или CDN. Поддерживаемые «пропсы»: cursor (x, y, relative), scroll (velocity, direction, progress), time (current, elapsed), form (value, validity, touched), intersection (visibility ratio).

Каждый проп настраивается: можно задать имя CSS-переменной, диапазон значений, частоту обновления. По умолчанию переменные имеют префикс --prop-, например --prop-cursor-x. Для скролла доступны --prop-scroll-velocity, --prop-scroll-direction и другие.

Как использовать Prop For That для отслеживания скролла?

Один из самых популярных сценариев — анимация элементов при скролле. С Prop For That вы можете сделать это без Intersection Observer или ScrollTrigger. Например, чтобы менять прозрачность заголовка в зависимости от скорости скролла, достаточно написать: css header { opacity: calc(1 - var(--prop-scroll-velocity, 0) 0.1); } Теперь при быстром скролле заголовок становится полупрозрачным. Или можно отслеживать направление скролла и показывать/скрывать навигацию.

Кого затронет и как

Prop For That в первую очередь полезен фронтенд-разработчикам и дизайнерам, которые хотят создавать интерактивные интерфейсы без сложного JS. Дизайнеры могут прототипировать анимации, реагирующие на движение мыши, прямо в CSS. Это снижает порог входа для создания эффектов, которые раньше требовали знания JavaScript.

Для продакшена стоит учитывать, что библиотека добавляет ~5 КБ (минифицировано) и требует инициализации. Но производительность хорошая благодаря оптимизациям. Если вы используете React или Vue, можно интегрировать её как хук или плагин.

Какие ограничения у Prop For That?

Как и любой инструмент, Prop For That не лишён недостатков. Во-первых, это дополнительный JS-файл, хоть и небольшой. Во-вторых, для сложных анимаций может потребоваться тонкая настройка частоты обновления, чтобы избежать просадок FPS. В-третьих, библиотека не решает проблему кросс-браузерной совместимости для старых браузеров (IE11 не поддерживается). Но для современных проектов это отличное решение.

Что будет дальше

Prop For That — это концепция, которая может развиваться. Возможно, появятся браузерные API, которые сделают такие вещи нативными (например, CSS Scroll-Linked Animations уже в разработке). Но пока это отличный способ расширить возможности CSS без утяжеления кода.

Итог

Prop For That — это инструмент, который даёт CSS суперсилу: видеть то, что происходит в браузере, и реагировать на это. Если вы хотите делать интерфейсы живыми, но не хотите писать много JS, попробуйте эту библиотеку. Она простая, лёгкая и открывает новые горизонты для CSS.