У меня на сайте есть ИИ-дайджест — раз в сутки сервер сам пишет, что произошло, что сломалось и что подозрительно. Но текст надо открыть и прочитать. Захотелось, чтобы состояние сайта было видно сразу — одним взглядом, не читая ничего.

Так появился морфер: небольшой объект в правом нижнем углу. Не иконка и не график, а живая штука, которая дышит, перестраивается и меняет цвет в зависимости от того, как идут дела.

Основа — чужие точки

Отправной точкой стал agent-avatar из открытого Kilo Code: сетка кружков, где «зажжённые» точки образуют симметричную фигуру (идентичность агента). Мне понравилась сама идея — фигура как отпечаток, а не статичная картинка. Я взял геометрию и логику идентичности, а движение и смысл добавил свои.

Первая версия была грубыми квадратами — получилось «хищно и инсектно». Шипы и зубцы. Причина оказалась простой: радиус каждой вершины брался независимым случайным числом, поэтому соседние точки прыгали как попало. Чтобы «гармонизировать», я заменил это на низкочастотные гармоники:

r(θ) = R · (1 + a₁·sin(θ+p₁) + a₂·sin(2θ+p₂) + a₃·sin(3θ+p₃))

Элементы стали гладкими каплями, которые всё ещё меняются от формы к форме, но без колючек. Сейчас сетка — 17×17 с круглой маской, 221 элемент, и каждый морфится процедурно, а не выбирается из набора готовых фигур.

Дыхание и домино

Морфер дышит как сердцебиение: два мягких удара за цикл — точки чуть разгораются и увеличиваются, потом затихают.

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

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

Руками можно потрогать

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

Цвет — это метрики

Самое важное. Цвет палитры берётся из того же дайджеста, что я описал раньше. Я считаю из метрик «здоровье»: доля ошибок 4xx/5xx, занятость диска, загрузка CPU, память. Чем больше плохих метрик — тем краснее и тревожнее морфер. Чем лучше дела — тем зеленее и живее.

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

Один нюанс: сначала «плохая» палитра была почти чёрно-красной, и морфер уходил в темноту — на тёмном фоне его становилось не видно. Пришлось поднять светлоту красных: он остаётся тревожным, но читаемым.

Чему научился

Генерация лучше набора. Как только я перестал перечислять готовые формы и стал их вычислять, пространство вариантов стало бесконечным, а объект — живым.

Сглаживание — это дисциплина. «Хищность» была не стилистикой, а артефактом высокочастотного шума. Низкие частоты — спокойствие.

Обратная связь важнее анимации. Морфер может сколько угодно красиво дышать, но ценность ему даёт связь с реальностью: цвет говорит правду о состоянии сайта.

Ограничение — часть дизайна. Нельзя уйти в чёрное: красивый, но невидимый индикатор бесполезен.

Теперь у сайта есть не только голос, но и лицо. И по этому лицу сразу видно, как у него дела.