чат для богини панд styulenskaya
Уютный кастомный чат для StreamElements.
Starting stream · in OBS
overlay поверх Live2D-сценыСтиль
Каждая деталь — маленькая отсылка к самой styulenskaya. Оранжевая лапка слева от ника — это лапа её красной малой панды, той самой, в которой она стримит. Нить с ромбами над текстом подсмотрена с фоновых китайских мотивов сцены — что-то между храмовыми подвесками и бумажными амулетами с пожеланиями. А чибик-панда, который встречает каждый follow — миниатюрный двойник маскота. Текст проявляется буква за буквой, как будто кто-то его дорисовывает.
Анатомия сообщения
Сообщение — две строки: верхняя несёт лапку и ник, нижняя — нить с ромбами и сам текст в опциональном бабле. Лапка пульсирует «когтями», нить плавно качается ±2°, ромбы автоматически тиражируются под высоту текста. Текст проявляется буква-за-буквой через opacity + blur-fade. Follow-алерты добавляют чибика-панду справа и подпись «стал пандой».
Палитра
Чат намеренно нейтральный — один тёмный текст с белой обводкой-свечением, который читается поверх любых сцен. Цвет даётся двумя независимыми акцентами: лапка и ниточка. Каждый — на выбор оранжевый (default, отсылка к рыжей панде) или зелёный (#4FA9A6, под китайские нефритовые мотивы фона). Переключаются на панели справа, и тут же подменяются в превью и в иконах ниже.
Иконография
Минимализм: лапка как единственная иконка перед ником и нить с ромбами как замена «...». Лапка анимирует «выпуск когтей» каждые 3.6с, ромбы висят на тонкой нитке (#C66D3D) с маленьким кольцом-крепежом, число подвесок растёт под высоту сообщения.
Типографика
Один шрифт на весь виджет, переключается picker'ом — Caveat (рукописный, по умолчанию), Comfortaa, Nunito или Lora italic. Ник — bold 700, текст — bold; всё в lowercase. Подложка под текст — лёгкая полупрозрачная обводка для читаемости поверх любых фонов.
Источники событий
- chat · в превью на сайте — анонимный Twitch IRC (живой чат канала); в SE-деплое — событие
onEventReceived/messageот платформы - follow · только через StreamElements (
follower-latest) — рендерится как alert с чибиком и подписью «стал пандой». В демо на сайте — синтетика по тестовой кнопке - real-time эмоты Twitch · парсятся из IRC-тега
emotesи инлайнятся как<img>36px-высотой по тексту - sub / raid / cheer / tip на текущей итерации не отрисовываются — обфусцированный виджет принимает только
messageиfollower-*, остальные слушатели игнорируются. Если понадобится — добавим отдельные шаблоны
Инструкция
Скачай ZIP кнопкой справа — внутри 5 текстовых файлов (html / css / js / data / fields) + README. Дальше две короткие связки: SE-виджет и OBS-источник.
1. StreamElements
- streamelements.com → Overlays → создаём новый overlay.
- Через «+» в редакторе → Static / Custom → Custom widget → Open Editor.
- В 5 вкладок (HTML / CSS / JS / Fields / Data) полностью вставить содержимое одноимённых файлов из ZIP.
- Save → копируем ссылку на overlay (иконка с цепочкой внизу редактора).
2. OBS
- Добавляем источник Browser, вставляем скопированную ссылку.
- Размер: 1920×1080. С зажатым Alt можно подрезать края после.
- Правый клик на источник → Метод смешивания → SRGB откл. — иначе свечение и цвета съезжают.
- Тот же SRGB-флаг ставим всем PNG-картинкам и виджетам в сцене.
