staniverse

Цифровой сад staniverse.xyz

время чтения ~6 мин.

Замысел

Сайт-портфолио обычно делают по AIDA: привлечь внимание, удержать интерес, вызвать желание, побудить к действию. Формы захвата email, SEO-текст, call-to-action на каждом экране. Я пошёл в другую сторону. Мне не нужен был лендинг, который перечисляет работы и просит подписаться на рассылку. Мне нужно было пространство, где видно, как одно вырастает из другого — и не в тексте абзаца, а буквально: 3D-граф связей, в который можно зайти из браузера VR-гарнитуры и оказаться внутри.

Я занимаюсь XR, рассказываю про иммерсивные технологии, убеждаю людей, что им это нужно. Считаю неправильным быть человеком, который вещает про XR с плоского экрана, но не показывает, как строит и применяет его своими руками. staniverse.xyz — мой ответ: вот WebXR-опыт, вот как он собран, вот что ты слышишь и видишь. Заходи из Quest 3 и летай между моими постами и кейсами как между звёздами. Или открой на телефоне в AR — граф ляжет прямо в твою комнату. Или просто на десктопе.

Созвездие — не ради красивой метафоры. ya.ty.gorod. — корневой узел: из него выросли Арка, MetaVyatka и Заповедная Вятка (напрямую, как бакалаврская работа). Заповедная позже может войти в MetaVyatka. Albina — отдельная линия, но может найти применение и там, и там: embodied AI-гид для природных территорий или для цифрового архива региона. Граф на главной — карта этой ветвящейся практики. Можно пролететь по ней и увидеть связи самому, без объяснений.

Даже сайдбар устроен по тому же принципу: лаборатория — единственный раздел, который раскрывает дочерние файлы в навигации, потому что это пространство экспериментов и связи там особенно важны.

staniverse.xyz — буквально овеществлённая методология. Не описание связей, а пространство, где связи осязаемы. Можно показать не только работы, но и то, как они связаны в голове — и сделать это средством самого искусства. Процесс создания — отдельный слой: Telegram-канал (сырой человеческий вывод) → LLM-разметка (машинное структурирование) → Obsidian vault (архитектура знания) → WebXR созвездия (иммерсивная визуализация). Полный цикл от хаоса личного опыта к пространственной навигации по смыслам.

Контекст

В моём Obsidian-волте живут проекты, заметки, кейсы, посты. Telegram-канал @staniverse — поток наблюдений о GenAI, XR и автоматизации. Посты из него нормализуются LLM и ложатся в структуру волта. Часть этого пространства стала публичной — не как статичная визитка, а как работающее отражение того, как я думаю и связываю идеи. staniverse.xyz — публичный срез волта. Портфолио, архив знаний и XR-площадка в одном месте. Весь стек: разметка Telegram-канала → Obsidian → Python-скрипт синхронизации → Quartz → GitLab Pages.

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

WebXR: созвездие вместо списка

На главной загружается Three.js-сцена, где все посты, кейсы, проекты и заметки — звёзды. Каждая категория в свой цвет: XR — фиолетовый, AI — голубой, технологии — зелёный, места — жёлтый, мысли — розовый, медиа — синий. Узлы связаны рёбрами по общей тематике, и по этому графу можно путешествовать.

В VR (Quest 3, Supermedium, любая гарнитура с браузером):

  • Ты внутри графа. Звёзды вокруг в 3D, каждая — имя, тип, дата
  • Левый стик — полёт вперёд/назад/в стороны. Плавно, как в симуляторе
  • Правый стик — поворот и высота. Облетаешь кластер AI-нод сверху, ныряешь в XR-проекты
  • Grip — ускорение. Чем быстрее летишь, тем громче свист pink noise
  • Триггер — выбрать звезду. Открывается 3D-карточка (CanvasTexture) с описанием, тегами и кнопкой «Открыть»
  • Thumbrest — открыть страницу в браузере

Hand tracking (Quest 3, Vision Pro): щипок — выбрать звезду, кулак + перетащить — перемещаться.

Десктоп: мышь (поворот) + колесо (полёт). Мобильные: тач-джойстик слева и свайп для поворота камеры.

AR-режим для смартфонов: граф проецируется на комнату, ноды располагаются сферой ~2 метра вокруг. Ходишь и тапаешь по звёздам пальцем.

