DJ Website Prompt — Dark Minimal DJ & Electronic Music Artist Website Design for Lovable, Claude, Bolt and more

# DJ Website — AI Prompt ## Goal Build a full artist website for **VØID** — a DJ and electronic music producer. Pure black foundation, acid green accent, and an aesthetic that reads like a signal oscilloscope meets high-end artist editorial. This is not a generic EDM template. No neon gradients, no purple hazes, no confetti. Just precise, dark, and alive — like the music itself. --- ## Tech Stack React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + shadcn/ui + lucide-react --- ## Design System — Colors ```css :root { --void: #000000; /* pure black */ --void-2: #0a0a0a; --surface: #111111; --border: #1f1f1f; --border-hi: #2e2e2e; --text: #f0f0f0; --text-soft: #555555; --text-dim: #333333; --acid: #aaff00; /* acid green — the only accent */ --acid-dim: #6a9e00; --white: #ffffff; } ``` Background: `--void`. Text: `--text`. Accent: `--acid` — used exclusively on active nav dots, CTA buttons, waveform bars, hover underlines, and key data points. Borders: `--border` (1px). Cards: `--surface`. No gradients, no blur effects except one frosted nav. Zero radius everywhere — all elements square. --- ## Typography ``` Google Fonts: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap ``` - **Display / headings**: `Space Grotesk`, weight 700, letter-spacing -0.04em. Uppercase where dramatic scale is needed. - **Body / UI**: `Space Grotesk`, weight 300–400, line-height 1.55 - **Data / labels / timestamps / track info**: `Space Mono`, 11–13px, letter-spacing 0.06em Hero headline scale: `clamp(72px, 13vw, 200px)`. Section headings: `clamp(48px, 7vw, 110px)`. All text in uppercase for display type. Mixed case for body. ```css .mono { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); } ``` --- ## Visual Effects ### 1. Animated waveform bars (hero background) ```css .waveform { display: flex; align-items: center; gap: 3px; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; padding: 0 var(--gutter); opacity: 0.15; } .bar { flex: 1; background: var(--acid); border-radius: 0; animation: wave var(--dur, 1.2s) ease-in-out infinite alternate; transform-origin: bottom; } @keyframes wave { from { scaleY: 0.1; } to { scaleY: 1; } } ``` Generate 80 bars. Each bar gets a random `--dur` between 0.6s and 2.2s and a random `animation-delay` between 0 and 1.5s. Creates an organic, breathing waveform across the full width of the hero. Acid green, low opacity — atmosphere only. ### 2. Glitch text on hover (artist name only) On `VØID` brand/hero text hover: ```css .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .glitch:hover::before { color: var(--acid); clip-path: inset(30% 0 40% 0); transform: translateX(-4px); animation: glitch1 0.15s steps(2) forwards; } .glitch:hover::after { color: #ff0055; clip-path: inset(60% 0 20% 0); transform: translateX(4px); animation: glitch2 0.15s steps(2) 0.05s forwards; } @keyframes glitch1 { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes glitch2 { 0%,100% { opacity: 0; } 50% { opacity: 1; } } ``` Red/green chromatic split for 150ms. CSS only. ### 3. Track row scan line on hover ```css .track-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(170,255,0,0.04) 50%, transparent 100% ); opacity: 0; transition: opacity 0.2s; } .track-row:hover::after { opacity: 1; } .track-row:hover { border-color: var(--border-hi); } .track-row:hover .track-num { color: var(--acid); } ``` ### 4. Staggered entrance ```js initial={{ opacity: 0, y: 32 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1], delay: index * 0.06 }} ``` ### 5. Horizontal event ticker ```css .ticker-track { display: flex; gap: 80px; animation: scroll 25s linear infinite; white-space: nowrap; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } ``` Content: upcoming show dates and venues. Duplicated for seamless loop. Space Mono 13px. Acid green `▸` separator. ### 6. Video background (hero) ``` Full-screen <video> autoPlay loop muted playsInline position: absolute inset-0, width/height 100%, object-fit: cover opacity: 0.18, mix-blend-mode: screen Top fade: linear-gradient(to bottom, black 0%, transparent 30%) Bottom fade: linear-gradient(to top, black 0%, transparent 40%) All hero content z-10 ``` The low opacity + screen blend means any dark performance footage reads as pure texture — not a literal video. ``` {/* Video brief: DJ performing at a dark club, turntables in foreground, crowd silhouettes backlit by strobe, slow motion, extremely dark and cinematic */} ``` --- ## Component Breakdown ### 1. Navbar (fixed, z-100) Pure black `--void`, no border on default. On scroll: 1px `--border` bottom appears. Layout: brand left · nav right · CTA far right. - Brand: `VØID` in Space Grotesk 700, 17px, white. `data-text="VØID"` for glitch effect. - Nav links: Music · Live · About · Contact — Space Mono 11px, `--text-soft`, acid underline on hover/active - Active page: tiny `▸` acid indicator left of link - CTA: `Booking →` — 1px `--acid` border, `--acid` text, transparent bg. Hover: acid fill, black text. - Mobile: hamburger → full-screen black overlay, links centered, large ### 2. Hero (§ 01) Full-screen `--void`. Video background at opacity 0.18. Waveform bars at bottom. Top bar (full-width, mono 10px `--text-soft`): ``` VØID · DJ / PRODUCER · BERLIN, DE · BOOKING OPEN · ▸ SPRING TOUR 2026 ``` 1px `--border` below. Center content (absolute center): - Status dot: tiny pulsing `--acid` circle + `AVAILABLE FOR BOOKING` in Space Mono 10px - Massive headline: `VØID` — Space Grotesk 700 uppercase, `clamp(120px, 18vw, 260px)`, white. Glitch on hover. - Below name: thin 1px `--border` rule, then `TECHNO · INDUSTRIAL · AMBIENT` in Space Mono 11px `--text-soft`, letter-spacing 0.4em Bottom of hero — two-column split bar, 1px `--border` top: - Left: `NEXT SHOW — FRI 09 MAY / FABRIC, LONDON` Space Mono 12px - Right: `TICKETS →` acid border button + `STREAM →` ghost button Pulsing dot animation: ```css @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(170,255,0,0.4); } 50% { box-shadow: 0 0 0 6px rgba(170,255,0,0); } } ``` ### 3. Event Ticker (separator) Full-bleed `--surface` strip, 56px, 1px `--border` top and bottom. Continuous horizontal scroll. Space Mono 12px. Content: ``` 09 MAY / FABRIC — LONDON ▸ 16 MAY / TRESOR — BERLIN ▸ 23 MAY / SHELTER — AMSTERDAM ▸ 07 JUN / PANORAMA BAR — BERLIN ▸ 14 JUN / OUTPUT — NEW YORK ▸ 28 JUN / ROBERT JOHNSON — OFFENBACH ▸ ``` ### 4. Music (§ 02) Section label: `02 / MUSIC` left · `Selected works, 2022—2026` right. Both Space Mono 10px `--text-soft`. 1px `--border` below. Heading: `SELECTED WORKS.` uppercase. **Track table** — full-width, monospaced data layout. Each row: ``` [NUM] [TITLE] [LABEL] [YEAR] [FORMAT] [▶] ``` - `NUM`: Space Mono 11px `--text-dim` — `001`, `002`, etc. - `TITLE`: Space Grotesk 500 16px white - `LABEL`: Space Mono 11px `--text-soft` - `YEAR`: Space Mono 11px `--text-soft` - `FORMAT`: small pill — `VINYL` / `DIGITAL` / `EP` / `ALBUM` — 1px `--border` - `[▶]`: acid green play icon, appears on hover right-aligned Scan line + acid number hover effect as described. Eight tracks: 1. **Dead Reckoning** · Ostgut Ton · 2025 · VINYL 2. **Signal Loss** · Tresor · 2024 · VINYL 3. **Null Space** · self-released · 2024 · DIGITAL 4. **Fault Line (12")** · Semantica · 2023 · VINYL 5. **Everything Goes Dark** · CLR · 2023 · DIGITAL 6. **Interior / Exterior** · Prologue · 2022 · VINYL 7. **Pressure Wave EP** · Blueprint · 2022 · EP 8. **Corridor** · Stroboscopic Artefacts · 2021 · VINYL Below table: `Stream on Soundcloud →` + `Discogs ↗` — both Space Mono 11px acid links. ### 5. Live (§ 03) Section label + heading: `UPCOMING SHOWS.` **Show cards** — stacked list, not grid. Each card: - Full-width, 1px `--border` bottom - Padding 24px 0 - Layout: `DATE` (mono) · `VENUE + CITY` (Space Grotesk 500 20px) · `TYPE` pill · `TICKETS →` button right - Hover: `--border-hi` bottom, acid left border 2px Nine upcoming shows: 1. 09 MAY · Fabric Room 1, London · HEADLINE 2. 16 MAY · Tresor, Berlin · B2B 3. 23 MAY · Shelter, Amsterdam · HEADLINE 4. 31 MAY · Corsica Studios, London · SUPPORTING 5. 07 JUN · Panorama Bar, Berlin · HEADLINE 6. 14 JUN · Output, New York · HEADLINE 7. 21 JUN · Concrete, Paris · BACK TO BACK 8. 28 JUN · Robert Johnson, Offenbach · HEADLINE 9. 12 JUL · De School, Amsterdam · RESIDENCY Type pill colors: HEADLINE = acid border / B2B = `--border` / RESIDENCY = acid fill, black text. Past shows toggle: `+ PAST SHOWS (47)` link below the list. Expands a collapsed table of past venues in mono, dimmed. ### 6. About (§ 04) Two-column: right 55% image, left 45% content. Left content: - Label: `04 / ARTIST` mono - Name in Space Grotesk 700: `VØID` - Bio paragraph 1: "VØID is a Berlin-based DJ and producer working at the intersection of industrial techno, dub, and modern classical. Residencies at Tresor and Panorama Bar since 2019." - Bio paragraph 2: "Releases on Ostgut Ton, Blueprint, Semantica and Prologue. Known for sets that move between club science and something approaching silence — then back again." - Two stats inline: `8` years active · `47` shows in 2025 - `Download Press Kit →` Space Mono 11px acid link with `↓` arrow Right image: tall (aspect 3/4), offset slightly down for visual tension: ``` {/* Image: DJ in profile at a mixing desk, dramatic side lighting against pure black background, hands on mixer, long exposure, smoke and colored light, cinematic portrait */} ``` ### 7. Mixes (§ 05) Section label + heading: `MIXES.` Three mix cards in a row. Each card: `--surface` bg, 1px `--border`. - Duration bar at top: thin progress bar showing total length, `--acid` fill at 0% (decorative) - Cover area: square image (aspect 1/1) with static noise overlay (CSS `background-image: url("data:image/svg+xml...") noise pattern`) - Below: mix title Space Grotesk 500 16px + venue/event + date mono + runtime mono - Hover: `border-color: --acid`; play icon overlays cover center ``` {/* Mix 1: abstract dark album cover, black with fine noise texture, geometric shape, acid green element */} {/* Mix 2: vinyl record close-up, extreme macro, grooves catching light, black background */} {/* Mix 3: dark club photography, DJ booth backlit, abstract motion blur, monochrome */} ``` Three mixes: 1. **TRESOR LIVE REC** · Recorded live at Tresor, Berlin · Jan 2026 · 01:48:23 2. **FABRIC 103** · Fabric Podcast Series · Nov 2025 · 02:14:07 3. **VOID SESSIONS #12** · Self-recorded, studio · Mar 2025 · 01:22:54 Below: `All mixes on Soundcloud →` centered, mono 11px. ### 8. Booking (§ 06) Full-bleed `--surface` section. Two columns. Left: - Label + heading `BOOKINGS.` - Body: "For booking enquiries, festival slots, residency proposals, and press. Response within 48 hours." - Three info rows (1px `--border` between each), Space Mono: - `MANAGEMENT` · management@void-music.com - `PRESS` · press@void-music.com - `GENERAL` · hello@void-music.com - Agent info: `European booking: Agency XYZ · +49 30 000 0000` Right: minimal form on `--void` bg, `--border` box. - Event name (input) - Event date (input, type=date) - Venue / City (input) - Expected attendance (input, number) - Type (select: Headline / Support / B2B / Residency / Festival / Other) - Message (textarea, placeholder: "Tell us about the event, the room, the crowd.") - Submit: `Send Enquiry →` — full-width, `--acid` bg, black text, Space Grotesk 700 ### 9. Footer Pure black, 1px `--border` top. Top row: `VØID` brand massive — Space Grotesk 700 `8vw`, white, line-reveal animation. Three-column below: - **Links**: Music / Live / About / Booking - **Socials**: Soundcloud / Instagram / Resident Advisor / Discogs / Bandcamp - **Label**: `VØID is represented by BLOC Agency for European bookings and PREMIER for US/international. All enquiries via booking form above.` Space Mono 10px `--text-soft`. Bottom bar (1px `--border` top): `© 2026 VØID. All rights reserved.` left · `Berlin, DE` right. Both Space Mono 10px `--text-dim`. --- ## Animations Summary | Element | Animation | Timing | |---|---|---| | Hero VØID | glitch on hover | 150ms, CSS only | | Hero entrance | opacity 0→1, y 40→0 stagger | 0.5s, 0.08s per element | | Waveform bars | scale-y oscillation | 0.6–2.2s random, infinite | | Status dot | pulse box-shadow | 2s ease infinite | | Event ticker | translateX(-50%) | 25s linear infinite | | Track rows | scan line fade-in | 0.2s ease | | Show cards | acid left border on hover | 0.2s ease | | Section content | fade-up staggered | 0.5s, 0.06s per card | | Footer VØID | clip-path line reveal | 0.9s cubic bezier | | Mix cards | border acid on hover | 0.25s ease | All scroll-triggered: `IntersectionObserver`, threshold 0.1. --- ## Responsive - **Desktop (≥1024px)**: Track table full columns, shows list full row, about 2-col, mixes 3-col. - **Tablet (768–1023px)**: Track table collapses label/year, about stacks image below, mixes 2+1. - **Mobile (<768px)**: Track table shows NUM + TITLE + play only. Shows: date + venue stacked, button below. Mixes: single column scroll. Booking form full-width. Hero headline `clamp(72px, 16vw, 100px)`. --- ## Full Copy Reference **Artist name**: VØID **Based**: Berlin, DE **Genres**: Techno · Industrial · Ambient **Active since**: 2017 **Management email**: management@void-music.com **Booking**: Via form + email above **Socials**: Soundcloud / Instagram / Resident Advisor --- ## Key Dependencies ```json { "motion": "^12.x", "lucide-react": "^0.4xx" } ``` --- ## Quick Notes - Artist name `VØID` swaps to any DJ name — update `data-text` attribute on the glitch element too. - The acid green `#aaff00` is the single brand color — swap to white (minimal), electric blue `#00e5ff`, or UV purple `#9d4edd` for a different mood. - The SoundCloud embeds, Resident Advisor links, and Discogs page are linked out — not embedded iframes. The AI builder won't handle third-party embeds reliably.