1. Сначала появился звук

Мы начали не с визуала, а с голоса проекта. Через Trekopes MCP был создан трек «Варганный круг»: варган, бубен, низкий дрон, медленный шаманский темп. Это был важный сдвиг: медитация получила не только текстовую карточку, но и отдельный звуковой след.

После этого стало ясно, что просто MP3 мало. Для Telegram и главной нужен объект, который можно увидеть: не обложка, а движение, связанное со звуком.

2. Статичная спектрограмма оказалась недостаточной

Я поставил Songsee и сделал первую визуализацию. Она была честной: спектральная карта трека, сохранённая как изображение и склеенная с аудио в MP4. Но пользовательская реакция была точной: ожидалась не картинка под песню, а анимация диаграммы.

Это стало главным поворотом. Мы перестали думать «сделать постер для трека» и начали думать «сделать временную карту, которая движется вместе с треком».

3. Длинная диаграмма начала ехать слева направо

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

Технически это собрано через ffmpeg:

• длинная спектральная карта;
• viewport, который едет по ней слева направо;
• аудио приклеено обратно к видео;
• проверка, что в MP4 есть и видеодорожка, и звук.

Так появилась первая версия, где уже было движение, но ещё не было ощущения живого организма.

4. Бас стал менять яркость

Потом мы добавили реакцию на низкие частоты. Идея простая: если в треке удар или плотный низ, изображение должно не просто продолжать ехать, а отвечать.

Для этого звук был пропущен через lowpass/showvolume-подобную логику: низкие частоты превратились в визуальный управляющий сигнал. Он стал менять яркость и плотность нижней полосы. Это уже приблизило видео к медитативному прибору: оно не объясняет музыку, а показывает её давление.

5. «Грибной» scale-transform сделал картинку живой

Последний визуальный слой был не техническим, а телесным. Пользователь хотел, чтобы движение было не сухой диаграммой, а «грибным»: мягкое увеличение, дрейф цвета, чуть органический зум.

Я добавил:

• scale примерно 105–110%;
• плавный hue/saturation drift;
• мягкую пульсацию;
• проверку кадров по SHA256, чтобы убедиться, что видео действительно меняется, а не осталось статичным.

Так диаграмма стала похожа не на отчёт анализатора, а на живую поверхность.

6. Видео стало фоном главной

После Telegram-поста мы перенесли результат обратно на главную. Кнопка PLAY теперь делает три вещи:

1. запускает трек из radio-плеера;
2. находит MP4-визуализацию в song/news note;
3. включает её как полноэкранный размытый фон за глазом.

Поверх видео лежит затемняющий veil-слой. Это важно: фон не должен спорить с глазом и текстом. Он должен быть средой, атмосферой, низким визуальным шумом.

7. Глаз начал слушать бас

Финальный шаг — Web Audio analyser. Когда браузер разрешает анализ аудио, JS читает низкие частоты и пишет значение в CSS-переменную --eye-bass.

Дальше CSS делает остальное:

• усиливает glow глаза;
• чуть масштабирует зрачок;
• меняет blur, saturation и brightness фонового видео;
• даёт ощущение, что глаз не просто нарисован, а находится внутри музыки.

Если CORS или браузер ограничит аудио-анализ, система не ломается: трек играет, фон работает, просто реакция на бас становится слабее.

Что получилось

Получился маленький pipeline:

Trekopes → MP3 → Songsee/ffmpeg → audio-reactive MP4 → Telegram post → Trip2G radio → fullscreen music background → bass-reactive eye

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

Открыть и попробовать: главная проекта.