← Playground一覧に戻る

After Hours

A fictional 1997 corporate website — a company that manufactures the sound of shopping malls — and six operators that push it through the transformations vaporwave is actually made of. At zero it is a sober Japanese business homepage. Every pink pixel that appears after that is the output of a process you can name: dye densities decaying, chroma bandwidth collapsing, halfwidth Latin falling into ideographic width, tape slowing, a room getting larger, a loop cut before its cadence.

Everything is in the picture. The screen is the website — its four tabs, its scrollbar and its contact form all work. The panel underneath it is the machine: six faders, a transport, a volume knob and a row of latching setting keys. Drag a fader, or click it and use ↑ ↓ (hold shift for a coarse step). Choose a channel on the site’s own CHANNELS page and the desk’s readout follows it.

To hear it, press ▶ on the panel — no browser will start audio on its own, so nothing plays until you do. The ON AIR lamp lights, the peak meter starts moving, and the site’s own status bar switches to ▶. CH-02 CONCOURSE is loaded by default because it is the busiest; CH-06 AFTER HOURS is 58 BPM with almost no drum kit, and is meant to be nearly silent.

Moving around inside it: grab the paper and drag, exactly as you would move a sheet on a desk — or use the scrollbar, or the arrow and page keys. Only the paper does this. A wheel or a finger anywhere else on the picture — the window frame, the desk, the panel — scrolls this article instead, and when the paper runs out at either end the movement carries on into the article by itself. The two never move at the same time.

渚音場株式会社 is a fiction. The company, its six channels, its figures and every premises listed on its 会社概要 page were invented for this sheet, and its address is on a street that does not exist. Nothing here is sampled, scanned or traced: the layout, the type transform, the signal chain and the music are all generated by the code on this page.

Text equivalents of the desk

After Hours

Every vaporwave homage begins by drawing the same four things: a magenta-to-cyan gradient, a perspective grid running to a sunset, a Doric bust, and the word AESTHETIC. This is a strange way to treat a genre whose entire method was to not draw anything — to take material that already existed, made by someone else for a commercial purpose, and run it through a small number of destructive processes until what it was for stopped being legible.

So this sheet does not draw a vaporwave website. It draws a website that could plausibly have existed, and then gives you the processes.

At every operator zero you get 渚音場株式会社 — Nagisa Onba Co., Ltd., a 1997 corporate homepage laid out the way they were: a masthead with a seal, four beveled navigation tabs, a two-column table pretending to be a grid, a news list with a blinking NEW badge, an access counter, and a line at the bottom telling you the site is best viewed at 800 × 600. Nagisa Onba manufactures environmental music for commercial space — in-store background music, cut to quarter-inch tape in Kawasaki, duplicated at eight times speed and posted monthly to 4,118 contracted premises. Its product is atmosphere. It sells it by the month, to buildings, to be played at people who did not ask for it.

Every part of that company is invented — its name, its channels, its figures, its customers, the address on its 会社概要 page, and the domain in its location bar, which is the reserved documentation domain and so can never resolve to anybody’s real server. The industry is not invented. Vaporwave did not have to imagine this business. It only had to notice that it was already there.

Then you turn the operators up, and the same site — the same DOM-less canvas layout, the same strings, the same generated music — becomes the thing. Nothing is swapped for a vaporwave asset at any point. There is no second design.

What the six operators actually are

Speed 速度. Slowing is the genre’s founding gesture, and the thing usually got wrong: a tape transport cannot change tempo without changing pitch, because they are the same measurement. So this operator multiplies the sequencer’s step duration and every scheduled frequency by the same ratio, 1.00 down to 0.58 — about seven semitones. It also opens the playback head’s high end proportionally, drops the site’s own clock out of real time, slows the marquee, and reduces the frame rate. One dial, because on a tape it was one dial.

Room 残響. A convolution reverb whose impulse response is synthesised on demand: a noise burst under a one-pole lowpass — because a large room loses its high end first — decaying over anything from 0.28 seconds to 6.4, with five discrete early reflections placed in front of it. The dry path drops as the wet rises. What you are hearing at the far end is music mixed for a room and then played in a building.

The same operator opens the page up as well, but only through the audio; the visual counterpart of reverb here is that the mall is empty enough for it.

