HUE 9000

This project began as an on/off status light for a different interface.

AI was gaining momentum around me, and I wanted to explore a HAL 9000-inspired power light with adjustable color. I built the component in isolation. It looked great. Then I dropped it into the original project.

It looked absolutely terrible.

The lighting and tone were a complete mismatch. Total failure in context. But the button still had something. Rather than throw it away, I built a new project where the lens could become the hero.

Creating the HAL 9000-inspired lens began with the bezel. I created a high-fidelity angular gradient for the inner and outer rings. I used a reference photo of the original hardware and generally followed it, but made intentional changes to simplify the number of colors (which would become CSS variables so I could animate their intensity), and also to have more left-right symmetry.

Once the bezel looked right, I converted the shades of gray into parametric CSS variables. This allowed me to adjust the global lighting intensity dynamically.

To sell the illusion of a physical glass surface, I created SVG highlights to overlay with ::after pseudo-elements. I found a high-quality image of what I believed was the original HAL 9000 and carefully traced its sharp specular highlights.

After the highlights were finished, I rewatched the actual movie and realized my reference image was not a production photo. It was a fan-made 3D recreation. Fortunately, these looked great and the sharpness was helpful to keep.

The internal lens illumination follows the physics of the original optic. I carefully mapped a photo of the lens into a reconstructed CSS radial gradient. I paid extra attention to the boundaries. I then converted all the color stops into CSS variables using the OKLCH color space, which allowed me to vary the hue dynamically across the different stops.

One key challenge was the inner glow. It has a noticeable hue shift at its brightest point. I used a CSS calculation variable to create an offset hue. If a user changes the overall lens color from red to blue, the inner region mathematically maintains that shifted, brighter center.

I had to model how the light behaves at different intensities to make the interface feel alive. I used the exact same gradient color stops but adjusted their physical positions based on power levels. At zero percent intensity, the bright inner glow compresses to nothing, and gets overlapped with the more subtle gradient stops. As the power increases, those color stops expand outward.

To simulate a realistic camera bloom, I treated the light spill as a dynamic after-effect. The bloom grows in both opacity and radial size as the lens intensity increases. This creates the illusion that the lens is generating enough energy to glow past its physical edges.

The displays use a retro electronic readout language: bright segmented regions, scanline texture, and a subtle shadow-mask overlay. The intensity control used a simple horizontal percentage scale and was fairly straightforward to pull off.

The mood control required a more nuanced approach. Simply mapping hue angles felt impersonal, so I designed a system to show semantic mood names instead. This involved complex interpolation between moods to create a continuous physical scale without overloading the display. The final solution used linear interpolation with a text-scramble effect to bridge the transitions.

I created a terminal layer to make the HUE 9000 feel like it was talking back.

The display uses a CRT texture, scanline effect, shadow mask, and a chromatic aberration glitch effect built with CSS pseudo-elements. As users interact with the system, the terminal generates dynamic status strings tied to controls and state changes.

I added debouncing and rate-limiting to keep repeated interactions from overwhelming the display. The goal was controlled system chatter, not a wall of fake diagnostics.

The scan buttons include custom sequences, supported by a small nine-dot activity animation. It cycles through multiple patterns and gives the interface a quiet “thinking” state without overplaying it.

I built a layered sound system using open-source effects and Howler.js. The goal was to make the interface feel immersive without turning audio into a gimmick. Ambient tracks run underneath the experience, while buttons, dials, and state changes trigger their own interaction sounds.

I tested a range of background tracks, including a few that felt more unsettling than I thought would be appropriate. I almost cut them. Early testers liked the creepy ones best, so I kept that tension in the final version.

The power-off interaction also includes special sound and animation states. It nods to HAL 9000, and to the question sitting in the back of many people’s minds in the AI era: what happens when the AI does not want to be turned off?

I shifted the goal to keeping the lens as the hero. I kept the mood and intensity dials since they matter most to the lens. The full hue grid became a simpler floating slider outside the physical interface, giving the user practical control without overloading the screen. The terminal moved behind a floating button, with a smooth transition to bring it in and out of view.

Ultimately, the hardest part was not the layout. It was the state model. Because several desktop controls do not exist on mobile, including the on/off buttons, auxiliary lighting, and hue assignment grid, the startup sequence needed a fundamentally different state architecture. What started as responsive cleanup became a mobile-specific refactor.