Volver a Proyectos

Fenrhir Official Hub

Fenrhir Official Hub Vista

Resumen

Fenrhir es un destacado streamer de gaming y creador de contenido con canales en Kick, Twitch y YouTube. Diseñamos y construimos su hub oficial (fenrhir.com) para reunir los enlaces de sus plataformas, publicar sus horarios, mostrar su tienda oficial de merchandising y alojar un blog local.

El Reto

Consolidar múltiples redes en vivo requiere integraciones robustas:

  1. Accesibilidad del CMS: El cliente necesitaba un editor visual sin código. Un prototipo inicial con Keystatic resultó demasiado técnico, por lo que fue necesario cambiar a un editor visual más simplificado.
  2. Feeds de datos dinámicos: Las listas de videos y los contadores de suscriptores debían mantenerse actualizados sin ralentizar la carga inicial de la página.
  3. Gráficos pesados: Las transiciones ligadas al scroll y los shaders WebGL consumen muchos recursos y pueden generar lag en navegadores móviles.

Nuestro Enfoque

Nuestra solución combinó un build estático de Astro con scripts selectivos del lado del cliente:

  • Build estático con Astro 4: Renderiza las grillas estructurales y páginas en archivos HTML, minimizando el payload de JavaScript.
  • Edición visual de contenido: Integramos Sveltia CMS como editor visual basado en Git en tudominio.com/admin/. Carga una interfaz ligera en React que compila entradas de texto enriquecido en frontmatter markdown limpio.
  • Integraciones híbridas de API:
    • YouTube API v3: Obtiene el total de suscriptores del canal y las listas de reproducción durante el tiempo de compilación para eliminar los límites de la API del lado del cliente.
    • Kick API: Obtiene el conteo de seguidores de forma asíncrona en segundo plano en el navegador usando un script fetch del lado del cliente contra https://kick.com/api/v1/channels/fenrhirgamer para evitar bloquear el renderizado.
  • Animaciones optimizadas para rendimiento: Creamos un shader de onda tipo aurora en WebGL sobre un canvas HTML5 usando Three.js, ajustando dinámicamente la velocidad del movimiento fluido según el scroll de la ventana, mientras gestionamos capas de parallax y transiciones de entrada de página con GSAP.

Solución de Diseño

El diseño implementa un tema oscuro brutalista de alto impacto. Encabezados grandes y pesados se superponen con un recorte parallax de Fenrhir. Elementos táctiles como una capa de grano de película, íconos SVG personalizados y acentos verde neón brillante (#00ff40) definen la atmósfera visual.