Я хотел одну простую вещь: чтобы на втором мониторе тихо играло lo-fi, а за виджетами крутилась уютная анимированная сцена. Готового решения не нашлось — зато нашёлся чужой MIT-проект, у которого я в итоге выкинул главный модуль и собрал из остатков совсем другой продукт. Это девлог о том, что я удалил, что добавил и на каких граблях потанцевал.
Под задачу подходящих инструментов хватало, но каждый закрывал только часть. Wallpaper Engine — живые обои, но без радио. Lofi.co — музыка в браузере, но не обои рабочего стола. Noisli — эмбиент, но без всего остального. Покупать три подписки ради фона под код было жалко, поэтому я полез на GitHub смотреть, что можно собрать самому.
Нашёл meel-hd/lofi-engine под MIT — аккуратный Tauri-проект со встроенным генеративным движком, который синтезировал lo-fi прямо в браузерном рантайме. Идея красивая, но мне быстро стало понятно, что я хочу совсем другого продукта. Так появился форк, который я в итоге назвал LoFiTyan.
Главный pivot: от генерации музыки к настоящему радио
Первое же серьёзное решение оказалось самым спорным — я полностью удалил генеративный движок. Звучит как вандализм над хорошим кодом, но логика простая. Генеративный lo‑fi — это всегда вариация на тему: приятно как технодемо, но через двадцать минут ухо начинает ловить повторяющиеся паттерны, и фокус ломается. А я хотел именно фон для работы, который не отвлекает.
Поэтому вместо синтеза я подключил настоящее интернет‑радио через открытый каталог
radio-browser.info. Это критичный момент, который я специально подчёркиваю: LoFiTyan не генерирует музыку и не имеет никакого отношения к «ИИ‑музыке» — он играет реальные радиостанции, которые ведут живые люди. Я фильтрую каталог по тегам lo‑fi / chillhop / focus / sleep, отдаю пользователю список станций, избранное и медиа‑клавиши. Получилось сотни станций, нулевой вес рантайма на синтез и живой, не зацикленный контент. Бонусом ушла целая пачка кода: аудио‑генерация — сложная и хрупкая штука, а HTTP‑стрим радио надёжен до тривиальности.
Живые обои: зум и точка кадра
Вторая большая фича, которой в оригинале не было совсем, — живые видео‑обои. Технически это видео или картинка‑сцена на фоне всего UI, и тут вылез неочевидный нюанс.
Человек ставит своё видео — вертикальный портрет с телефона, горизонтальный пейзаж, что угодно — а окно приложения может быть любого размера и пропорций. Если просто растянуть видео, субъект (та самая lo‑fi‑тян) уезжает за край или сплющивается. Поэтому я сделал два параметра: зум и точку кадра. Точка кадра — это якорь, вокруг которого видео центрируется и обрезается, так что важная часть сцены остаётся в кадре и на широком ландшафтном окне, и на узком портретном. Реализовано через object-fit: cover плюс object-position, привязанный к выбранной точке, и масштаб через transform: scale(). Звучит просто, но именно эта пара настроек превращает «случайно обрезанное видео» в «обои, которые сидят ровно за виджетами». В комплект я положил дефолтную сцену «LoFi‑тян, осень», чтобы из коробки сразу было красиво.
Бесшовный эмбиент поверх музыки на Web Audio
Третий слой — эмбиент: дождь, гром, лес, костёр, которые накладываются поверх радио и микшируются свободно. Здесь главная боль — бесшовный цикл. Если просто поставить <audio loop>, на стыке конца и начала файла слышен щелчок или микропауза, и мозг моментально это ловит — особенно на дожде.
Решил через Web Audio API: гружу буфер, использую AudioBufferSourceNode с loop = true и выставляю loopStart / loopEnd по точкам нулевого пересечения, а каждый звук идёт через свой GainNode, так что громкости миксуются независимо от радио. Web Audio здесь не «оверинжиниринг ради хайпа», а ровно тот инструмент, который умеет в честный gapless-loop и параллельные источники без отдельного плеера на каждый звук.
Грабли: откат с Svelte 5
Не всё было гладко. Я начинал на Svelte 5 с новыми рунами ($state, $derived) — выглядело свежо и хотелось пощупать. Но на тот момент экосистема вокруг Tauri и часть зависимостей ещё не дозрели до пятёрки: всплывали странные расхождения в реактивности и проблемы сборки, на отладку которых уходило больше времени, чем на сами фичи.
Вывод сделал прагматичный: я делаю продукт, а не витрину последней версии фреймворка. Откатился на стабильную ветку Svelte, и количество необъяснимых багов резко упало. Урок банальный, но болезненный каждый раз: для пет-проекта, который хочется довести до релиза, бери стек, у которого вся цепочка зависимостей уже стабильна, а не самый свежий мажор.
Почему Tauri 2, а не Electron
Тут без интриги. Приложение, которое висит в фоне весь рабочий день, не имеет права жрать память как полноценный браузер. Tauri 2 даёт системный WebView и Rust-бэкенд, поэтому бандл и потребление памяти кратно меньше Electron-аналога. Для «всегда включённого» фонового софта это решающий аргумент. Фронт остался на привычном Svelte + TypeScript + Vite, а тяжёлое и системное ушло в Rust.
Почему open-source
LoFiTyan — MIT, и это не поза. Во-первых, я сам стою на плечах чужого MIT-кода, и закрывать форк было бы попросту некрасиво. Во-вторых, это десктоп-приложение, которое лезет в сеть и крутит фон у вас на машине — мне кажется честным, когда такой софт можно прочитать целиком. В-третьих, открытый код — лучшая защита от «а вдруг там что-то лишнее»: смотрите, собирайте сами, присылайте патчи.
Честно про статус: это публичная beta. Сборки пока без подписи — на macOS нужно один раз снять карантин (xattr -cr), на Windows поругается SmartScreen. Подпись в процессе, но держать релиз в столе до её получения я не хотел.
Итог
Получился лёгкий кроссплатформенный (Windows / macOS / Linux) десктоп: настоящее lo-fi радио, живые видео-обои с зумом и точкой кадра, эмбиент-микшер на Web Audio, авто-скрытие управления, полноэкранный режим, медиа-клавиши, избранные станции, 7 языков интерфейса. Позиционирую как бесплатную open-source альтернативу связке Wallpaper Engine + Lofi.co + Noisli.
Код, релизы под три ОС и issue-трекер: https://github.com/Victory-SergD/SergD_LoFiTyan (готовые сборки — на вкладке Releases: https://github.com/Victory-SergD/SergD_LoFiTyan/releases).
Буду рад технической критике — особенно по реализации бесшовного цикла и по UX точки кадра, тут наверняка можно сделать умнее. Если решали похожую задачу с gapless-loop или с кадрированием произвольного видео под произвольное окно — расскажите в комментариях, как у вас. Разбор архитектуры тоже приветствуется, отвечаю.