King Klown Logo
King Klown& KOA

Technical Roadmap

Building Kin City is a progressive journey. We are evolving from accessible prototypes to a fully immersive, custom-built web and AR ecosystem.

Core Technology Stack

Front-End Framework

Built with Next.js (React). This ensures server-side rendering for speed, dynamic routing for the "city" navigation, and broad accessibility across devices.

Mapping & Visualization

Mapbox GL provides the foundational coordinate system and 2D/2.5D layers, allowing us to style the "city" distinctly from standard geographic maps.

3D Engine

WebGL & Three.js power the in-browser 3D experiences, handling models, lighting, and textures directly in the web client without heavy downloads.

Augmented Reality

Future integration using ARKit (iOS) and ARCore (Android) to overlay Kin City elements onto physical spaces using device LiDAR.

Development Phases

0

Phase 0: The Roblox Prototype

Immediate Pre-Alpha

A gamified, rapid-prototype version of Kin City hosted on Roblox. This allows early community engagement and testing of the "city as interface" concept before the custom web platform is fully built.

1

Phase 1: 2D Interactive Map

Foundation

A functional 2D map built with Next.js and Mapbox. Users can view the city layout, click on specific zones (Districts), and seamlessly navigate to the traditional web interfaces for each module.

  • Custom "City Skin" over map tiles
  • Clickable zones triggering navigation
  • Mobile-responsive design
2

Phase 2: 2.5D & Basic 3D

Depth & Perspective

The flat map gains depth. Buildings extrude upward and 2D icons are replaced with simple 3D models. Users can toggle a "3D view" to tilt the map and explore the cityscape isometrically.

  • 3D building extrusions via Mapbox GL
  • Isometric camera controls
  • Immersive module previews (e.g., 3D courtroom for Ethikos)
3

Phase 3: Full Immersive City

The Web Metaverse

Kin City becomes a continuous 3D world. Users explore via avatars (first or third person). Boundaries between "pages" dissolve—walking into the library seamlessly loads the educational content stream.

  • Full WebGL rendering
  • Avatar-based navigation
  • Real-time multi-user presence
4

Phase 4: AR & Mixed Reality

Bridging Worlds

Kin City extends into the physical world. Using mobile AR, users can project a miniature city onto their table, or overlay specific modules (like a virtual classroom) into their real-world environment.

Ready to see where we started?

Return to Kin City Overview