gitmyhub

micro-ui

JavaScript ★ 1 updated 22d ago

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

JavaScriptThree.jsViteNode.jssetup: easycomplexity 2/5

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.

Where it fits