Width 全角. AESTHETIC is not a font and never was. It is what happens when Latin letters are requested from a Japanese character set that only carries ideographic-width forms of them: U+0041 becomes U+FF21 and occupies a full em instead of a half. This operator is that Unicode transform with a per-character probability, hashed on the character’s position so it is stable frame to frame — the widening creeps in letter by letter rather than flickering. And because the layout measures the strings it is about to draw, and the strings get wider, the page comes apart on its own: lines rewrap, table cells clip, the document grows taller, the scrollbar thumb shrinks. Nothing about that is authored. It is the consequence of asking for wider letters in a fixed column.

Loop 循環. The splice point. The music runs an eight-bar progression whose cadence lands in the fourth chord; this operator shortens the phrase to 4, 2, 1, ½ or ¼ of a bar, so at anything under four bars the sequence turns around before it can arrive anywhere. Music that resolves makes people look up, which is the one thing a channel like this is contracted not to do. Past the halfway mark the picture starts sticking on the same beat, and the news list begins repeating its top two items — the tape not returning.

Signal 信号. Not a blur, not an overlay. Composite video allots luma about 4.2 MHz and chroma about 0.6 MHz, and the chroma arrives late; that single asymmetry is the whole of what people mean by “the VHS look.” Each frame is therefore converted to Y/I/Q, the chroma is decimated horizontally and run through a forward-only one-pole lowpass — one-sided, because a real decoder smears colour to the right of the edge that caused it — then resampled with a delay of up to five and a half pixels, combed by an alternating scanline field, and bloomed through a running-sum highlight pass. On top of that sits the mechanical half: wow across each row from two-octave value noise, dropout streaks where the oxide is damaged, and the head-switching tear that garbles the bottom eight lines of every field. Everything the operator does to the picture is something a tape does to a signal.

Fade 退色. The one that earns the palette. A colour print does not turn pink because a designer picked pink; it turns pink because its three dyes die at different rates. Cyan is the least stable, so red climbs out first; yellow follows; magenta outlives both. Density decays exponentially, so the whole operator is one line of Beer–Lambert per channel — d′ = d · e^(−kt), with k = 0.62 / 0.13 / 0.40 — plus base fog from the support and the saturation lift every one of these images picked up on its way through somebody’s scanner. No colour in this piece is authored as purple. The 1997 palette contains a corporate navy, a seal red, a link blue and four greys. The violets and the hot magentas you see at the far end of the fader are those four greys and that navy, aged.

That is the argument, and the reason the whole thing is built the way it is: run the operations on genuinely sober material and vaporwave falls out. It is a process, not a palette.

The operators live on a machine

A row of HTML sliders under a picture would have made the six operators look like page settings. They are not page settings — they are what a transmission chain does to a programme — so they are a rack panel, and the browser window sits on top of it the way a monitor sits on the equipment it is monitoring.

The panel is drawn to the conventions of broadcast gear, because that is the trade this company is in: painted steel with a highlight along the top edge, four screws, an engraved bilingual legend, a type number and a serial, six faders with a scale beside each slot and a recessed window under each showing the quantity that is actually in effect — a transport ratio, a reverberation time in seconds, a phrase length in bars, a chroma bandwidth in kilohertz. To the right is the monitor section: an ON AIR tally, a peak meter with the usual fast-attack slow-decay ballistics reading the real output level, a two-key transport, a volume knob, and a readout showing which channel is loaded — which follows whatever you select on the site’s own CHANNELS page, so the machine and the website are wired to each other. Along the bottom, seven latching setting keys; pressing one drives the faders to that position rather than teleporting the values, and touching any fader afterwards releases the key.

The important part is what the panel is not subject to. Fade and Signal act on the picture coming out of the machine, so they have no business with the machine’s own front panel: nothing down there ages, bleeds, tears or widens, at any setting. Your hands stay in 1997 while the screen above them stops being able to. That separation is the clearest statement the piece makes — the operators are not a style laid over everything in view, they are a path that some things travel and others do not.

Drag a fader, or click it and use ↑ ↓ — shift for a coarse step. The selected fader’s legend lights and gets a rule under it, since a keyboard focus you cannot see is not a focus. Everything on the panel also exists as real form controls in the page, visually hidden but reachable by tab and readable by a screen reader, with the two kept in sync in both directions.

The site is a site

