A main menu that follows the sun
I don’t work with a plan. I build whatever comes to mind or whatever bugs me on a given day, and after the camera work last time, what bugged me was the main menu. It was a title, three buttons, a background color. Functional, but it felt like a placeholder someone forgot to replace. The game itself already had a warm pixel art style, and the menu looked like it came from a different project.
So today I rebuilt it from scratch, and then went one step further: the menu now changes with the time of day on your machine.
A frame you want to touch
The new look is built around a chunky frame with a multi layered border, done entirely with box shadow rings instead of images. Dark olive interior, cream colored trim, soft shadows. The BUILDOM logo sits on a plaque that overlaps the top edge of the frame, filled with a vertical gold gradient. It took a few iterations to get there. My first ribbon attempt used clip path, which chopped off borders and left ugly jagged edges. I replaced it with a rounded plaque, and later removed the decorative ribbon tails completely because they looked off.
The buttons got the same treatment: simple planks with a gold inner line and a pressed down state on click. Green for entering a world, wood for loading, red for the dangerous stuff. The font is Press Start 2P, which immediately makes everything feel like a game instead of a website.
The game world as a backdrop
Instead of a static image behind the menu, the background now renders an actual generated world. It reuses the same engine code as in game: the world builder creates a fresh landscape with grass hills, dirt and stone layers, pine trees, and caves, and the regular rendering pipeline draws it with the real sprite sheets, autotile edges and all.
A camera slowly pans back and forth across this world. Every visit to the menu shows you a slightly different landscape, and none of it is a screenshot. The little rabbit and zombie hands wandering around down there are borrowed from the same sprite atlas too, and yes, there is a small strip inside the frame where a few of them stroll past the buttons.
One theme per time of day
Here is my favorite part. The menu checks your local clock and picks one of four themes: morning between 5 and 10, noon until 17, evening until 21, night afterwards. The theme does two things at once. In the canvas it swaps the sky, the same dithered pixel sky gradients the game uses, from a clear blue noon to a deep indigo night. And through CSS variables it recolors the entire frame: the border, the banner plaque, the buttons, even the little theme picker at the bottom.
The trick was to drive everything through CSS custom properties on a single data attribute. Four palette blocks, each defining the frame colors, the button gradients, and the picker accents. One attribute swap and the whole menu flips.
For the theme picker itself I added a round button fixed to the bottom of the screen showing the current time of day as an icon. Clicking it fans out four bubbles in a half circle with a spring animation, so you can try all four palettes without waiting for the sun to move.
One gotcha worth remembering
When I wired up the theme switch, switching the time of day reloaded the entire world in the canvas. New terrain generation, new sprites, the camera jumped back to start. The cause was boring: the theme prop sat in the same effect dependency array as the world setup. The fix was moving the theme into a ref that the render loop reads every frame. Now only the sky changes, the world keeps standing exactly as it was.
The menu finally feels like it belongs to the same game as the world behind it. Next up: polishing the settings dialog in the same style and giving the language flags a proper retro look.