Karibu Kenya

Karibu Kenya: An immersive 3D spatial journey celebrating the vibrant motion, culture and everyday spirit of Kenya.

Comment

Inspiration

Growing up with a deep love and pride for Kenya, I wanted to build something truly special that aligns with what our country stands for and how it has evolved. Kenya is a unique blend of timeless natural heritage and pulsating, creative modern life. My vision was to capture that essence without overwhelming the visitor with chaotic information.

I set out to create a solo digital journey celebrating our roots—from the iconic wildlife of the Savannah to the modern street culture of Nairobi’s vibrant matatus (nganyas), which feel like moving parties on wheels with their graffiti art and music. I also wanted to spotlight our culinary soul, particularly mutura (our beloved street delicacy) paired with chapati, and conclude with the historic spirit of Harambee—a rallying call of unity and collective effort that has defined Kenya since independence.

What it does

Karibu Kenya is an interactive, spatial 3D web experience that guides visitors through curated chapters of Kenyan culture:

  • The Savannah & The Big Five: An immersive exploration of Kenya's world-renowned wildlife and natural landscapes.
  • Urban Transit (Nganya Culture): A vibrant showcase of Nairobi's public service vehicles, complete with signature graffiti aesthetics and urban street energy.
  • Street Gastronomy (Smocha): An interactive culinary showcase featuring a scroll-driven frame-by-frame video player that dynamically unpacks the preparation and culture behind smocha.
  • The Epilogue (Harambee): An interactive scratch-reveal typography display. Visitors can brush across the massive "HARAMBEE" headline with their cursor or touch screen to reveal an underlying Kenyan flag gradient (#000000, #BF1E2E, #FFFFFF, #00843D), which organically heals and fades back to amber when idle.

How I built it

  • 3D & WebGL Engine: Engineered using Three.js, Vite, and vanilla JavaScript to deliver hardware-accelerated 3D rendering.
  • Dynamic Viewport Logic: Designed adaptive camera controllers that dynamically compute aspect ratios to eliminate wide-angle fish-eye distortion on mobile screens:

$$\text{Aspect Ratio} = \frac{W}{H}$$

$$\text{FOV} = \begin{cases} 65^\circ - 70^\circ & \text{if } \frac{W}{H} < 1 \quad (\text{Mobile Portrait}) \ 45^\circ & \text{if } \frac{W}{H} \ge 1 \quad (\text{Desktop Landscape}) \end{cases}$$

  • Scroll-Bound Frame Animation: Researched and integrated custom canvas-based video frame scrubbing synchronized directly to scroll velocity.
  • Auto-Healing Masking Canvas: Built a custom HTML5 2D Canvas mask using globalCompositeOperation = 'destination-out' with dynamic point-to-point interpolation:

$$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$

Active brush strokes gradually decay over time:

$$\alpha_{t} = \max(0, \, \alpha_{0} - \lambda \cdot \Delta t)$$

  • CI/CD Pipeline: Configured automated build-and-deploy workflows using GitHub Actions targeting GitHub Pages.

Challenges I ran into

  • The Monolithic 3D World Crash: My first prototype attempted an open, continuous 3D world. Heavy assets, unoptimized 3D models, and mobile GPU memory limits caused severe frame drops and browser tab crashes.
  • The "Storyless" Asset Void: A second version solved performance by using abstract light portals, but it completely lacked emotional cohesion. Different sections used mismatched typography and unrelated visual styles, feeling like a random collection of 3D assets rather than a narrative.
  • Mobile WebGL Optimization: Smartphones with high Device Pixel Ratios ($3\times$ or $4\times$) throttled the GPU. I had to clamp the DPR strictly:

$$\text{DPR}{\text{effective}} = \min(\text{DPR}{\text{device}}, \, 1.5)$$

  • Shader Stuttering on Scroll: Section transitions initially froze on mobile due to lazy shader compilation when new models entered the camera view. Adding explicit shader pre-compilation via renderer.compile() resolved the micro-pauses.

Accomplishments that I'm proud of

  • Resilience Through Complete Rebuilds: Starting over multiple times as a solo developer when early designs failed either technically or narratively, ultimately arriving at a clean, focused, and premium user experience.
  • Scroll-Synced Frame Scrubbing: Successfully teaching myself and implementing video frame scrubbing tied to scroll position for the food section.
  • Tactile Harambee Interaction: Crafting an interactive, responsive typography reveal component that lets users physically uncover the Kenyan flag colors through gesture.
  • Smooth Cross-Platform 3D: Achieving steady 60 FPS performance and balanced framing on both desktop screens and mobile devices.

What I learned

  • Storytelling Trumps Raw Spectacle: 3D web design isn't just about rendering flashy 3D components. Without intentional typography, consistent visual language, and a clear narrative flow, technical complexity becomes visual clutter.
  • Restraint in Information Architecture: Choosing to focus deeply on three impactful pillars (Wildlife, Nganyas, and Mutura) created a far more memorable experience than trying to cram every aspect of the country into a single page.
  • Mobile-First WebGL Engineering: Memory budgeting, garbage-collection management, texture sizing, and shader pre-compilation must be prioritized from day one when working with spatial web technology.

What's next for Karibu Kenya

  • Expanded Cultural Chapters: Adding new spatial exhibits highlighting Kenyan athletics, coastal Swahili architecture, and our thriving tech ecosystem (Silicon Savannah).
  • Interactive Audio Landscapes: Integrating spatial audio with ambient savannah sounds, Nairobi street beats, and cultural soundbites that adapt based on the user's camera position.
  • Performance Enhancements: Implementing DRACO and KTX2 texture compression across all 3D assets to achieve instant load times on low-bandwidth mobile networks.

Built With

Share this project:

Updates

Submission history