Outer Wilds–Themed New Tab

Why this exists

What stayed with me from Outer Wilds was not one visual symbol. It was the sense of setting out from a campfire in the universe. I wanted that feeling in an interface I open every day, so a new tab is not only a cold efficiency panel.

So I did not make a game wallpaper or a fan page. I chose a Chrome new-tab extension as the product form: a 3D campfire holds the atmosphere; Pomodoro, today’s TODO, shortcut navigation, and later-reading handle real daily browser needs. The experience goal is that “focus — rest — set out again” links naturally with the fire, the music, and roasting marshmallows.

View the GitHub repository and live demo

From reference images to a browser scene

At first I tried letting Codex approximate complex instruments with basic Three.js geometry. It ran, but form, materials, and detail were closer to a schematic model and could not carry the camp atmosphere I wanted. That split the jobs of AI and tools: Blender owns model form and assets, Three.js owns real-time rendering and interaction, Codex connects the two workflows.

I first gathered front, side, and back references of the instruments from game screenshots, then had Codex complete base modeling, proportion, and detail through a Blender workflow, exporting GLB after several rounds of visual check. Once in the browser, orientation, scale, origin, materials, lighting, and scene placement still had to be handled. “The model is done” and “usable in the product” are two different acceptance points.

The space background went through a similar iteration. I split rough geometric symbols into rendering layers of a procedural starfield, distant stars, dust, orbit lines, and slow animation, and used restrained glow, color-temperature differences, and large dark areas to build depth. The goal was not copying game assets. It was keeping the feeling of a hand-drawn universe and a campfire.

Key trade-offs

• Atmosphere cannot cover tool efficiency. The 3D scene has to coexist with frequently used modules; opening a new tab, shortcuts, and timing still have to be direct.
• Scene effect cannot cost stability. The WebGL scene uses independent loading and fallback; even if the 3D module fails, core functions such as the Pomodoro still work.
• The extension and the online demo share the experience, but follow different runtime limits. The demo page uses localStorage; the extension uses chrome.storage, a service worker, and browser notifications.
• Asset fidelity has to obey web performance. Models, lights, shaders, and animation have to share a render budget, rather than chasing model detail alone.

What I learned

1. Turn 2D references into checkable 3D constraints

Three views are not the final model. They are an intermediate that helps AI and modeling tools understand proportion, outline, and structure. I learned to define acceptance points from key features on the front, side, and back, and to correct them through the actual camera in the scene, rather than expecting one generation to be right.

2. Organize an AI-assisted Blender / GLB asset pipeline

I worked through the full chain from modeling-instruction breakdown, proportion and topology, to origin, orientation, scale, materials, and GLB export. More important, I learned to tell which problems belong to modeling and which belong to Three.js scene setup, so code does not “pretend to finish” a complex asset with basic geometry.

3. Build a Three.js scene that feels like a product

This project let me practice model loading, camera and composition, lighting and PBR materials, a procedural starfield, particles and shaders, frame-rate-independent animation, and render-budget control on mobile and low-power devices. Visual finesse comes from several systems working together, not stacking one post-effect.

4. Handle the real engineering limits of a Chrome extension

I went further into Manifest V3, content security policy, adapting chrome.storage and localStorage, service-worker background timing, browser notifications, current-tab navigation, and state restore. For the user it is one click or one countdown; behind it, state has to stay consistent across page lifetimes.

5. Push a personal prototype to a deliverable version

I added build checks, an online demo, extension ZIP packaging, and a GitHub Release flow. That made it clearer: a “good-looking demo” only becomes a product after it can be installed, restored, degraded, and kept updating.

What it proves

This is not to prove how much Three.js I can write. It is a full stretch of the boundary: starting from a clear experience goal, I filled in 3D modeling, WebGL rendering, and browser-extension knowledge, used AI tools to speed research and iteration in an unfamiliar domain, and pushed a personal interest into a product that can actually be used and publicly verified.

Scope note: Independent project. Features and implementation follow the public repository and the runnable version, and are not mixed with work projects.