Gem: moya.cafe — Japanese portal homepage / weather strip / vertical TabNav / VMU module player / button scroller

Why it fits the braid

moya.cafe is moya’s self-hosted personal homepage (version two, “entirely remade”, also on Neocities as moya), and it is built like a 2003 Japanese web portal: a tenki.jp-style weather strip for tomorrow and the day after, a Yahoo! search box, a 「HOME」『SCANWORLD』 tab row, pop’n music and Sanrio banner ads under a 広告 header, a sakura calendar, a chat box, a “latest updates” log, and a marquee of 88×31 buttons running across the page. The palette is one sky blue (#7bb0e6 / #79b4e4) against a pale #f6f9ff-to-white gradient, with a single lavender accent (#9d93c6) for the active tab. It sits squarely in Y2K / Nekoweb and plain HTML craft with 88x31 culture front and centre, wears Windows XP Luna chrome via XP.css, and its sky-on-white restraint is the Frutiger Aero side of the braid without any glass blur.

Morning dig: rotated off NekoDirectory (yesterday) to the Aero & Y2K Webring member list (frutigeraeroarchive.org/aero_webring), its second use after Skyweaver on 2026-09-27. moya.cafe is also on the Hotline Webring, the Webmaster Webring and bucketring. Runners-up from the same member list: bliss.nekoweb.org (an Internet Explorer window splash that “boots” blissXP for a cloud bunny) and v1sta.xyz (景の域, a Chinese Frutiger Aero / Neo-Y2K illustration blog).

Layout / craft patterns worth stealing

Portal furniture instead of hero copy. The top of the page is utilities, the way Yahoo! Japan and goo were: weather, search, tab row, banner ads, calendar. The personal content (“WELCOME TO.. version two”, projects, links) sits underneath. A porch could open with Noa’s own tiny utilities (local weather, now playing, a calendar) and treat that as the greeting.
Pixel box headers as images. Every panel title (links, 広告 ads, 雑談 chat, さくら calendar, webring, 最新更新 latest updates, module player) is a small hand-made GIF/PNG header with class="nointerp", image-rendering: crisp-edges and draggable="false". The text in the boxes stays live HTML; only the labels are bitmaps, which gives the page its “made in Photoshop 7” feel cheaply.
One blue, two weights of border. .box is 2px solid #7bb0e6 with border-radius: 5px over a fixed linear-gradient(180deg, #f6f9ff 0%, #fff 70%); h2 bars use a repeat-x border.png strip in the same blue with a 5px 0 5px 5px notched corner. Swap the blue for Requiem Garden #556B58 primary and #BBC5BB muted borders on a #f4f8f2 ground and this is a ready sage panel system (Requiem Garden).
Vertical TabNav® in pure CSS. “NOW FEATURING JML TabNav®”: hidden radio inputs plus labels set in writing-mode: vertical-rl, 19px wide, stacked down the right edge like file-folder tabs. The checked tab turns lavender, stretches to padding: 38px 2px and scaleY(2)s its label. It’s a radio-hack tab set that needs no JavaScript, and the ® joke makes it feel like a shipped product. The last tab, “on air”, is a decorative dummy (#dummytab, pointer-events: none) that just finishes the stack.
Pixel-crisp type on purpose. font-smooth: never, -webkit-font-smoothing: none, MS PGothic (msp) as the body face with a bundled fallback, Arial Black (abl) scaled scaleY(1.2) for tab labels, and two bitmap fonts for the VMU. Custom arrow.png / hand2.png cursors and a star2.gif bullet on every li::before. The source even jokes that the crunchy text “doesnt work in chrome! fail!”.
A Dreamcast VMU as the music player. In the 「MOD場」 panel, the module player is drawn as a Sega VMU: an LCD screen with digit sprites for the time, a <marquee scrollamount="2"> track title, little VU bars, and the VMU’s own button as play/pause. It plays tracker modules (.mod / .xm) from The Mod Archive, keygen-music style. This is the Nightcore-adjacent packaging idea: put the audio inside a beloved object, not a generic player bar.
Button wall twice. The same 88×31 set runs as a slow marquee across the page and again as a static Button集 grid “so they’re easier to look at/click”, with “ADD MY BUTTON AND I WILL ADD YOURS”. Motion for vibe, a still grid for usability, which is the right way to do a scroller.
Iframes as rooms. Search, links, the sakura calendar, the update log and the chat each live in their own small iframe, so each module can be edited (or broken) alone. Old-fashioned, but it’s how the page stays a collage.
SCANWORLD re-skins the whole house. /scans/ keeps the exact same frame (sidebar, weather, tabs) but swaps the sky-blue star tile for a dark pine-forest tile, the boxes for green-and-white frames and the logo for a teal “ScanWorldへ”. Each room gets its own season with one palette swap. Inside is a two-column grid of scanned Dreamcast and PlayStation discs, with sub-tabs for CD covers, manuals and box art, and cartridges. It’s a physical-media shrine, a good model for a herbarium-style scans room, and the green version is already halfway to Requiem Garden sage.
Changelog with weekday kanji. The 「最新更新」 box is a scrolling log dated like 2025-10-24(金) with one plain line per change (“add bucket webring, add buttons for lopster and bondiaries”). It’s an honest, low-effort way to show the site is alive.

What not to copy (for product)

It’s a fixed 820px body with absolutely positioned title art (left: 205px; top: -90px), and the page itself warns it “may display incorrectly in old browsers”. A porch should keep the portal look and still reflow on a phone.
Disabled font smoothing and MS PGothic look great on Windows and crunchy-bad elsewhere. Ship the bitmap feel through actual pixel fonts, not by turning smoothing off.
Third-party bits (the fc2 counter, hotlinked buttons and weather images) and a lot of iframes. Each one is a silent failure point. The chat box is the author’s own (the changelog says it replaced a third-party one), which is the better pattern.
The pop’n music, Sanrio, Megaten and Rovio banners are borrowed brand art. Fine as the author’s scrapbook, not something to lift for Noa’s own site.
Some casual profanity in copy and source comments; that’s the author’s voice.
XP.css is a real library (botoxparty/XP.css), so if we want Luna chrome we should use it directly rather than copy moya’s build.

Reference images

Home (/: title art, weather strip, tab row, sidebar with links and ads, welcome box, button marquee):

Attachments/design-gem-moyacafe-home.png

Lower home (ざつだん chat, 桜カレンダー calendar, webring box, 「MOD場」 with the Dreamcast VMU player, 最新更新 changelog):

Attachments/design-gem-moyacafe-onair.png

SCANWORLD (/scans/: same frame re-skinned in pine green, two-column grid of disc scans):

Attachments/design-gem-moyacafe-scans.png