Overview
Mosaic is a love letter to the Internet of old — a sprawling web collage of text, images, and GIFs excavated from the ruins of GeoCities neighborhoods. It is a digital preservation art project, a 15,880-pixel-tall scroll through the raw, unpolished creative energy of the 1990s web.
Section Color Journey
The full-page scroll traverses 33 distinct sections, each with its own background color. The palette drifts from near-black darkness through purples and reds, into blues and whites, back through space-dark and neon purples, through nature greens and yellows, and ends in fiery red. This is the visual spine of the experience.
Neon Accent Colors
These are the vibrant neon accent colors drawn from text, links, animated GIFs, and decorative elements throughout the page. They capture the raw, electric energy of GeoCities at its most expressive.
UI Colors
Functional interface colors used for the Catscape Navigator chrome, dialog boxes, and the classic Windows-style text selection.
Win95 Bevel Colors
Typography
Mosaic uses a deliberately eclectic mix of fonts, matching the chaotic variety of GeoCities pages. Font smoothing is intentionally disabled to preserve the pixelated, aliased look of the original era. image-rendering: pixelated is applied to all images.
Rendering Notes
| Property | Value | Purpose |
|---|---|---|
| -webkit-font-smoothing | none | Disables antialiasing for authentic pixelated text |
| -moz-osx-font-smoothing | unset | Firefox equivalent |
| image-rendering | pixelated | Prevents smoothing on scaled GIFs and images |
| text-rendering | optimizeSpeed | Prioritizes speed over legibility (retro feel) |
Catscape Navigator 2.0
The centerpiece UI component — a pixel-perfect recreation of a 1990s browser chrome, styled after Netscape Navigator. It frames the archived GeoCities content and serves as the primary interactive viewport. Every detail replicates the Win95 visual language: beveled borders, silver toolbars, and inset status bars.
Component Specifications
| Element | Value |
|---|---|
| Title bar background | #155362 (dark teal) |
| Title bar text | #fff, bold, 13px, Arial |
| Toolbar background | #777777 (silver-gray) |
| Button style | Outset bevel: white top-left, #808080 bottom-right |
| Button active | Inset bevel: reversed border colors |
| Address bar bg | #c0c0c0 (dialog silver) |
| Input field | Inset bevel, white background, 12px Arial |
| Content area | White background, max 836x600px |
| Loading anim | 60x60px box, pulsing opacity + spinning border |
| Status bar | Silver, inset bevel, 11px text |
Dialog Box
| Element | Value |
|---|---|
| Dialog title bar | #000080 (navy blue) |
| Dialog body | #c0c0c0 (dialog silver) |
| Dialog border | 2px solid #000, 3px 3px box-shadow |
| Button style | Outset bevel, 12px Arial, 4px 24px padding |
Retro Design Patterns
Mosaic faithfully reproduces the visual vocabulary of 1990s GeoCities pages. These patterns are not ironic — they are the authentic visual language of personal expression on the early web, presented as found.
Tiled Backgrounds
Every section uses a tiled background image via background-repeat: repeat. Stars, space textures, nature scenes, and abstract patterns are tiled to fill the viewport. All images are delivered as CSS background-image properties, not <img> tags.
HTML Marquee Text
Scrolling text implemented via CSS animation, reproducing the <marquee> tag behavior.
88x31 Pixel Badges
The iconic micro-banner format of the 1990s web. Each badge is exactly 88 pixels wide by 31 pixels tall.
Win95 Beveled Borders
The classic raised (outset) and sunken (inset) border effect, achieved with directional border colors: white top-left highlight, gray bottom-right shadow.
Outset (raised)
border-color: #fff #808080 #808080 #fff;
Inset (sunken)
border-color: #808080 #fff #fff #808080;
Frame Borders
Double-line borders in earth tones, used around content sections to evoke wooden picture frames.
Table-Based Layouts
The original GeoCities pages used <table> elements for all page layout. Mosaic preserves this aesthetic in its positioning of collage elements, though it uses modern CSS (absolute positioning within fixed-width sections) to achieve the same visual result.
<TR>
<TD WIDTH="150" VALIGN="TOP">Navigation</TD>
<TD WIDTH="450" VALIGN="TOP">Main Content</TD>
</TR>
</TABLE>
All Images via CSS background-image
Mosaic delivers all 2,052 images as CSS background-image properties rather than <img> tags. This technique allows precise layering and positioning of the collage elements using absolute positioning, and enables the seamless tiled backgrounds that define each section's atmosphere. GIF animations play via CSS background, and all images use image-rendering: pixelated to preserve the original low-resolution aesthetic.
Custom Dinosaur Cursor
The site uses a custom cursor (a small dinosaur sprite) via cursor: url('dino.cur'), auto; — a direct nod to the custom cursor trend of the late 1990s, when every GeoCities page had an animated or themed cursor.
Layout
The page is a single, non-responsive, vertically scrolling canvas. It is deliberately fixed-width and makes no concessions to modern responsive design. This is a museum piece, not a web app.
| Property | Value | Notes |
|---|---|---|
| Viewport width | 880px | Fixed, deliberately non-responsive |
| Total height | 15,880px | 33 vertically stacked sections |
| Section count | 33 | Each absolutely positioned |
| Positioning | position: absolute | All 33 sections use absolute top offsets |
| Element positioning | position: absolute | All collage elements within sections |
| Overflow | hidden (per section) | Elements are clipped at section boundaries |
| Ribbon strips | background-repeat: repeat-x | Horizontal tiled image strips between sections |
| Catscape viewport | max 836 x 600px | The browser-within-a-browser content frame |
Section Stacking Model
.section-1 { top: 0; height: 520px; background: #0c030b; }
.section-2 { top: 520px; height: 480px; background: #1a0615; }
.section-3 { top: 1000px; height: 460px; background: #2c0b26; }
/* ... 30 more sections ... */
.section-33 { top: 15380px; height: 500px; background: #cd2800; }
/* Ribbons: tiled horizontal strips connecting sections */
.ribbon { width: 100%; background-repeat: repeat-x; position: absolute; }
Animations
The page is alive with motion: floating elements drift across sections, backgrounds scroll endlessly, rainbow strips cycle through the spectrum, and a blinking cursor awaits input. Durations are intentionally long and varied, creating an organic, dreamlike drift.
Rainbow Strip (15s cycle)
Float Right (70–80s duration)
Elements float from left to right across the viewport over extremely long durations (70–80 seconds), creating a slow, meditative drift. Shortened here for demonstration.
Scrolling Backgrounds (0.5s–30s)
Tiled background images scroll continuously via background-position animation. Durations range from 0.5 seconds (rapid) to 30 seconds (glacial).
Cursor Blink
A blinking block cursor, reminiscent of terminal prompts and early text editors.
Animation Specifications
| Animation | Duration | Easing | Notes |
|---|---|---|---|
| Float right | 70–80s | linear | Elements drift across full viewport width |
| Scrolling bg | 0.5–30s | linear | background-position animation on tiled images |
| Rainbow strip | 15s | linear | Cycles through full spectrum, infinite |
| Cursor blink | 1s | step-end | Binary on/off, no fade |
| Loading pulse | 1s | ease-in-out | Catscape loading indicator opacity |
| Loading spin | 0.8s | linear | Catscape spinner rotation |
GeoCities Neighborhoods
GeoCities organized its user pages into themed "neighborhoods." Mosaic draws from pages across these communities. Each neighborhood had its own character, audience, and aesthetic conventions.
CSS Variables
Copy-paste block of all design tokens as CSS custom properties, ready for use in any project that needs to replicate the Mosaic aesthetic.
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.website.theme.extend,
},
};
// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Website | — | — | — | — | — |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Website | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Website | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Website | inputField | rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |