gitwtfhub

wtf is micro-ui?

gokayfem/micro-ui — explained in plain English

Analysis updated 2026-05-18

1JavaScriptAudience · developerComplexity · 2/5Setup · easy

TL;DR

A browser based 3D recreation of the OpenAI x Work Louder Codex Micro device interface, built entirely with procedural Three.js code.

Mindmap

mindmap
  root((Micro UI))
    What it does
      3D device recreation
      Camera presets
      Assembly animation
    Tech stack
      Three.js
      Vite
      Node.js
    Use cases
      Explore 3D model
      Study procedural graphics
      Reuse as template
    Audience
      Developers
      Designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Explore a 3D model of the Codex Micro device from five different camera angles in the browser.

REASON 2

Study how a fully procedural Three.js scene builds geometry, materials, and textures without loading external 3D files.

REASON 3

Fork the project as a starting point for building your own procedural product visualization site.

What's in the stack?

JavaScriptThree.jsViteNode.js

How it stacks up

gokayfem/micro-ui0xmukesh/docusaurus-tutoriala15n/andrewscheuermann
Stars111
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-12-272015-01-11
MaintenanceDormantDormant
Setup difficultyeasyeasymoderate
Complexity2/52/51/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Requires Node.js 20.19+ or 22.12+.

Wtf does this do

Micro UI is an unofficial, fully procedural recreation of the physical interface for the OpenAI and Work Louder Codex Micro device, built entirely in the browser using Three.js, a JavaScript library for 3D graphics. Nothing about it is affiliated with OpenAI or Work Louder, it is an independent visual study built by one developer to reproduce how the device looks and feels in 3D. There is a live demo you can open in a browser, and the interface lets you look at the device from five preset camera angles: a hero shot, a top down view, a low angle, a view from underneath, and an exploded view that separates all the parts so you can see how they fit together. You can smoothly assemble and disassemble the model, interact with its keys and rotary dials, and see RGB style lighting effects. Touch input is supported as well as mouse and keyboard. Every part of the model, including the transparent polycarbonate casing, the anodized aluminium trim, the PBT plastic keys, and the internal circuit board, is built with code instead of being downloaded as a ready made 3D file, and the materials and textures are generated the same way. There are three rendering quality profiles named Eco, Balanced, and Studio, and the scene only re-renders when something changes on screen, which keeps graphics card usage low when the view is idle. To run it yourself you need Node.js version 20.19 or newer, or 22.12 or newer. After installing dependencies you start a local development server, and a separate command builds an optimized static version of the site that can be hosted from a root domain or from a folder inside a larger website. The code is organized into a small number of files covering the 3D scene setup, the product's assembly logic, reusable shape helpers, material definitions, and generated textures and interface styling.

Yoink these prompts

Prompt 1
Show me how to run this Three.js project locally with npm and open the dev server.
Prompt 2
Explain how the procedural geometry and materials in this project are built without external 3D model files.
Prompt 3
Help me build a production static site from this project and deploy it to a subpath of my domain.
Prompt 4
Walk me through adding a new camera preset to this Three.js scene.

Frequently asked questions

wtf is micro-ui?

A browser based 3D recreation of the OpenAI x Work Louder Codex Micro device interface, built entirely with procedural Three.js code.

What language is micro-ui written in?

Mainly JavaScript. The stack also includes JavaScript, Three.js, Vite.

How hard is micro-ui to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is micro-ui for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.