The window is real, within its own frame. The four toolbar buttons work and keep a history; the location bar shows the file you are actually on; the scrollbar drags, the wheel scrolls, the arrow keys scroll; hovering a navigation tab puts its URL in the status bar, the way it did. Clicking a news headline returns 404, because those pages were never written. The contact form takes typing — and watch what the width operator does to your own text — and submitting it fails with a 500 from /cgi-bin/toiawase.cgi, which is what would happen, since the script has not been on that server for a long time. The access counter goes up when you navigate. It is the only honest number on the page.

None of this is HTML. The whole site — masthead, tabs, tables, dotted leaders, beveled fields, the counter’s LED digits — is laid out and painted into a canvas by hand, in one pass that measures and draws at the same time, so that the document height needed by the scrollbar simply falls out of the last block. It has to be a canvas, because the signal operator needs the frame as pixels.

Channels

No.ChannelHoursWhat it is for
CH-01ATRIUM 朝の広場10:00–13:00Written to be heard across a volume rather than in a room
CH-02CONCOURSE 通路10:00–21:00The general channel; runs the whole trading day without a cadence
CH-03ASCENT 昇降機continuousProgramme length matched to a forty-two second rise. Nothing begins in it
CH-04FOOD COURT 食堂街11:00–20:00Louder, brighter, sixteen per cent faster than CH-02 by contract
CH-05CLOSING 閉店20:30–21:00For premises that would rather not play 蛍の光. Descends by design
CH-06AFTER HOURS 深夜21:00–Unattended premises. Not intended for broadcast while customers are present

Each channel is a key, a mode, a tempo and an amount of drum kit; the parts are built the same way for all six — a sustained pad on the chord change, a bass on the downbeat and the eleventh sixteenth, Rhodes comping off the beat as two-operator FM with a decaying modulation index, and a melody that stays on the ninth and the thirteenth so it never sounds like it is going anywhere. CH-06 is the reason this sheet exists. It is the channel the company supplies for premises with nobody in them: a mall’s music, still playing, at 58 BPM, to nobody. That is not a metaphor for vaporwave. It is a description of it.

PresetWhat it sets up
1997Everything at zero. The site as it was meant to be seen
Trading hoursA working day. A slightly tired VHS feed of a perfectly ordinary company
Closing20:30. The dye has started to go and the room has grown
After hoursCH-06’s own settings. Try it with CH-06 selected
Third generationA third-generation dub: the signal is destroyed, the tempo is not
MallsoftEverything slow, everything drowned, the type mostly ideographic
全開All six at maximum. Legibility is not among the design goals here

Reduced-motion is respected: the marquee, the blink, the frame stutter, the transport wow and the faders’ travel between settings all stop, and the six operators keep working. The signal chain costs real time per frame, so it is skipped entirely — a straight, crisp draw — whenever Signal sits at zero.

Where everything came from

Worth stating plainly, because a piece about running found material through a process invites the question of whose material.

Nothing here is found. No image is loaded, sampled, scanned or traced; no audio file is fetched or played back; no library is pulled from a CDN. Every pixel is drawn by the code on this page and every sound is synthesised by it — the Rhodes is two sine oscillators in an FM pair, the kit is a noise buffer through three filters, the reverb’s impulse response is decaying noise made at the moment you move the fader. The chord progressions are ordinary ii–V–I turnarounds, which are common practice and belong to nobody. The output stage is a make-up gain into a limiter, which is both why the desk’s meter reads what you actually hear and why turning the knob to the top cannot make it clip — a channel contracted to play in shops all day is the last thing that should distort.

The company is fiction, and deliberately unattached. 渚音場株式会社, its six channels, its capital and headcount, its 21,400 reels, all six premises on its installation list and the street its head office stands on were invented for this sheet. The location bar points at a subdomain of the documentation domain reserved for exactly this purpose, so the URL cannot resolve to anyone’s server. The browser window is drawn from the shared conventions of the period — title bar, bevelled buttons, location field, status line — and carries no product’s name or badge.

What is quoted is quoted by name only. 蛍の光 is mentioned as the tune Japanese shops customarily play at closing time; the melody is Auld Lang Syne and the 1881 Japanese text is long out of copyright, and in any case no note of it is reproduced or generated here. The type is the site’s own M PLUS 1 Code, under the SIL Open Font License, loaded the way every other page here loads it. The one borrowed fragment of code is mulberry32, Tommy Ettinger’s public-domain PRNG, marked as such in script.js; the YIQ matrices and the Beer–Lambert relation are published constants and physics.

The genre is a genre. Vaporwave’s name, its method and its subgenre labels are not anybody’s property, which is more or less the point it was making.