dan Soulstatic had 57 mixes on Mixcloud and nowhere that felt like home for them. So we built a wall of cassette tapes and a boombox to play them on.
Most DJ websites look the same: a photo, a bio, and a long column of embedded players. It works. It also feels like scrolling a feed, which is the opposite of how anyone who loves records actually finds music. You dig. You pull something off the shelf because the cover caught your eye.
That was the brief for Soulstatic: make the archive feel like crate-digging.
The idea, and the problem with it
Every mix becomes a cassette. You browse a shelf of tapes, click one, and it drops into a boombox that plays it.
The concept came together fast. The problem was obvious just as fast: a boombox sitting next to a tape shelf is a desktop layout. On a phone, where most people would actually listen, there’s no room for both. If the idea only worked on a laptop, it didn’t work.
Two other constraints shaped everything. The audio had to stay on Mixcloud, so we’d be steering Mixcloud’s own player rather than building one. And browsing could never reload the page, because a reload stops whatever is playing. Nobody wants the music to cut out because they clicked “next page.”
Seven seconds of intro
The site opens on a black screen. The letters of the Soulstatic logo fade in one at a time, in a different random order on every visit. The “O” in the logo is a yellow 45 adapter, and it arrives already spinning at a true 45 RPM: one turn every 1.33 seconds.
Then a 7″ single fades in behind the wordmark, sized to real proportions around the adapter. It gives a small bump, grows past the edges of the screen, and its spindle hole opens up to reveal the site underneath. You literally enter through the hole in the record.
I traced the adapter from a photo of a real one so the arms, slots and hooked tips match the logo exactly. Details like that are the difference between “cool animation” and something that feels right to people who’ve handled records.
Intros can get annoying, so this one respects your time. A click or keypress skips straight to the reveal, and visitors who’ve asked their device for reduced motion get a short, still version instead.
57 tapes, zero extra images
Each cassette uses the mix artwork as its label, with the title handwritten on a strip in the brand yellow. Everything else, the shell, screws, reels and the little tab at the bottom, is drawn in CSS. That means 57 tapes cost no extra image files, and adding a new mix is just adding a new post.
The boombox has an amber display with the title, the time and a progress bar you can click to jump around. Piano keys handle back 30 seconds, play/pause, forward 30 seconds and next mix.
My favorite part is that it reacts to the music. While a mix plays, the reels turn, the speaker cones thump, and the tape visibly winds from the left reel to the right as the mix goes on. Glance at the deck and you can see how far into the mix you are.
The music never stops
The shelf shows 8 tapes at a time. “Load more tapes” and the genre filters both pull new tapes from WordPress and swap them in place, without reloading the page. Whatever’s playing keeps playing.
When a mix ends, the next one starts on its own. If it reaches the end of the shelf, it quietly loads more tapes and keeps going.
Solving the phone problem
On a phone, the boombox becomes a player bar, the same pattern people already know from Spotify and Apple Music. We didn’t need to teach anyone anything new.
- The shelf drops to two tapes per row.
- Pick a tape and a bar slides up along the bottom with a spinning reel, the title, the time and a play button.
- Tap the bar and the full boombox slides up as a sheet. Close it and the music keeps going, because the player stays loaded off-screen instead of being removed.
Same concept, same tapes, same boombox. It just gets out of the way on a small screen.
Under the hood
It’s a custom WordPress theme on Bootstrap 5. Mixes are their own content type with genres, and the Mixcloud link, length and tracklist are custom fields built into the theme. The About section is edited from the home page, and the contact form is a Gravity Form restyled for the black theme.
No page builder, no plugin pile. Soulstatic adds a mix the same way you’d write a blog post, and it shows up on the shelf as a new tape.
