WARNING-HEALTH AND SAFETY

So, the Wii menu. The nostalgic ambiance filling the living room at 5 am while everyone is still asleep but you really really wanted to play the airplane in Wii Sports Resort. At least that's my experience.

Simple in its functionality, and kinda futuristic and retro but not retrofuturistic in its look. I mean I have my fondest gaming memories of the Wii, but never really thought about its design. That is until recently.

Best spent 9zł in my life

You see, dupa.gay was actually bought by me for a silly Bluesky handle for a whole of 9zł (think ~$2/2€). I hadn't a slightiest what to host here. Now it's a blog, but previously I wanted to put in here some kind of silly website. Just hadn't any idea. While I was working on my VTuber overlays (which you can and should totally check out here), I noticed I really like remaking UIs of games and OSes in web technologies. My current linkree (alinarosa.gay) is a Windows desktop which you can take through time to 95, XP and 10 versions. With working windows and taskbar n' all. So when I was thinking about an overlay I'll use for streaming some non-Sims games I thought, well, why not a console OS. Like Wii. But then I had no clue what the layout would look like, so I decided on Switch's HorizonOS, which quite humbly I'd say turned out great. But the Wii idea was still there.

Not sure what to title that, let's say "start and struggle"

Part 1: EZ

So, quite obviously I decided to remake the Wii menu. And it has to be functional, kinda like a linktree. Started from simple stuff, like the health and safety warning with blinking A button. As easy as web dev gets. Then I got to the meatier parts.

Part 2: Still EZ

The Wii has a really nice animation of the screen silhouettes lighting up and darkening like a Mexican wave. If you've ever seen a Wii you know what I'm talking about. I was kinda stumped at how to approach it, since I also decided I'll reuse the layout for the TV screens in the main UI, so any decision made here would (spoiler: didn't) have and impact later. In the end settled on just changing the opacity of the screens with a set delay. It looks pretty convincing if you ask me, so I left that at that. A design decision was to be had, as in, what about portrait mode. Wii did support both 4:3 and 16:9, but I wanted to stick to the retro feel of CRT TVs. So instead of making the screens small, I just cut off extra columns.

Part 3: Into the rabbit hole we go

And here comes the struggle. The main UI. Few problems to solve:

Rounded corners, but like CRT, so squircles
Animation of zooming in a screen
Wobbly cursor that looks and imitates the Wii pointer
Pages
Other elements like buttons and clock

1. CRTs

This was the main meat of the website. CSS doesn't have native squircles, which is wild. So I had to resort to SVG clip-path shenanigans. Shenanigans, since the screens also have inside and outside borders that turn off and on. Perhaps there was a way around it with shadows, but :before and :after work well too. I hope someday CSS will feature native squircles (idk, like border-radius: 2em squircle 4 1 1).

2. Zoom in, zoom out

For this I had many ideas, and wanted to settle for an approach I was familiar with already thanks to the Sims 2 loading screen I made for my overlays. Basically I though to just translate3D everything you see. Somewhat of an approach from gamedev. It took a lot of trial and error to get it to move correctly and right, and while it's still not 1:1 to the OG Wii Menu, it's close enough. I tried other things with scaling all, transforming shit around. This part definitely took the most of my sanity, and is the reason the TSX looks like shit.

3. Player 1

The idea for cursor started simply, make it a Wii pointer, and rotate the hand randomly. Then I added a delay, since that's what I thought would make it feel like using a Wii pointer (note: Wii pointer is quite responsive irl). The delay however introduced a thing I would have to deal at every single step now. The "real" cursor is in a different place than the Wii pointer. /instead of leaving this be, or abandoning the delay idea, I took it upon myself and made th emost jank setup ever. I had to check freaking collisions like in a game engine between the cursor and the CRT screens (since the screens react on hover). Quite a nightmare, bug prone, and still kinda doesn't work the intended way. But what a lesson it was I tell you. Never again.

4. Pages

After dealing with my own decisions regarding delayed cursor, I decided to not do pages at all for my own sanity.

5. Buttons and clock

Clock was easy, just put a clock in there. Buttons however, still are not perfect.

The thing about Wii menu is that some elements use a rather skeumorphic look, at least in the way the light bounced and reacts. It's not realtime ofc, but it looks nice. Too nice to be done with CSS shadow fuckery. Some day I might fix them. Today is not the day however.

6. Ha! Didn't mention number 6. But it's the responsive design. Or lack thereof.

The site looks nice on 16:9 screen, and most bolibe portrait screens. But anything other that that and elements cut off, cursor doesn't point where it's supposed to, and all starts looking like crap. Honestly, with hoe much spaghetti is in this codebase, I'd rather start over than try to fix these issues now.

In the end...

It doesn't even matter. No, it does actually. Web development is always a lesson.

You can check out the site at wii.dupa.gay. Source will be available on my GitHub (links all around), and maybeeee I'll put it up on CodePen? Not sure yet.

Thanks for reading if you've amnaged to get this far. If you have any comments or messages for me, be sure to shoot a DM at my Bluesky.