FLUOR 26

FLUOR 26 is the website of a three-night electronic music festival in the turbine hall of a power station that switched off in 2012. The page has to sell single-night and three-night tickets and answer the practical questions: when, who, how much, how to get there. Before it says any of that, it makes the festival's idea felt in the first second. The idea is sound you can see.

It is a concept site, made by the Laarpi team with Laarpi's library and process. The festival, the venue, the lineup and the tram line are invented, and the footer says so. The halls in the background are real photographs.

The idea

In the story, a forty-metre tank of fluorescent ink runs along the north wall of the Turbine Hall under UV light, with the sub-bass bolted to its frame. Every kick moves the ink, so you see the sound a moment before you feel it. The page is a model of that tank. The type is printed in the ink, your cursor stirs it, and the kick drum pushes it at 124 BPM.

The audience was set first: club-goers and electronic music fans, roughly 20 to 45, who travel for a lineup and care how a night looks as much as how it sounds. The voice was specific, dry and nocturnal. The brief also listed what to leave out: lasers, crowds with their hands in the air, stock photos of DJs, purple-to-blue gradients, hype words and exclamation marks, invented sponsors, and crude 3D stand-ins for real machinery.

The colour works like a three-plate risograph print where every ink has one job. Chartreuse is the type. Magenta is your hand. Cyan is the kick drum and the photographed halls. Warm white is only for reading. There are no CSS gradients anywhere: colour arrives only as ink, in halftone dots with a hair of misregistration, so overlaps print as overprint.

What you can do

• Stir the wordmark. FLUOR fills the screen in chartreuse ink. A ghost hand drags through it once on arrival, then it is yours: drag through the letters and they smear in magenta, then re-form where the liquid calms. Cyan plumes rise under them on every kick.
• Tip into the hall. In the venue chapter the flat page tips over into the floor of the hall. The photographed hall rises above the horizon as a cyan print, and the lettering on the floor, painted long like road markings, rewrites itself for each room: Turbine Hall, Boiler House, Pump House.
• Play the lineup. Eighteen acts are set at their own tempo, slowest and widest first. Each name's width is its BPM: 92 BPM runs at 200% of the typeface's width, 172 BPM at 50%. Point at a name and it melts into the ink while the kick switches to that act's tempo. On a phone, tap.
• Read the nights. Friday, Saturday and Sunday pour into the ink over a three-column timetable, named for the stages of fluorescence: Absorb, Excite, Emit.
• Choose a ticket. "Admit one", then four plain rows: one per night and one for all three, each with its own button.
• Find the way. The Tram 4 line is drawn in ink, stop by stop, with the night bus, bike racks and taxi drop-off listed below.
• Turn the sound on. The Sound button starts a minimal techno loop generated in the browser: kick, hats, an off-beat bass and a dub chord through a delay, in a generated concrete-hall reverb. Nothing is downloaded or recorded, and it starts only when you press the button.

How it's made

The ink is a stable-fluids simulation, the method Jos Stam published at SIGGRAPH 1999, running on the graphics card with vorticity confinement to keep the swirls alive. It holds three inks at once. The page's real text is drawn pixel-exact into the fluid, one font instance per width setting, and wherever the liquid has settled the type plate is pulled back into place, which is why the letters always re-form. A final print pass turns the three inks into halftone screens, each at its own angle, like a real riso plate.

The venue chapter reuses the same floor. It tips into a perspective view inside three photographed power-plant halls, CC0 HDRIs from Poly Haven tone-mapped to luminance and printed as a single cyan plate, and the wet floor reflects the windows.

The type is one variable family pushed to both ends. Science Gothic runs from 50% to 200% width: industrial signage at one end, a synth front panel at the other. The wordmark solves its own width so it always fills the frame, the lineup maps width to tempo, and the footer repeats FLUOR at the opposite end of the axis. Martian Mono carries every number, time and label. Text blocks knock the ink out behind them, so copy always sits on black. Choosing fonts that aren't Inter covers how to pick a face that can carry an idea like this. If the three-plate look suits your own project, the Riso Zine style is the closest direction in Laarpi's library.

The interactive website examples show where FLUOR sits among our other concept sites. For a real festival, gig or club night, the event website guide covers lineups, timetables, tickets and travel, and the music artist website guide covers the artist's side.

Speed

Measured on 6 October 2026, cold, with an empty cache, on our phone profile: slow 4G (1.6 Mbps down, 150 ms round trip), CPU slowed four times, a 390 × 844 screen.

The three hall photographs, about 580 KB together, wait until the first frame is on screen, so they never hold up the ink. The loader, "Filling the tank", draws the outline of the tank where the wordmark will be printed and fills it with chartreuse as the real progress arrives, its surface lifting one swell to a bar at 124 BPM. At 100% it drains from the bottom until only the type is left standing in ink.

Before this pass, the same page took 6.5 seconds on the same profile and pulled 1,257 KB from four origins. The libraries are now bundled to just what the site uses and served, with the fonts, from the site's own origin. Rendering resolution is capped (2× on desktop, 1.5× on phones), quality adapts to the device, and rendering pauses in hidden tabs. The phone profile slows the CPU but not the graphics chip, so real phones can take longer on the simulation. Fast websites with 3D explains the techniques.

Accessibility

With reduced motion on, the page becomes a still print: the same three plates, one baked stroke through the wordmark, and the venue as a plain section with rendered stills of each hall. Smooth scrolling is off. Nothing flashes, and the kick never goes above 172 BPM. The sound stays off until you turn it on. Navigation, the sound toggle and every ticket are ordinary buttons. Stirring the ink and melting the lineup are pointer and touch effects; every name, tempo, night and room is also written as plain text. Accessible motion covers these decisions for your own site.

Provenance and credits

A concept site made by the Laarpi team with Laarpi's library and process. It was not produced end to end by SI, Laarpi's website agent. Sites SI builds on its own carry a "Built by SI" label with their build time and cost.

Third-party pieces, all free for commercial use:

The fluid follows Jos Stam's "Stable Fluids" (SIGGRAPH 1999), with the general pass layout of Pavel Dobryakov's MIT-licensed WebGL fluid simulation as a reference; no code was copied. The type-in-ink restore, the scroll attachment, the halftone print, the loader and the sound are original to this site.

For more music on the web, see BASALT Tapes, a record you light and break into eight tracks, and Hortus Nocturne, another night out, this time in a garden. To start your own event site from this one, remix it.