Fit sections to screen, blend header, mobile performance, robot eyes

[MacroMaster101]

Summary

Layout and header

• Sections fit the screen again. Desktop text scale now follows width or height, whichever is tighter, so tall content no longer overflows wide-but-short screens (e.g. 1875×925). Containers widen with the viewport separately, so the side gaps stay small (1725px content at 1875px wide).
• Arena sound grid uses 4 columns at xl; HQ Ratings shows the summary and review form side by side at xl.
• Header blends into the page: blurred tint that fades out instead of a solid bar and border. It's transparent at the top in light mode (the old solid-white light-mode header rule is removed). The red line under the nav is gone.
• Header and footer show the J4FN logo mark instead of a generic YouTube icon.
• The loading screen now sits above the music player and its "Tune In" dialog.

Mobile performance

Lighthouse on a production build:

	Mobile before	Mobile after	Desktop after
Score	36	43	88
Page weight	12.9 MB	4.7 MB	2.5 MB
Total blocking time	3.3 s	1.3 s	0.13 s
Time to interactive	47.7 s	21.6 s	1.5 s

• Spline robot: pauses when off screen or when the tab is hidden, and no longer measures layout on every scroll event.
• Floating game logos: no more forced reflow every frame (cached size, composited transforms), and the particle canvas is skipped when idle.
• RAWG game art: loads resized copies (~6 KB instead of up to 3.6 MB).
• Music: preloads only metadata instead of the full ~3 MB track.
• Site icon: shrunk from 852 KB to 28 KB.
• Touch devices: skip backdrop blur and repainting glow animations.

What remains on mobile is mostly the 3D robot, which stays auto-loaded by choice. To lighten it further without changing its look: in the Spline editor, set the scene's mobile pixel ratio to 1× and republish.

Robot eyes

Spline runtime 2.x auto-selects its new WebGPU pipeline, which doesn't render the robot's eye panels. SplineRobot now loads the runtime directly with renderer: "webgl", and the unused @splinetool/react-spline package is removed.

Test plan

• tsc --noEmit, npm run lint (1 existing warning), npm run build, npm audit (0 vulnerabilities)
• Every section fits at 1875×925, 1920×1080, 2560×1440, 1536×864/730, 1440×900/789, 1366×768, 1280×720. Only "Latest Uploads" (a long list) scrolls.
• No horizontal overflow at 375 and 768
• Header checked in light and dark mode, at the top of the page and scrolled
• Robot eye panels visible (WebGL2 canvas); robot resumes after scrolling away and back
• Game logo bubbles load resized images (0 broken)
• Check the Vercel preview on a real phone and a large monitor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
just-for-fun-website	Ready	Preview	Sep 28, 2026 10:51pm UTC