LSDJ website

Static product page for LSDJ (Latent Space DJ), an instrument for real-time AI music. No build step: plain HTML, CSS, and one small JS file.

Run locally

python3 -m http.server 8080
# open http://localhost:8080

Structure

Section flow: top bar, hero, impossible-combo ticker, features (bolted rack), listen (waveform players), learn (tutorial video), fully-local CTA, footer.

• index.html — the whole page.
• css/styles.css — design tokens carried over from the app (lsdj/frontend/src/ui/tokens.css): deep matte black, Space Mono, hard square corners, the cyan/lime/violet accent triad, opened up for a marketing page. The layout leans into a hardware-rack metaphor (bolted feature cells, LED micro-tags, a scrolling combo ticker, VU-style meters).
• js/main.js — progressive enhancement only: the animated brand mark, live GitHub star count, the Listen players (play + level meter), the per-card waveform placeholders, and the video play stub.
• assets/ — brand mark, favicon, Space Mono woff2 subsets, demo gif.

Placeholders to swap later

• Featured video (#watch): the framed play button currently opens the repo. Drop a real <iframe> / <video> into .video-frame.
• Listen players (#listen): each card shows a canvas waveform in its media well. To finish a card, drop <img class="pad__img" src="…" alt="…"> into the .pad__media (it covers the waveform), and add data-audio="url" on the .pad so play actually plays a take.

House style

Copy uses no em-dashes (colons, commas, or sentence splits instead). Frontend convention matches the app: single quotes, no semicolons in JS.

Star button and links point at github.com/protocol-works/lsdj.