Если не трогать ничего — автоматический дрифт: камера медленно путешествует между хабами, как будто сайт сам ведёт.

Генеративная музыка

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

Звук реагирует на положение в графе. Подлетаешь к кластеру — открываются новые частоты, меняется плотность и громкость. Граф звучит по-разному в зависимости от того, где ты находишься. Интерактивные звуки на наведение, выбор ноды и полёт. Динамик-компрессор защищает от перегрузки.

Архитектура аудиосцены продолжает дорабатываться — текущая версия не финал.

Архитектура: Telegram → Obsidian → сайт

Посты из @staniverse попадают в волт через два шага. Сначала tg_sync.py через Telethon тянет новые сообщения из Telegram API, сохраняет в result.json. Затем rebuild_channel_notes.py запускает tg_parser.parse_export(): группирует сообщения в треды (по маркерам «продолжение», reply_to, альбомам), отправляет каждый тред локальной LLM (Qwen 3.5-9B через LM Studio) с промптом, который возвращает JSON — title, tags, summary, type (tech/personal/project/share/event/mixed), entities, mood. Параллельно regex-фильтр ищет известные сущности (Unity, WebXR, n8n, Claude…) как fallback. Для новых сущностей создаются wiki-стабы — упомянули новый инструмент, в 04-knowledge/wiki/ появилась заглушка. Первое вхождение каждой сущности превращается в викиссылку. Итоговый .md получает фронтматер с source: https://t.me/staniverse/N.

Контент публикуется через sync_vault.py: фильтрация по publish: true во фронтматере, маппинг в структуру content/ Quartz, обработка викиссылок, конвертация ассетов (![foo](/assets/foo.jpg) → /assets/foo.jpg, видео → <video>-тег).

Сборка локальная — GitLab CI только публикует готовый public/. deploy.sh запускает sync_vault + Quartz build, прунит неиспользуемые ассеты, публикует видео в GitLab Package Registry, удаляет видео из public/ (слишком тяжёлые для Pages), пушит orphan-ветку pages. GitLab публикует за ~10 секунд.

Единственная нерешённая проблема — видео. GitLab Pages не тянет тяжёлые артефакты, в планах переезд на свой сервер или Cloudflare R2.

Что делал лично

  • Спроектировал архитектуру: Telegram → tg_sync → tg_parser (LLM-разметка) → Obsidian → sync_vault → Quartz → GitLab Pages
  • Написал пайплайн импорта: tg_sync.py, tg_parser.py с LLM-генерацией заголовков, тегов, типов, сущностей
  • Собрал WebXR-граф на Three.js: VR, AR, десктоп, мобильные, полёт, hand tracking
  • Написал генеративную аудиосцену на Web Audio API: эмбиент на пентатонике с proximity-реактивностью и категорийным микшированием
  • Настроил CI/CD: deploy.sh, orphan-ветка, pruning ассетов, GitLab Pages
  • Интегрировал кастомные компоненты Quartz: graph-xr, fluid-bg, garden-filter
  • Фронтенд написан через вайбкодинг с OpenAI Codex и GLM-5.1

Стек

  • Quartz 4
  • Obsidian
  • Three.js (0.184)
  • WebXR / Web Audio API
  • GitLab Pages / Git LFS
  • Python (tg_parser.py, sync_vault.py)
  • Telethon
  • Shell (deploy.sh)
  • Qwen 3.5-9B (LLM-разметка постов)
  • OpenAI Codex (вайбкодинг фронтенда)
  • GLM-5.1 (вайбкодинг фронтенда)

Ближайший фокус

  • Переезд на свой сервер или Cloudflare R2 для видео
  • Миграция на новую версию Quartz или переход на Astro
  • Больше интерактивных элементов в графе: фильтрация по времени, режим «только связи»

Результат

staniverse.xyz — не лендинг с формой подписки и SEO-текстом. Публичный срез живого мышления: Obsidian-волт, в который можно войти. Ты пролетаешь от AI-агента к фотограмметрии вятской арки и видишь связи не потому что я написал абзац «как мы пришли к выводу», а потому что они там есть — ноды соединены рёбрами, граф меняет музыку рядом с разными кластерами, ты это слышишь. Я мог бы сделать обычный сайт по правилам. Но тогда я был бы человеком, который рассказывает про иммерсивные технологии с плоского экрана.

Связи

Ссылки

Вид графа

Обратные ссылки