⌘K on every page
Press ⌘K (Ctrl K elsewhere), or click the search button in the top bar or the status bar. A palette lists every page, every game, every published app with its privacy policy, and a few actions: toggle the theme, copy the e-mail address, jump to the top, open the current page's source on GitHub. Type to filter, arrows to move, enter to go. It is one dependency-free file, /js/palette.js, that the chrome loader injects everywhere, including the generated privacy-policy pages and the Bootstrap-era typing game, where it also swallows its own keystrokes so the game does not count them.
Pages crossfade instead of flashing
The site is plain multi-page HTML, and it now opts into cross-document view transitions with a single rule, @view-transition { navigation: auto }. Same-origin navigations crossfade; the top bar and the status bar carry view-transition-names so they hold still while the page underneath changes. The one trick needed: the bars are fetched at runtime, so the loader now keeps a copy of the fragment in sessionStorage and mounts it synchronously on the next page, before the browser snapshots it. Reduced motion turns the transitions off.
A chapter for the games
The multiplayer games were the most impressive thing on the site and they had one row in the index. They have a chapter now, between the phones and the music: a little browser window per game, each drawn in CSS in the game's own two accent colours from the portal's registry, with a tile maze, a crosshair over a floor grid, circuit traces, a flashlight beam with blinking eyes, a scribble that draws itself, and a chessboard. The "dino network" pill turns green when the portal answers a ping.
That ping deserves a note. The portal's status API does not send a CORS header yet, so the page makes an opaque no-cors request: it resolves when the server answers at all and rejects when it does not, which is an honest "up" without a console full of red. When the header lands, the same pill can show per-game status.
The old copy was stale too — it had missed DOODLINGS launching in the meantime. Hand-typed claims about a moving list go out of date, so the copy no longer counts anything: the portal is the source of truth, and the page just points at it.
What a shared link looks like
Every hand-written page now has Open Graph and Twitter card tags and its own 1200×630 image: the page's path, its title, and the rex rendered as a dot matrix from the same PNG the particle hero uses. Pasting a link into KakaoTalk, Discord or X finally shows something. The cards are rendered from an HTML template in headless Chrome, so a new page is a new line in a list.
The small expected things
- A 404 page in the editor voice: the path that failed, a terminal that says so, and the closest pages from the same index the palette uses.
- A web manifest with proper icons, so the site (and the typing game as a shortcut) can be added to a home screen, plus
theme-colorthat follows the theme toggle live. robots.txtand asitemap.xml, with the admin tools kept out.- A skip link, first in the tab order.
- The status bar's "master" now says how long ago the last commit landed, from the GitHub API, and there is a games-portal dot next to the line and column.
- On browsers that support scroll-driven animations, the sub-page reveals run in pure CSS (
animation-timeline: view()); the observer-based script steps aside. - The light theme's aurora was almost invisible and the particle cloud lost contrast; both are tuned.
- This devlog.
Not done
The typing game is still the outlier: Bootstrap 4, jQuery and the Firebase compat SDK, which drags Google Tag Manager in with it. Moving it onto the shared design system is a proper project, not a tidy-up. Self-hosting the fonts and replacing Three.js with a raw WebGL point shader are on the list too, in that order.