MIRAGE RECORDS™ — README.TXT

=========================================================

Last modified: 1987 (emotionally) · Encoding: UTF-8 · Line endings: infinite
蜃気楼レコード 取扱説明書

1. THE CONCEPT

MIRAGE RECORDS™ is a fictional record label releasing "music for places that never existed" — demolished hotel atriums, dream malls, expressways that loop forever. The aesthetic school is vaporwave, done knowingly: the sunset-gradient palette (hot pink #ff71ce, cyan #01cdfe, violet #b967ff over deep indigo), sliced suns, checkerboard floors in CSS perspective, Greek busts as line art, Windows-95 window chrome, Japanese subtitle accents, and a ™ wherever it is funny. The joke is played completely straight, which is the only way vaporwave works.

Typography: Michroma (wide, chrome, one weight, tracked generously) for display; Tahoma/Verdana system stacks for body — the fonts your family computer actually had.

2. THE GLITCH WORDMARK

The headline is one <h1> with its own text mirrored into data-text. Two pseudo-elements copy that text via content: attr(data-text), one tinted pink and one cyan. A "glitching" class fires a ~0.5s animation that slices each copy with clip-path: inset(...) while shoving it a few pixels sideways, using steps() timing so it snaps instead of gliding:

/* the RGB-split slice, one of two layers */
.wordmark::before { content: attr(data-text); color: #ff71ce; }
@keyframes slice-a {
  0%  { clip-path: inset(12% 0 62% 0); transform: translate(-6px,-2px); }
  25% { clip-path: inset(58% 0 8% 0);  transform: translate(5px,2px);   }
  ...
}

JavaScript re-adds the class on a random 6–10 second timer (setTimeout, re-armed after each burst), plus on hover via plain CSS. Under prefers-reduced-motion the timer never starts and hover shows a static RGB split — offset, but not moving.

3. THE WEB AUDIO MALL DRONE

The Infinite Mall Player synthesizes a real ambient pad — no audio files. The graph is four detuned oscillators (an Fmaj7-ish voicing: F2, A2, C3, F3, each nudged a few cents) mixed into a lowpass filter whose cutoff breathes on a very slow LFO, then into a master gain kept around 0.08:

osc F2 (saw,  -4c) ──┐
osc A2 (tri,  +3c) ──┼──▶ lowpass 720 Hz ──▶ gain ~0.08 ──▶ out
osc C3 (saw,  -2c) ──┤          ▲
osc F3 (tri,  +5c) ──┘   LFO 0.07 Hz × ±240 Hz

filter.type = "lowpass"; filter.frequency.value = 720;
lfo.frequency.value = 0.07;          // one breath ≈ 14s
lfoGain.gain.value  = 240;           // cutoff swings ±240 Hz
lfo.connect(lfoGain).connect(filter.frequency);

Three safety rules: the AudioContext is only constructed inside the play-button click handler (never on load, never autoplay); every audio call is wrapped in try/catch so a blocked or missing context degrades to an "AUDIO UNAVAILABLE" status instead of a console error; and play/pause ramp the master gain with setTargetAtTime so the pad fades instead of clicking. The cassette spools are pure CSS conic-gradient circles whose rotation is toggled with animation-play-state.

4. DETERMINISTIC ALBUM ART

Every cover is an SVG generated from its catalog number. An FNV-1a hash turns "MIR-004" into a 32-bit integer, and bit-slices of that integer pick the palette, gradient tilt, sun position and radius, and grid color:

function hash(str) {
  var h = 2166136261;
  for (var i = 0; i < str.length; i++) {
    h ^= str.charCodeAt(i);
    h = Math.imul(h, 16777619) >>> 0;
  }
  return h >>> 0;
}
var sunX = 55 + ((h >>> 5) % 90);   // same tape, same sunset
var sunR = 30 + ((h >>> 13) % 22);

The perspective floor on each cover is just lines: verticals drawn from a vanishing point on the horizon (placed at the sun's x) down past the frame, plus horizontals whose spacing widens toward the viewer. The sliced sun is a circle behind an SVG <mask> of black horizontal bars — the oldest trick in the vaporwave book, and still the best one.

5. THE CHECKERBOARD FLOOR

The hero floor is a repeating-conic-gradient checkerboard on an oversized div, rotated back with rotateX(62deg) inside a parent that supplies perspective: 420px, then faded at the horizon with a mask-image gradient:

.floor {
  background: repeating-conic-gradient(
      rgba(255,113,206,.28) 0% 25%, rgba(1,205,254,.07) 0% 50%);
  background-size: 110px 110px;
  transform: rotateX(62deg);
  mask-image: linear-gradient(180deg, transparent, #000 22%);
}

6. HOW IT WAS MADE

Built by Claude (Fable 5) writing vanilla HTML, CSS, and JavaScript by hand — no frameworks, no build step, no audio files, no images. One HTML file, one guide, one imaginary mall. It is part of a 25-site showcase of wildly different web design; the hub lives at fable-25-dhb.pages.dev.

7. STEAL THIS

• Glitch with clip-path, not GIFs. Two pseudo-element copies of your headline, inset() slices, steps() easing, under 600ms. Fire it rarely — a glitch on a timer every 6–10 seconds reads as haunted; every second reads as broken.
• Synthesize your ambience. Three or four detuned oscillators into one lowpass filter is a complete ambient pad in ~30 lines, weighs zero bytes, and loops forever by definition. Just never touch new AudioContext() outside a user gesture, and try/catch it.
• Hash your content into its own art. A tiny FNV-1a hash of any stable string (SKU, slug, catalog number) gives you infinite consistent cover art, avatars, or og-images with zero assets.
• Fake 3D floors are two CSS lines. A repeating-conic checkerboard plus perspective + rotateX — then a mask gradient to melt it into the horizon.
• Commit to the bit. A themed 404 message, an error dialog that refuses to close, a subscriber number derived from the user's own email — density of small jokes is what makes a fiction feel lived-in.

EOF — Thank you for shopping at the Mall of the Mind.™
またのご来店をお待ちしております。