The brief
Samurai BLAQUE is a Bay Area producer selling untagged West Coast and cinematic beats. The job was a store on the producer's own domain where a rapper on a phone can hear a beat, read what the license covers, and pay, with no marketplace in the middle. It had to look like the music, a red-dusk world in black lacquer, and still behave like a plain, fast store.
What we made
- A beat store at samuraiblaque.com/beats with three packs and six singles, nine products in all, every one live in checkout on 2026-11-04
- Previews before you buy, 53 preview clips across the packs and singles
- Card checkout through Stripe, with the download link emailed after payment
- License terms on the page before the buy button: non-exclusive lease, untagged WAV and MP3, up to 100,000 streams and one music video
- An entry gate that plays the signature track on ENTER, with a plain "enter without sound" option and a simple fade for reduced motion
- A catalog that still shows all nine products and prices with JavaScript turned off, plus plain-text versions (llms.txt and beats.md) that search tools and AI assistants can read
How it works
Every product lives in one catalog file and only becomes buyable once its Stripe price is set, and a single switch can turn checkout off for the whole store. The buy button sends only the product key. The server looks up the price itself and opens a Stripe Checkout session, so nothing on the page can change what a buyer is charged.
When a payment completes, Stripe calls a webhook. It checks Stripe's signature, matches the product, and emails the buyer a link to the untagged files. If the email provider refuses the message, the order is logged for manual delivery and marked as not delivered, so a failed send is never silent.
The pages ship with strict security headers. Scripts may only come from the site itself, and the store can't be framed by another site. The test suite covers the player, the gate, the page transitions, reduced motion, the no-JavaScript page and the headers.
What we threw away
The first version of /beats worked, but it was built engineer-first, with preview buttons on each row that played in isolation. It was reworked against a fixed list of buyer checks: a preview starts quickly on tap, every product has a working preview and a working buy path, nothing scrolls sideways at 390 px, tap targets are at least 44 px, and the console stays clean.
The animated sun behind the page used to push the layout around as it moved. It now moves by transform only, and layout shift dropped from 0.53 to 0.
Limits
This pass did not place a test order. Checkout and delivery were checked by reading the code and the live catalog endpoint, not by a fresh purchase.
If the email provider is down, delivery falls back to a manual send.
The 95 passing tests ran on the local working copy, which has uncommitted changes, so they may not match the deployed build exactly.
The live Golden Hour pack says 29 beats on its label and lists 33 preview tracks. That mismatch is still on the page.
Samurai BLAQUE is a separate music brand. This page covers the store build, not the music.
