House Cleaning Records
Visit the live site
Overview
House Cleaning Records is a Seattle house-music label and event company run by Kyle and Jenn, built around deep, groovy, west-coast house.
Platform
- Webflow
Audio
- HTML5 Audio
- Live stream endpoint
Interaction
- Splide
- Swiper
Custom code
- Webflow Embed (radio bar)
The Problem
A new label with no real online presence, competing for attention against established names in the genre.
Key challenges included:
- No site to point people to for gig requests or credibility
- Needed to position against established house labels like Defected, Toolroom, Dirtybird, and Insomniac
The Solution
Started with real competitive research before touching design, then built a site meant to funnel bookings.
Discovery
Market research against established house-music labels to define where HCR fit before any design work started.
Build
Figma wireframes and mood boards, a full site map, visual design, and a dark-themed build with an HCR Radio player and resident DJ bios — built to funnel gig requests, not just look good.
Under the Hood
A persistent radio bar inside a page builder
The station needed audio that keeps playing while people move around the site, which is not something Webflow does natively. The bar is a native Designer component for structure and styling, with a single Embed carrying the audio logic. Keeping roughly twenty style classes as real Designer elements means the client can restyle it without touching JavaScript, which is the difference between a feature they own and a feature they have to call someone about.
Play state as a class on the document
No animated element tracks the audio object. Playback toggles a single class on the html element. Anything on the page can then react to it in pure CSS. That is how the turntable record on the homepage spins only while audio is playing, without the homepage and the nav bar needing to know about each other.
Motion that carries information
The live indicator pulses via a keyframed box-shadow, so at a glance it reads as broadcasting. The track title scrolls as a marquee only when it overflows its container, because permanently scrolling text is an accessibility problem and a distraction when it is not needed. Both are decoration doing a job.
Reduced motion actually respected
A prefers-reduced-motion block disables the spinning record, the pulsing dot, and the marquee outright. Slowing them down is not the same thing. For anyone with a vestibular sensitivity, a continuously rotating element on every page is the exact thing that setting exists to stop, and honoring it is a few lines that most builds skip.
Timeline
- Sep 2022: Contracted
- Jul 2023: Delivered
The Outcome
Shipped a dark-themed label site built around booking DJs attached to HCR — the discovery-first process is the throughline worth telling here.