A custom WordPress site that turns a DJ’s Mixcloud archive into a crate of cassette tapes you play on a virtual boombox.

Overview

The brief

Soulstatic had 57 mixes on Mixcloud and wanted a home for them that felt like the music: crate-digging, not scrolling a feed. A page of stacked Mixcloud embeds would have worked, but it would look like every other DJ site.

The idea was a wall of cassette tapes and a boombox to play them on. The risk was obvious from the start: a boombox beside a tape shelf is a desktop layout, so the concept had to hold up on a phone too.

Two constraints shaped everything. The audio had to stay on Mixcloud, which means playing through its embedded player rather than our own. And browsing could never reload the page, because a reload stops whatever is playing.

The intro

The site opens on the Soulstatic logo assembling itself on a black screen, then hands off to the music in about seven seconds.

1. The letters fade in one at a time, in a different random order on every visit.
2. The yellow 45 adapter that forms the logo’s “O” fades in, already spinning at a true 45 RPM: one turn every 1.33 seconds.
3. A 7″ single fades in behind the wordmark, sized to real proportions around the adapter.
4. The record gives a small bump, then grows past the edges of the screen. Its spindle hole opens into an expanding circle that reveals the home page underneath.

The adapter is traced from a photo of a real one, so its arms, slots and hooked tips match the logo. The reveal keeps the record and the cut-out in step frame by frame, so the page appears through the hole in the record itself. Visitors who prefer reduced motion get a short, still version instead, and a click or keypress skips straight to the reveal.

The tape shelf and boombox

Every mix is a cassette, and clicking one drops it into a boombox that plays it.

• Tapes: each cassette uses the mix artwork as its label, with the title handwritten on a strip in the brand yellow. Shells, screws, reels and the bottom tab are all CSS, so 57 tapes cost no extra images.
• The boombox: an amber display shows the title, time and a progress bar you can click to seek. Piano keys handle back 30 seconds, play/pause, forward 30 seconds and next mix.
• 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 progresses.
• Browsing: the shelf shows 8 tapes at a time with a “Load more tapes” button, and genre filters swap the shelf in place. Both fetch from WordPress without a reload, so the music never stops.
• Continuous play: when a mix ends the next one starts, loading more tapes from the server when it reaches the end of the shelf.

Designing for phones

On a phone the boombox becomes a player bar, the same pattern people know from Spotify and Apple Music.

• The shelf drops to two tapes per row.
• Picking a tape brings up a bar along the bottom with a spinning reel, the title, the time and a play button.
• Tapping the bar slides the full boombox up as a sheet. Closing it keeps the music going, because the player stays loaded off-screen rather than being removed.
• The nav drops the hamburger menu: the logo and the three section links sit stacked and centered, sticky at the top.

How it’s built

WordPress holds the mixes and hands the page 8 tapes at a time; the boombox steers Mixcloud’s own player and redraws itself from the progress it reports back.

• Theme: a custom WordPress theme on Bootstrap 5. Mixes are their own post type with a Genres taxonomy, and the Mixcloud URL, length and tracklist fields are registered in code with ACF Pro, so they ship with the theme.
• Paging: a small REST endpoint returns the next 8 tapes as ready-made HTML from the same template the page uses, so the first load and “Load more” can’t drift apart.
• Playback: the boombox talks to Mixcloud’s embedded player through the Mixcloud Widget API, sending play, pause and seek, and listening for progress and the end of a mix.
• Intro: SVG and CSS animation. The reveal is a circular CSS mask whose radius is recalculated each frame from the record’s scale.
• Cassettes: sized with CSS container query units, so the same tape scales cleanly on the shelf, in the deck and on a phone.
• About and Contact: About is edited through custom fields on the home page; Contact is a Gravity Form restyled for the black theme.
• Accessibility: reduced-motion settings are respected throughout, and the intro can be skipped with a click or a key.