Открыт к новым проектам и коллаборациям в Q3 2026. Связаться →

2026.06.23 · design · frontend

Машинный растр как визуальный язык

Почему изображения на сайте — не фото, а сетка штрихов: один движок печёт и статику, и интерактив.

Сайт намеренно отказывается от фотографий: ни одного полноразмерного снимка, ни лайфстайла, ни стоковых лиц. Но изображения всё-таки нужны — и вместо фото здесь живёт растр: картинка превращается в сетку вертикальных штрихов, где длина штриха задаётся яркостью исходного пикселя. Светлое рвётся в разрывы, тёмное сливается в сплошные линии.

Это не фильтр поверх фото. Это отдельный визуальный слой, у которого есть один важный принцип — одно ядро на два таргета.

Как это устроено

Вся математика растра живёт в чистом модуле: он сэмплирует картинку в сетку яркостей и выдаёт абстрактные «метки». Дальше два тонких адаптера превращают эти метки либо в инлайновый SVG (на сборке, ноль JS в рантайме), либо в отрисовку на canvas (для интерактивного hero). Один источник правды → статика и интерактив совпадают пиксель-в-пиксель.

ФОТО СЕТКА ЯРКОСТЕЙ ШТРИХИ
Один движок: сетка яркостей → метки. SVG на сборке, canvas в рантайме.

Зачем так

Растр держит сайт честным: изображение есть, но оно «машинное» — данные, а не глянец. У блока с фото появляется характер, при этом в рантайм не уезжает ни лишнего килобайта картинки, ни JavaScript. А там, где нужен живой акцент, тот же движок включает интерактив — и переключатель HUMAN / MACHINE показывает, что под штрихами всё это время лежало настоящее изображение.

Эта заметка — первый пример нового визуального языка блога: растр для образов, SVG-метафоры для идей.