Skip to content
// Case Study CS5 · Artist

A playable studio room
for a keys player.

JBeez_Keyz is a keys player and producer with three new releases out in one September. The site puts visitors in his studio room: dark until you pull the chain, then a room you can play.

Client

JBeez_Keyz

Industry

Music & Live Performance

Status

Live

01 · Problem

New music.
Nowhere to land.

Three releases and 21 tracks landed in one month, and his links lived on a link-in-bio page. Fans, promoters, and venues needed one place to hear the music, see where he’s playing, and book him.

A link list can point to the music. It can’t show what it’s like to be in the room with him.

02 · Approach

Pull the chain.
Then play the room.

We built the site as a single room in WebGL: an image of his studio given real depth, lit bulb by bulb when you pull the chain, with the camera moving through it as you scroll. The records on the wall are his real releases, and the posters on the floor update from his show listings.

Everything underneath is real text, so the site reads for search engines and screen readers, and phones and reduced-motion settings get a version built for them.

03 · Build

What we shipped.

F1 · Chords in the Key of the Song

Chords in the Key of the Song

Eight keys on the keyboard play full piano voicings, and the chords follow the key of whichever song is playing. Every track’s key was detected from the audio, and he can adjust it from his admin.

F2 · A Room That Plays Back

A Room That Plays Back

Click the mixing board for a hardware-style panel with EQ, filters, a lo-fi tape setting, and tape stop, its meters moving with the music. Strum the guitar in key, and watch him nod along to the tempo.

F3 · Shows on the Floor

Shows on the Floor

He adds shows from a private admin with a flyer upload and a live preview, and each one is drawn into the room as a poster or ticket on the floor. Booking requests land in his inbox, sent from his own domain’s email.

F4 · Hidden in the Room

Hidden in the Room

A TV that plays his latest YouTube uploads, polaroids that lift off the wall, shelf figures with their own finishing moves, and a comic-book footer that inks into color as you hover.

// Selected screens

Lights on, then sit at the piano.

JBeez_Keyz — the lit studio room with his speech-bubble logo above the piano
// Lights on — the whole room
JBeez_Keyz — Play his chords: eight keys voiced in D minor to match the song
// Sit at the piano — chords in the song’s key
04 · Outcome

One room
for the music and the bookings.

jbeezkeyz.com launched with his three releases on the wall, a booking form wired to his inbox, and shows he can post himself.

Instead of a list of links, fans get a room they can play.

// Ready

Have a project like this?
Let's build your site.

Start a Project Back to all work