After Hours
A listening club you enter through a moving night scene
Visit websiteI created a fictional listening club with a courtyard that follows the cursor, glitching navigation and three original sound sessions
Give the small hours a place of their own
After Hours is a fictional listening club for the space between one day and the next. I built its identity around a rain-soaked courtyard, violet light and thin, widely spaced lettering. One invitation leads from the entrance into three listening sessions.
Active Theory’s spatial navigation was the reference for the feeling of moving through a place. After Hours gives that interaction its own setting and purpose: a quiet room where visitors can choose a mood, start listening and stay as long as they like.
Make navigation feel like entering the scene
The courtyard artwork is mapped onto a surface with depth in Three.js. A softly following camera responds to the cursor, so the foreground and distant doorway shift by different amounts. Rain adds another moving layer, while the title stays positioned within the view.
Entering the club moves the camera forward and brings the interface into view through brief horizontal slices, displaced letterforms and a colour-split effect. Oversized session titles sit to the right, with supporting text on the left and navigation at the edges. The same visual language connects the entrance, session list, player and club information.
Give each session a different musical identity
Still Awake combines filtered rain with long, dark drones and no beat. Slow Motion introduces an 82 BPM groove with drums, syncopated bass and warm keys. First Light moves into a brighter register with major-key chimes and stereo echoes at 104 BPM.
The browser generates the sound live using the Web Audio API. Each session has its own instruments and arrangement. Switching sessions briefly fades out the previous sound, and visitors can pause playback or adjust the volume. Sound starts only after they choose to listen.
A complete experience, from entrance to listening
The finished site combines a distinct brand, cursor-responsive scenery, glitch navigation and three original generative soundscapes. Direct links open each session, mobile layouts keep the controls within reach, and the scene can be paused or displayed with reduced motion.
After Hours is an independent design concept. It demonstrates brand direction, interaction design, creative development and sound design through a working public website.