Chat en pantalla, reacciones y avisos de nuevos follows para el stream de lanihta.
En OBS agregá una fuente de navegador y usá esta URL:
https://overlay.capone.dev/chat/
Los mensajes nuevos muestran nombre, color, etiquetas oficiales y emotes de Twitch como imágenes. Al abrir o recargar la página se descarta la cola anterior para que no reaparezcan mensajes viejos; los mensajes que contienen enlaces se omiten por completo.
| Parámetro | Valores | Qué cambia |
|---|---|---|
duration | 1–10; default 10 | Segundos que queda cada mensaje. Nunca supera 10 segundos. |
max | 1–10; default 4 | Cantidad máxima de mensajes visibles a la vez. |
border | HEX; default dorado | Color del borde. |
bg | HEX/RRGGBBAA | Color del fondo; acepta alpha de 8 dígitos. |
text | HEX | Color del mensaje. |
accent | HEX | Acento del nombre y de la barra de tiempo. |
radius | 0–40; default 15 | Radio de las esquinas en píxeles. |
animation | smooth, slide, pop, fade, bounce, none | Preset de entrada y salida. Default smooth. |
enter | pop, slide, fade, zoom, bounce, none | Reemplaza solo la animación de entrada. |
exit | fade, slide, zoom, none | Reemplaza solo la animación de salida. |
direction | up, left, right | Dirección de desplazamiento para los estilos slide. Default up. |
speed | fast, normal, slow | Velocidad de entrada y salida; no cambia el tiempo visible. |
easing | soft, cubic, quad, back, bounce, spring, expo | Curva de aceleración y frenado, con resorte opcional. |
debug | 1 | Muestra el estado de conexión del overlay. |
Si configurás enter o exit, ese valor reemplaza la parte correspondiente del preset animation. El sistema también respeta la preferencia de movimiento reducido del navegador.
Rebote de entrada, salida con zoom y dirección hacia la derecha:
https://overlay.capone.dev/chat/?animation=smooth&enter=bounce&exit=zoom&direction=right&speed=fast
Deslizamiento rápido hacia arriba, 3 mensajes y 8 segundos:
https://overlay.capone.dev/chat/?animation=slide&direction=up&speed=fast&duration=8&max=3
Animación de entrada y salida por separado:
https://overlay.capone.dev/chat/?enter=zoom&exit=fade&speed=slow&easing=spring
Las transiciones usan Anime.js 4.5.0, servido localmente desde el overlay, con curvas configurables y resorte. Los cambios animan opacidad y transformaciones, y respetan el movimiento reducido del navegador. Anime.js se distribuye bajo licencia MIT; consultá instalación, animaciones y easings. Referencias: rendimiento de animaciones en MDN y prefers-reduced-motion en MDN. Para opciones configurables en widgets de chat, también revisé la guía de chat overlay de StreamElements.
Las insignias de canal y globales se resuelven por conjunto y versión usando las imágenes de Twitch. Si la API no está disponible, se muestran símbolos de respaldo. Referencias: badges globales y badges del canal.
Los viewers pueden usar !emoji seguido de un emote de Twitch. Cuando alguien siga el canal, el overlay de reacciones muestra el aviso. La integración se administra desde el panel de Twitch.
Overlay de reacciones para OBS: https://overlay.capone.dev/reactions/