BASALT Tapes: Obsidian Hours

BASALT Tapes is a release page for Obsidian Hours, an eight-track LP by a fictional artist, recorded in one night inside a basalt quarry. The page sells three formats and fills five overnight listening sessions. Everything on it hangs off one object: a slab of black glass you light with your cursor, turn in your hands and break into the record's eight hours.

It is a concept site, made by the Laarpi team with Laarpi's library and process. The label, the artist and the record are invented, and the footer says so.

The idea

Obsidian is lava that cooled too fast to form crystals. When you strike it, it breaks in curved rings that spread from the point of impact, the same rings a record shows under a lamp. The record in the story was made the same way the glass was: one night, tape running, no second takes.

So the page uses the glass for everything a release page has to say. The slab is the record. Its eight shards are the tracks. Its fracture rings become grooves. The scroll is the night itself: the clock in the navigation runs from 22:00 at the top of the page to 06:00 at the bottom.

The brief set the audience first: listeners of experimental and ambient records who still buy physical editions, and the label's mailing list. It also listed what to leave out: hero video loops, rows of streaming logos, invented press quotes, neon gradients, card grids for the formats, and any 3D object built from basic shapes.

What you can do

• Light it. Move the pointer and a strip of light sweeps across the facets of the slab. Drag to turn it. With a keyboard, focus the slab and use the arrow keys.
• Break it. Scroll into the tracklist and ember-coloured cracks run out from one impact point. The slab parts into eight shards, one per track. As each row of the tracklist reaches the reading line, the light finds that track's shard.
• Hear it. Turn the sound on and each shard rings with a glass tone pitched by its size. Every track row has its own ring button, so it works without a pointer.
• Read the grooves. Under a loupe, the fracture rings straighten into the grooves of Side A, with four bands as wide as the real track durations.
• Choose a format. The shards close back into one slab beside the LP, cassette and download, set as ruled rows rather than cards. The page ends at 06:00, with first light raking the glass from below.

How it's made

The slab is a convex polyhedron, fractured in code around one impact point into eight convex shards. A custom shader traces each ray of light through the glass to where it leaves, which gives real refraction with a slight colour split at the edges. The core absorbs light, so it reads black, while thin edges turn smoky. The fracture ripples line up across every break.

There are no images, models or lighting files. The reflections come from a calculated night: a faint sky, black rock and one soft cold light low on the right, so no studio shape ever lands on a facet. The cursor light is a calculated strip light as well. A second object, a vinyl disc, carries the groove scene.

The type does the rest. Panchang at its thinnest weight sets the title as a hairline under the heavy black object, and appears at its heaviest exactly once, as the BASALT wordmark. Host Grotesk carries the reading. Fragment Mono sets hours, durations and catalogue numbers like a label on a specimen drawer. The palette is a black close to the glass, bone for type, ash for data, and one ember orange that means heat and nothing else.

The 3D website examples and interactive website examples show where this sits among our other concept sites. For a page about an artist rather than one record, the music artist website guide covers tour dates, press kits and mailing lists.

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 page stays light because nothing heavy is downloaded: the glass and its light are maths. Rendering resolution is capped (2× on desktop, 1.5× on touch screens) and drops when frames run long, rendering stops when the glass is off screen or the tab is hidden, and everything is released when you leave. The phone profile slows the CPU but not the graphics chip, so real phones can take longer on the shader work. Fast websites with 3D explains the techniques.

Accessibility

With reduced motion on, there is no smooth scrolling and no scroll-driven break. Each section cuts to a composed still, and all copy is visible from the start. Nothing flashes. The slab turns with arrow keys, every track can be rung from a button, and the sound stays off until you turn it on. Accessible motion covers the same 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 with licences that allow use on the web:

The cursor strip light follows Brian Karis's representative-point technique (SIGGRAPH 2013), and the bloom follows Marius Bjørge's dual-filter method (SIGGRAPH 2015), both written fresh for this site.

For two more objects you can handle, see PATCH-01, a synth module you can play, and Meridian M-01, a watch movement you can take apart. To start your own release page from this one, remix it.