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

Развлечение на 15 минут, зашли, вышли... Следующие несколько часов я примерно объяснял кодексу что хочу увидеть и потом наблюдал превью с 1000 и 1 способом неправильного размытия.

1️⃣ Первая версия была на чистом сss — несколько слоёв с backdrop-filter и у каждого своя сила блюра. В теории то оно работало, а вот на практике получились вполне заметные горизонтальные полосы.

2️⃣ Во второй итерации растянул слои, добавил более плавные маски и привязал силу эффекта к скорости скролла. Стало живее, но всё ещё было похоже на несколько аккуратно сложенных фильтров.

3️⃣ Потом появился svg-фильтр: displacement, разделение красного и голубого каналов, немного шума для более «стеклянного» ощущения. Оно было почти как настоящая оптика... почти. Вместо одной странной полосы я получил другую, зато технологически более изощрённую.

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

Поэтому попытка номер 4️⃣ — выкинуты css/svg-композитор и пошли в webgl. Новый подход закатывал всю страницу в текстуру и рисовала эффект поверх неё. Но блюр частично делался средствами css, преломление имитировалось масштабированием, цветовая дисперсия — изменением насыщенности. А, ну и как же я забыл — кодекс заменил все видео на статику. В общем, четвёртая версия хорошо умела выглядеть как решение, пока только пока не начинаешь смотреть внимательнее.

Финальный, пятый 5️⃣, вариант устроен иначе. Сверху и снизу вьюпорта живут два канваса. Они захватывают только нужную область страницы плюс небольшой запас. Дальше изображение проходит три стадии:
— горизонтальный блюр;
— вертикальный блюр;
— финальную сборку, где изображение действительно немного смещается, а красный и синий каналы расходятся относительно зелёного.

При быстром скролле эффект на ведущем крае ненадолго усиливается, держит пик и потом затухает. Если в эту область попадает видео, в текстуру подставляется его текущий кадр — само видео продолжает играть как обычно.

Самое забавное тут — разница между исходной задачей и тем, куда она приехала. Я хотел добавить небольшое размытие на края сайта, а в итоге у меня отдельный webgl2-рендерер, захват страницы, overscan, обработка живого видео, модель скорости скролла, css fallback и react-обертка.

Раз уж время и токены потрачены, то велком всем заинтересованным в гитхаб.
Тут можно покрутить демо или если захочется забрать себе или просто посмотреть код
Все под MIT, буду рад если заиспользуете где-то у себя