Back to Works

Fenrhir Official Hub

Fenrhir Official Hub Showcase

Overview

Fenrhir is a prominent gaming streamer and content creator with channels on Kick, Twitch, and YouTube. We designed and built his official hub (fenrhir.com) to aggregate his platform links, publish his schedules, display his official merchandise store, and host a local blog.

Challenge

Consolidating multiple live networks requires robust integrations:

  1. CMS Accessibility: The client needed a zero-code visual editor. An initial prototype with Keystatic proved too technical, necessitating a switch to a more streamlined visual writer.
  2. Dynamic Data feeds: Video lists and subscriber counts had to stay updated without slowing down initial page loads.
  3. Heavy Graphics: Scroll-bound transitions and WebGL shaders are CPU-intensive and can cause lag on mobile browsers.

Approach

Our solution combined a static Astro build with selective client-side scripts:

  • Static Building with Astro 4: Renders the structural grids and pages into HTML files, minimizing javascript payload.
  • Visual Content Writing: Integrated Sveltia CMS as a Git-based visual editor at yourdomain.com/admin/. It loads a lightweight React UI that compiles rich-text inputs into clean markdown frontmatter.
  • Hybrid API Integrations:
    • YouTube API v3: Fetches total channel subscribers and playlist uploads during compile time to eliminate client-side API limits.
    • Kick API: Fetches follower counts asynchronously in the browser background using a client-side fetch script against https://kick.com/api/v1/channels/fenrhirgamer to prevent block-rendering.
  • Performance-tuned Animations: Created a WebGL aurora wave shader on an HTML5 canvas using Three.js, adjusting fluid motion velocity dynamically on window scroll, while managing parallax layers and page entry fades via GSAP.

Design Solution

The layout implements a high-impact dark-brutalist theme. Bold, heavy headers overlap with a parallax cutout cutout model of Fenrhir. Tactile elements like a film grain overlay, custom SVG media icons, and bright neon green highlights (#00ff40) define the visual atmosphere.