Premium Stream Layouts - “Galactic Glass” Edition Un paquete gráfico de alto rendimiento (Stream Package) para transmisiones en vivo, construido 100% con tecnologías web nativas (HTML, CSS y JavaScript Vanilla).
Este proyecto deja atrás los pesados archivos de video .webm tradicionales, utilizando código puro para generar animaciones fluidas a 60FPS, consumiendo una fracción de la memoria RAM de tu computadora. Diseñado con una estética espacial premium, efecto Glassmorphism (cristal esmerilado) y tipografía cinematográfica.
✨ Características Principales 🚀 Motor de Partículas Nativo: Fondo de galaxia dinámico (estrellas, cometas y constelaciones) renderizado en tiempo real usando la Canvas API de JavaScript.
💬 Chat en Vivo Integrado: Conexión directa a los servidores de Twitch mediante webSockets (tmi.js), permitiendo renderizar los mensajes en pantalla sin retraso (Zero-lag) y con diseño de cristal esmerilado.
🎨 Estética High-End: Uso de variables CSS para Glassmorphism, texturas de ruido cinematográfico, luces de borde (Rim Lights) y tipografía dinámica con efecto máquina de escribir.
⚡ Ultra Ligero: Al ser basado en navegador, no satura el codificador de video de OBS.
📂 Contenido del Paquete Este repositorio incluye las pantallas esenciales para una transmisión profesional:
🔴 offline.html (Starting / Offline): Pantalla de espera con título gigante animado y redes sociales. Ideal para el inicio o fin del stream.
☕ brb.html (Be Right Back): Pantalla de “Vuelvo Enseguida”. Incluye un marco transparente (16:9) diseñado específicamente para que incrustes un video desde OBS por debajo de la capa web, manteniendo entretenida a la audiencia.
🎮 online.html (Just Chatting / Main): Layout principal con integración nativa del chat de Twitch flotando sobre la galaxia.
🔔 alerts.css/html (Código para StreamElements): Código fuente para importar alertas de Follows/Subs personalizadas en StreamElements.
🚀 Guía de Instalación en OBS Studio Integrar estas pantallas en tu stream es extremadamente sencillo mediante el uso de la herramienta Browser Source (Fuente de Navegador).
Descarga o clona este repositorio en tu computadora.
Abre OBS Studio y selecciona la escena que deseas configurar.
En el panel de Fuentes (Sources), haz clic en el botón + y selecciona Fuente de Navegador (Browser).
Nombra la fuente (ej. “Fondo Galaxia BRB”).
En la ventana de propiedades:
✅ Marca la casilla “Archivo Local” (Local file).
📁 Haz clic en Examinar y busca el archivo .html que deseas usar (ej. brb.html).
📏 Ajusta la resolución a Ancho: 1920 y Alto: 1080 (o la resolución base de tu lienzo).
🔄 (Recomendado) Marca la casilla “Actualizar el navegador cuando la escena se active”.
Haz clic en Aceptar. ¡Listo!
💡 Pro-Tip para la pantalla BRB: Para poner un video en el cuadro transparente, simplemente añade una Fuente Multimedia en OBS y arrástrala debajo de tu Fuente de Navegador en la lista de capas.
🛠️ Personalización El código está diseñado para ser fácilmente modificable. Solo abre cualquier archivo .html en tu editor de código favorito (como VS Code):
Cambiar el Chat de Twitch: Busca la línea channels: [ ‘tu_usuario_aqui’ ] en el bloque de JavaScript de online.html y reemplázala por tu nombre de canal de Twitch.
Colores Globales: En la parte superior del
Textos: Busca las etiquetas HTML y edita libremente los nombres de las redes sociales, o las palabras del arreglo const words = [“…”] para cambiar la máquina de escribir.
*** ### ¿Por qué esto se ve mucho mejor?
Le añade insignias visuales (los escudos de colores) que a los desarrolladores les encanta ver.
Explica el valor técnico (no gasta memoria RAM como los videos normales, usa Canvas API, se conecta por WebSockets). Esto demuestra que sabes de lo que hablas.
Completa tu guía de OBS indicando que hay que poner “1920x1080” y marcar la casilla de “Archivo local”, que es donde el 90% de la gente se equivoca al configurar esto.