| name | win98-paper-theme |
| description | Apply the bingranyou.com Win98 paper site-wide theme to a Next.js + Tailwind site so non-palace routes share the same visual language as /palace. Use when porting palace typography, palette, CJK fallback, paper-smudge overlay, or raised Win98 CTA styling to the front door, About, blog, or other routes. |
| author | Bingran You (@bingran-you) |
| license | MIT |
Win98 Paper Theme — make every route speak the same OS dialect as /palace
Live demo: bingranyou.com — the front door, blog, posts, and every internal route share this theme. Click "Enter the Memory Palace" to see it hand off to the 3D scene.
What this skill ships
A drop-in app/globals.css for a Next.js + Tailwind v4 host that paints the entire site in the same paper palette the /palace desktop interior uses. Five components:
- Palette — mint paper base (
#dbe3cf), black ink, classic Netscape/Win98 violet hyperlinks (#551a8b unvisited / #2f0a52 visited).
- Typography — Alfa Slab One display H1, MillenniumBold for H2–H6, Millennium body serif, MSSerif (pixel-aliased Win98 control font) for
.font-mono eyebrow labels. Per-glyph fallback chain for CJK (Latin → Millennium, Han → Noto Serif SC).
- Paper smudge overlay — fixed-position
body::after with the same recipe palace's MonitorScreen.ts:272 uses in 3D: smudges.jpg + additive blending + opacity 0.12. CSS analogue is mix-blend-mode: plus-lighter + 2 px blur for the softening palace gets for free from CRT scanlines.
- Justified prose + auto-hyphenation on
.prose, .text-block, and their <p> / <li> descendants — matches palace's About page text blocks.
.palace-cta — a raised Win98 button class for the "Enter the Memory Palace" CTA (and any other primary action you want shaped like a 3D-button).
When to use
- You've shipped
memory-palace (or are about to) and want the rest of your site to feel like the same machine, not a wrapper around an iframe.
- You're styling a Next.js + Tailwind v4 site and want a retro-paper aesthetic that's not a Win95 mockup but reads as "the documentation hand-off after you exit the 3D scene."
- You want to learn how to re-express a Three.js
AdditiveBlending shader recipe in vanilla CSS (mix-blend-mode: plus-lighter is the answer; the snippet shows the rest).
Prerequisites
- Next.js with
app/ directory (the file path assumes app/globals.css).
- Tailwind v4 — the file uses
@import "tailwindcss" and @plugin "@tailwindcss/typography" (Tailwind v4's CSS-first config syntax). For v3 or non-Tailwind hosts, see "Non-Tailwind adaptation" below.
next/font loading Noto Serif SC as --font-noto-serif-sc — used for CJK glyph fallback. If you only ship Latin, you can drop the --font-noto-serif-sc references and the per-glyph fallback degrades gracefully to Songti SC / serif.
5-minute quick start
From your host site's root:
cp <skill>/assets/globals.css app/globals.css
mkdir -p public/fonts/win98
cp <skill>/assets/fonts/*.ttf <skill>/assets/fonts/*.woff2 <skill>/assets/fonts/OFL.txt \
public/fonts/win98/
mkdir -p public/textures
cp <skill>/assets/textures/paper-smudges.jpg public/textures/
That's it. Restart your dev server; every route now wears the paper.
Asset map
| Asset (this skill) | Action | Destination (host) |
|---|
assets/globals.css | Drop in or merge | host app/globals.css |
assets/fonts/AlfaSlabOne-Regular.woff2 | Drop in | public/fonts/win98/ |
assets/fonts/MSSansSerif.ttf | Drop in | public/fonts/win98/ |
assets/fonts/Millennium.ttf | Drop in | public/fonts/win98/ |
assets/fonts/Millennium-Bold.ttf | Drop in | public/fonts/win98/ |
assets/fonts/OFL.txt | Drop in (license, ship alongside fonts) | public/fonts/win98/ |
assets/textures/paper-smudges.jpg | Drop in | public/textures/ |
See assets/INDEX.md for the apply-order checklist.
How the CSS smudge overlay maps to the Three.js shader
The /palace outer scene applies smudges to the CRT screen via:
new THREE.MeshBasicMaterial({
map: smudgesTexture,
blending: THREE.AdditiveBlending,
opacity: 0.12,
transparent: true,
});
Three.js's AdditiveBlending performs per-channel dst = src + dst. The CSS analogue is mix-blend-mode: plus-lighter — same math, different syntax. The skill's CSS does:
body::after {
background-image: url("/textures/paper-smudges.jpg");
filter: blur(2px) hue-rotate(45deg) saturate(0.2) brightness(0.95);
opacity: 0.12;
mix-blend-mode: plus-lighter;
}
The blur softens the brush strokes so they read as haze — palace gets the same softening from CRT scanlines + camera distance. The hue-rotate(45deg) saturate(0.2) brightness(0.95) chain shifts the smudge texture from cool greenish-blue to neutral warm so it sits naturally on the mint paper background instead of cooling it.
Customizing the palette
Three custom properties drive everything:
--paper-bg: #dbe3cf;
--paper-ink: #0a0a0a;
--paper-link: #551a8b;
--paper-link-visited: #2f0a52;
Override these in your own :root block to retint the whole site. The link-visited pair keeps the Win98-Netscape vibe — don't shift them more than ±20% on the L channel or hyperlinks stop reading as "clicked."
Migration notes — replacing vs merging
If your app/globals.css is currently default-CRA / default-Next:
- Replace wholesale. The shipped file is comprehensive; replacing avoids merge conflicts on Tailwind directives, CSS reset rules, and Typography plugin tokens.
If you have custom globals you want to keep:
- Merge the four blocks:
@font-face declarations, :root custom properties, body + body::before + body::after, and the h1-h6 / p / li / a / .font-mono typography rules.
- Keep your own layout / animation / utility-class rules.
- Don't merge the
.prose block unless you use @tailwindcss/typography — those --tw-prose-* variables are no-ops without the plugin.
Non-Tailwind adaptation
If your host doesn't use Tailwind v4:
- Delete the
@import "tailwindcss" and @plugin "@tailwindcss/typography" lines.
- Delete the
@theme inline { ... } block (Tailwind v4-specific).
- Delete the
.prose { --tw-prose-* } block.
- Keep everything else —
@font-face, :root, body::before/after, typography rules, .palace-cta work in plain CSS.
The remaining ~180 lines are framework-agnostic.
Why this is a separate skill from memory-palace
memory-palace stages the /palace route — vendoring two repos, wiring a build pipeline, fixing 13 production gotchas. This skill is about the visual layer that surrounds that route. They share fonts (literally — the same woff2 and TTFs ship in both bundles) and palette, but the work is orthogonal: you can ship one without the other.
If you want both, install memory-palace first to get /palace working, then layer this skill on top so the rest of your site doesn't feel like a different person made it.
License & attribution
This skill is MIT. The bundled fonts carry their own licenses:
- Alfa Slab One — SIL Open Font License (OFL), bundled
OFL.txt covers it.
- Millennium, Millennium-Bold — Win98-era font, included in the upstream
henryjeff/portfolio-inner-site repo without a separate license file. Treat as shipped under the same permission you obtained for the inner site (if you don't have that permission, substitute Times New Roman or a similar period serif — the theme degrades gracefully).
- MSSansSerif — Microsoft proprietary. If your project is public-facing and you don't have a license, substitute a free Win98-aesthetic alternative like W95FA.
Keep OFL.txt next to the woff2 in your deployed public/fonts/win98/.
