The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Music Streaming App with Lyrics

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original multi-view music streaming web app for [AUDIENCE], with a [MUSIC_MOOD] editorial catalog and the product promise '[TAGLINE]'. Open on the actual Library, not a marketing page. Include curated playlists, an editorial sample chart, a now-playing view with spinning vinyl and time-synchronized lyrics, local song comments and likes, a working queue drawer, and a mini player that persists across views. Feature the invented playlist [FEATURED_PLAYLIST], six fictional artists, original lyric previews, six coordinated abstract covers, and six original locally generated audio previews.

- Audience: The in-product listeners are [AUDIENCE]. The template itself suits music creators, product designers, developers, and indie hackers who need a polished static prototype with real audio, synchronized lyrics, social interactions, and continuous playback state.
- Goal: Let a visitor discover a track, play and seek its original preview, follow the active lyric line, read and add local comments, manage the upcoming queue, and move between catalog views without losing the current song. Every visible control must have a real client-side result and every track must have its own coherent cover, audio, lyrics, and comments.
- Tone: Intimate, editorial, precise, and quietly nocturnal. Write lyrics and listener comments as original English snippets with concrete images and restrained emotion. Keep utility labels direct and disclose sample data and local-only behavior without turning the interface into a disclaimer wall. Avoid music-platform clichés, fake popularity claims, and empty superlatives.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL), @fontsource-variable/dm-sans (OFL), @fontsource/ibm-plex-mono (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use Vite 5, React 18, TypeScript 5, Tailwind CSS 3.4, PostCSS, Autoprefixer, Motion, and Lucide React. package.json scripts are dev='vite', audio='node scripts/generate-audio.mjs', build='npm run audio && tsc -b && vite build', and preview='vite preview'. Do not add routing, state-management, audio, component, or animation dependencies.
  - In vite.config.ts set base='./', build.outDir='dist', build.sourcemap=false, and assetsInlineLimit=0. Produce one minified index.html application with relative asset paths and no src/ copied into dist/. Configure Tailwind with the Design colors, font families, tabular numerals, custom range styling, vinyl keyframes, lyric scrollbars, focus rings, and reduced-motion overrides.
  - Implement a small hash router without another dependency. Support exactly '#/', '#/charts', and '#/now-playing'; index.html without a hash shows Library, unknown hashes fall back to '#/', browser back and forward work, and the shared audio element and player context are never recreated on navigation.
  - Keep variable values, derived brand copy, playlists, six track records, artists, cover and audio paths, synthesis parameters, six timed lyric lines per track, comments, chart ranks and sample play counts, search keywords, alt text, and UI labels in typed src/content.ts. Rewrite every dependent value and all default proper nouns for supplied variables; do not leave late-night city copy in a different musical direction.
  - Create scripts/generate-audio.mjs using only Node built-ins. For each track, read its BPM, root note, scale, six-note motif, and seed from the track data and synthesize an original 18-second 22050Hz mono 16-bit PCM WAV: soft sine/triangle electric-piano notes with exponential decay, a restrained low kick, filtered high-frequency hat ticks, and very low seeded noise. Apply 40ms edge fades, a short seam crossfade, normalize peaks below 0.78, write canonical WAV headers, and make repeated runs byte-identical. Generate afterglow-avenue.wav, peach-static.wav, blue-hour-radio.wav, velvet-satellites.wav, glass-garden.wav, and midnight-orchard.wav into public/audio/; together they must remain below 5 MB.
  - Use one React player context and one hidden HTMLAudioElement. Track state includes currentTrackId, ordered queue IDs, isPlaying, currentTime, duration, volume, muted, lyricsEnabled, and queueOpen. Audio never autoplays on load or route change. Play, pause, previous, next, track selection, seek, volume, mute, and lyric-line seeking control actual audio; ended playback advances to the next queued track and stops cleanly at the end.
  - Derive the active lyric line from audio currentTime and each line's start seconds, clamping at the final line. Update progress with requestAnimationFrame while playing and audio timeupdate events otherwise. Keep the active line centered in the lyric viewport with smooth scrolling only when reduced motion is not requested; clicking a line seeks to its exact start and does not scroll the page.
  - Use one versioned localStorage namespace derived from a lowercase hyphenated BRAND slug for liked comment IDs, locally posted comments, followed playlist IDs, queue order, removed queue IDs, and the last selected track. Validate stored IDs against content data, handle unavailable storage without errors, and restore reloads paused at 0:00 rather than unexpectedly playing sound. Provide a confirmed Reset local demo action.
  - Use Motion only for short route, drawer, toast, comment, and queue-row transitions. Drive vinyl rotation and lyric activation from real playback state, pause animation while audio is paused or the document is hidden, and use useReducedMotion plus CSS media queries to replace rotation and smooth lyric travel with static states.
  - Implement the queue and mobile navigation as accessible drawers or dialogs with visible Close controls, Escape and scrim dismissal, focus trapping, focus return, and aria-modal semantics. Give every icon button an accessible name, use aria-pressed for toggles, maintain 44px touch targets, and announce track, comment, like, queue, and playback changes through a restrained aria-live region.
  - Import Fraunces Variable, DM Sans Variable, and IBM Plex Mono 400/500 locally through Fontsource. Download the six supplied cover images to their exact public/images/ paths before the first build; the build itself never fetches remote assets. Write ASSETS.md with every cover, generated audio file, font, icon package, source, author, and license.

## Variables
- [BRAND] — Invented listening service name (default: "Hush & Hue"). Use in the original wordmark, document title, playlist labels, storage namespace, and footer; derive a lowercase slug for local keys.
- [MUSIC_MOOD] — Editorial musical direction (default: "late-night electronic soul"). Rewrite the artists, song titles, original lyrics, playlist descriptions, comments, and audio motif settings to suit this direction.
- [AUDIENCE] — Primary listener audience (default: "night owls who read every lyric"). Adapt library recommendations and helper copy to these listeners without making claims about real users.
- [TAGLINE] — Listening service tagline (default: "Every lyric, right on time."). A concise original promise used in the featured playlist and document context.
- [FEATURED_PLAYLIST] — Featured playlist title (default: "Neon After Rain"). An invented playlist name that drives the lead collection, cover collage, introduction, and queue action.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/music-streaming-app-with-lyrics in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Night Plum `#17121D` — Overall app canvas, deepest vinyl background, and dark text on Apricot buttons
- Panel Plum `#241B2C` — Sidebar, playlist surfaces, chart panels, mini player, and comment composer
- Raised Plum `#30233A` — Hover rows, active navigation, drawer sections, and lyric-line background
- Warm Ivory `#FFF4E8` — Primary headings, active lyrics, song titles, and high-contrast icons
- Muted Lilac `#B8A9BC` — Secondary copy, inactive lyrics, metadata, and inactive controls
- Apricot `#FFB08A` — Play controls, active lyric accent, seek fill, chart highlight, and focus ring
- Dusty Coral `#D97971` — Liked states, small editorial markers, and secondary cover-art echoes
- Soft Mint `#A7C7B5` — Saved states, successful local actions, and queue status details
- Plum Line `#493A51` — One-pixel borders, table dividers, input outlines, and progress tracks

### Typography
- Featured playlist, page headings, active lyric lines, and editorial playlist titles: Fraunces Variable (OFL), weights 500/600/700
- Navigation, track rows, comments, buttons, forms, and general body copy: DM Sans Variable (OFL), weights 400/500/600/700
- Timestamps, durations, chart ranks, sample play counts, and compact labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base scale. The desktop shell has a 216px fixed sidebar, a minmax(0,1fr) main column, 32px main gutters, and an 88px fixed mini player. Main content has a 1320px maximum width within its available column. Page headers use 32px top and 24px bottom spacing; playlist cards use 18px padding and track rows 12px. Now Playing uses 32px stage padding and a 48px column gap. Mobile uses 16px gutters, a 72px mini player above 62px bottom navigation, 150px combined bottom clearance, and at least 44px pointer targets.
- Radius: Use 24px for the featured playlist and now-playing stage, 18px for playlist cards and the queue drawer, 14px for standard panels and cover frames, 10px for buttons and inputs, and full rounding only for compact chips, icon buttons, and the vinyl. Use one-pixel Plum Line borders and restrained 0 20px 60px rgba(10,6,14,0.32) shadows only on drawers and the now-playing stage.
- Motion: Route changes fade and settle the main content upward 6px over 180ms while the sidebar, mini player, bottom navigation, and current audio remain untouched. Move focus to the new page heading without resetting playback.
- Motion: The vinyl rotates once every 3.2 seconds only while audio is playing and motion is allowed. The cover label rotates with the disc; pausing freezes the current angle rather than snapping back.
- Motion: The active lyric changes color, opacity, and a 3px Apricot side rule over 160ms. The lyric viewport scrolls the active line to its center over 240ms; seeking or switching tracks updates immediately before any effect.
- Motion: Play, like, follow, queue-add, and volume controls give 120–180ms color or scale feedback without layout shift. New local comments enter with a 160ms fade and comment-like counts update once per visitor.
- Motion: The queue drawer enters from the right over 220ms with a fading scrim. Reordered rows use Motion layout transitions of 180ms; removed rows collapse without delaying the underlying queue state.
- Motion: Toasts remain for 1800ms and never cover the mini player. No autoplay, audio visualization unrelated to the actual track, bouncing music notes, continuous ambient particles, or scroll-jacking.
- Motion: Under prefers-reduced-motion: reduce, stop vinyl rotation, remove route travel, smooth lyric scrolling, drawer travel, and row interpolation while preserving instant active-line, playback, queue, and comment feedback.
- Imagery: Use exactly six local generated square album-cover illustrations in one coherent mixed-media style: layered translucent paper, brushed gouache, deep plum ground, apricot and dusty coral forms, restrained lilac and powder-blue accents, soft upper-left editorial light, fine analog grain, and bold full-bleed abstract compositions. No text, letters, numbers, logos, watermarks, people, faces, hands, recognizable characters, branded objects, famous landmarks, or existing album-cover layouts. The featured playlist combines four covers in a large two-by-two collage; the current cover fills the center label of a code-drawn vinyl with fine concentric grooves. Use original inline SVG for the service's open-oval-and-seed mark and favicon, plus generic Lucide icons for controls. Listener avatars are small original two-tone geometric SVG busts, never real portraits or initials-only identity placeholders.

## Pages & Sections
### Music Library and Playlists (`#/`)
1. **Shared application shell, search, and mini player** — Set the document title to '[BRAND] · [TAGLINE]'. The original open-oval-and-seed mark sits beside [BRAND]. Desktop sidebar links are Library '#/', Charts '#/charts', and Now Playing '#/now-playing', followed by playlist shortcuts and a small 'Local demo · original previews' label. The main top bar contains global search and a Queue button with the current upcoming count. Search matches song titles, fictional artists, and playlist names case-insensitively, shows up to six grouped results, and selecting a song loads it and opens Now Playing; clearing restores the current view. The mobile header keeps brand, Search, and Queue, while bottom navigation provides Library, Charts, and Now Playing. The shared mini player always shows current cover, title, artist, previous, play/pause, next, a keyboard-accessible seek range, elapsed and 0:18 duration, volume/mute on desktop, and Queue. On mobile it shows cover, two-line track identity, play/pause, Expand Now Playing, and Queue, with seek as a thin interactive top edge. Audio and progress continue unchanged across all three hash routes. The sidebar footer contains Reset local demo and the optional [CREDIT] link.
   Layout: At 1440px use the fixed 216px sidebar and 88px bottom player described in Design, with main content padded so neither obscures it. Search is minmax(220px,460px). Desktop mini player uses a three-column grid: minmax(220px,1fr) track identity, minmax(320px,680px) transport and seek, minmax(180px,1fr) volume and queue. Below 760px replace the sidebar with compact header and fixed bottom navigation, stack the mini player directly above it, and honor safe-area insets.
   Motion: Only the main view uses the route transition. The mini player is fully composed on first paint and never unmounts. Search results, mobile navigation, and player controls use the short shared transitions.
2. **Featured playlist visual anchor** — Eyebrow reads '[MUSIC_MOOD] · A [BRAND] ORIGINAL MIX'. H1 is [FEATURED_PLAYLIST]. Supporting copy is '[TAGLINE] Six original lyric previews for [AUDIENCE], pressed into one late-night set.' Adapt 'late-night set' when MUSIC_MOOD changes. Show '6 tracks · 18-second original previews · local audio'. The primary Apricot button 'Play playlist' loads Afterglow Avenue, sets all six tracks into the queue in catalog order, and begins only from that explicit gesture. The secondary 'Add all to queue' preserves the current track and appends only missing IDs. A Heart 'Save playlist' toggle persists and changes to 'Saved'. The large visual is a two-by-two collage of afterglow-avenue.webp, blue-hour-radio.webp, velvet-satellites.webp, and midnight-orchard.webp with no text baked into the artwork.
   Layout: Use a 12-column Panel Plum hero with copy in five columns and the square collage in seven, approximately 400px high on desktop. Copy has 36px padding and H1 uses Fraunces 600 at clamp(42px,4.5vw,68px). At mobile stack copy above a full-width 240px collage, keep H1 at 40px, and place actions in two full-width rows so the first 844px still exposes the artwork and primary play control.
   Motion: The collage enters once at opacity 0 to 1 and scale 1.015 to 1 over 320ms. Play and save update immediately; reduced motion removes the scale entrance.
3. **Curated playlist collections** — Heading: 'Made for [AUDIENCE]'. Supporting copy: 'Three ways into the same six-song catalog.' Render three playlist cards using existing covers only: [FEATURED_PLAYLIST] — 'City lights, soft synths, and lines that stay after the preview ends', using the four-cover collage and all six tracks; 'Peach on the Windowsill' — 'Warm static and brighter edges for a slower reset', using peach-static.webp and glass-garden.webp with tracks Peach Static, Glass Garden, and Afterglow Avenue; 'Side B Satellites' — 'A darker orbit for readers who like the space between lines', using velvet-satellites.webp and blue-hour-radio.webp with Velvet Satellites, Blue Hour Radio, and Midnight Orchard. Each card has Play, Save, and Add to queue actions with the same real behavior as the featured collection. Do not create empty playlist routes.
   Layout: Use three equal desktop cards with 18px gaps, square cover compositions above 20px copy, and compact action rows. At tablet use two columns with the third full width; at 390px use one column and preserve full titles without truncation. Cards are editorial surfaces, not generic bento boxes with unrelated metrics.
   Motion: Cards lift at most 2px on hover. Play, save, and queue buttons use the standard control feedback; no automatic carousel.
4. **Complete six-track catalog** — Heading: 'Tracks worth reading closely'. Label the duration column 'PREVIEW'. Render these exact default tracks in order, each with its matching cover, fictional artist, 0:18 duration, Play, Add to queue, and Open lyrics actions: 01 Afterglow Avenue by Mira & The Paper Moons; 02 Peach Static by Theo June; 03 Blue Hour Radio by Nia Sola; 04 Velvet Satellites by Aster Park; 05 Glass Garden by Elio Wren; 06 Midnight Orchard by Cass & Clover. Play selects the matching local WAV, makes it current, inserts the remaining catalog tracks after it without duplicates, and starts from the user gesture. Add to queue appends only if absent and confirms with a toast. Open lyrics selects the track paused at its current stored zero position and navigates to Now Playing. Every row exposes its own comments count from content data rather than one shared count.
   Layout: Use one Panel Plum table surface with hairline-separated rows rather than six floating cards. Columns are 36px rank, 56px cover, minmax(180px,1fr) title and artist, 110px comments, 64px duration, and 152px actions. At mobile use a two-row card: cover/title/artist/duration above full-width Play, Queue, and Lyrics actions; no horizontal table scroll or clipped controls.
   Motion: The current track row has a persistent Apricot left rule and small equalizer made of three bars driven only by isPlaying. Rows crossfade briefly on selection; reduced motion shows a static speaker icon instead.
5. **Original catalog and local-data note** — Finish with a compact editorial note titled 'Made to be listened to, not just looked at'. Copy: 'Every artist, lyric, comment, cover, chart position, and play count in [BRAND] is invented sample content. Six original procedural previews are bundled with this demo; your likes, comments, saves, and queue changes stay on this device.' Include 'Read the lyrics' linking to Now Playing and 'Reset local demo' opening the same confirmation as the sidebar. Do not add pricing, account sign-up, app-store badges, social proof, or marketing feature sections.
   Layout: Use a Raised Plum horizontal note with 24px padding, text left and actions right, stacking on mobile. Keep sufficient bottom clearance for the mini player and mobile navigation.
   Motion: Static except for link underline and dialog transitions.

### Editorial Sample Charts (`#/charts`)
1. **Chart introduction and top-three covers** — Eyebrow: '[BRAND] LISTENER NOTES'. H1: 'Six songs. One very subjective chart.' Copy: 'An editorial sample ranking for [MUSIC_MOOD], made for this fictional catalog. Play counts are illustrative, not live.' Show the top three as large linked cover compositions: 01 Afterglow Avenue with 48,206 sample plays; 02 Blue Hour Radio with 41,882; 03 Peach Static with 37,419. Selecting a cover or its Play action loads that track, retains the other chart entries in queue order, and opens Now Playing. Include a quiet 'Play chart' button that starts rank one and queues all six.
   Layout: The heading occupies the left two-thirds and Play chart sits at the lower right. Below, rank one spans six columns and two rows while ranks two and three each occupy three columns; covers remain prominent and ranks use IBM Plex Mono. At mobile use one horizontal top-three list of 112px cover cards inside its own snap container, with no page-level horizontal overflow.
   Motion: Covers scale to 1.015 on hover and the rank-one Play icon crossfades. No animated count-up or simulated incoming plays.
2. **Full chart table and working rank actions** — Render all six ranks in a single table: 01 Afterglow Avenue, Mira & The Paper Moons, 48,206 sample plays, movement '—'; 02 Blue Hour Radio, Nia Sola, 41,882, '+2'; 03 Peach Static, Theo June, 37,419, '—'; 04 Velvet Satellites, Aster Park, 29,764, '+1'; 05 Glass Garden, Elio Wren, 24,108, '-2'; 06 Midnight Orchard, Cass & Clover, 19,530, 'NEW'. Label the movement column 'EDITORIAL NOTE' so these are not presented as real time-based changes. Every row has Play, Add to queue, and Lyrics actions. A small info button opens an accessible explanation: 'Ranks, movement labels, and play counts are fixed sample data. Playing a preview does not change the editorial chart.'
   Layout: Desktop columns are 56px rank, 64px cover, minmax(200px,1fr) song, 130px sample plays, 130px editorial note, 72px preview, and 144px actions. Use tabular figures and hairline rows. Below 700px replace the table with stacked rows showing rank, cover, song, sample plays, and three labeled actions; wrap editorial notes rather than hiding them.
   Motion: Current track gets the Apricot rule and real playing indicator. All actions update immediately; there is no live ticker or automatic row reordering.
3. **Queue preview and listening guide** — A two-panel closing section contains 'Up next on this device' and 'How to listen'. The queue panel shows the first three upcoming track titles from actual shared queue state, with Open queue and Clear upcoming actions; an empty state reads 'Your queue is open. Add a track from the chart.' The guide lists three short steps: 'Press Play to unlock audio', 'Open Lyrics to follow or seek a line', 'Use Queue to shape what plays next'. A secondary 'Reset local demo' link uses confirmation and clears only local visitor state, not the fictional catalog.
   Layout: Use a 7/5 desktop grid with queue list left and guide right, 24px panel padding, stacking on mobile. The queue drawer is shared and described in Now Playing, so Open queue behaves identically here.
   Motion: Queue updates use the shared row transitions. Empty and populated states crossfade without delaying state changes.

### Now Playing with Synchronized Lyrics and Comments (`#/now-playing`)
1. **Vinyl stage and precise playback controls** — Default to Afterglow Avenue when no track has been selected. Show breadcrumb Library / Now Playing, eyebrow 'NOW PLAYING · ORIGINAL 18-SECOND PREVIEW', current H1 and fictional artist, and a Lyrics on/off toggle. The left visual is a code-drawn vinyl with concentric grooves, an Apricot center ring, and the current square cover cropped into the circular center label. The right stage contains transport controls Previous, Play/Pause, Next; elapsed and total time; seek; volume; Add to queue; and Open queue. Previous restarts the current preview when currentTime is above two seconds, otherwise selects the preceding queue item. Next follows actual queue order. Switching tracks swaps the cover, audio, six lyric lines, comments, and document subtitle together without remounting the shared mini player. Include 'Original procedural audio · no external stream' and never begin sound before a gesture.
   Layout: Use a 24px-radius Night Plum stage with a 5/7 desktop split: vinyl left, lyrics and controls right. Vinyl is min(34vw,430px) square with a soft Plum shadow. At mobile place a 180px vinyl above song identity and controls, keep transport buttons in one centered row, and move seek below with full-width volume inside an expandable Sound control. The fixed mini player remains visible but does not duplicate a second full transport row at 390px.
   Motion: Vinyl follows the playing-only rotation in Design. Track changes crossfade cover and title over 180ms, pause first, reset currentTime to zero, and leave playback paused until the visitor presses Play unless the change itself was a Play action.
2. **Time-synchronized scrolling lyric preview** — Every track has exactly six original lines with start times 0, 3, 6, 9, 12, and 15 seconds, ending at 18. Afterglow Avenue: 'Streetlights stitch the avenue'; 'Your shadow fits between the blue'; 'We trade the noise for something true'; 'Let every window find its hue'; 'Stay till the skyline turns brand-new'; 'Meet me where the morning breaks through'. Peach Static: 'Peach on the windowsill'; 'A soft electric thrill'; 'Every wire is standing still'; 'Then the room begins to glow'; 'Let the quiet current flow'; 'Meet me where the warm signals go'. Blue Hour Radio: 'Blue on the radio'; 'Half a thought and miles to go'; 'The harbor hums beneath the glow'; 'Keep the dial where the night is slow'; 'Every little frequency I know'; 'Leads me back through streets of indigo'. Velvet Satellites: 'Velvet on the satellite'; 'Paper planets circle light'; 'We give the dark a shape tonight'; 'Silver threads across the floor'; 'One small signal, nothing more'; 'Still it carries what we are reaching for'. Glass Garden: 'Glass around the garden wall'; 'Morning makes the petals tall'; 'Every color learns to call'; 'Through the leaves the daylight bends'; 'All the lines we thought were ends'; 'Open into rooms that never end'. Midnight Orchard: 'Midnight in the orchard rows'; 'Citrus on the cooling air'; 'Lanterns mark the branches bare'; 'We let the heavy daylight go'; 'Follow where the slow roots grow'; 'Find a little sweetness everywhere'. Render each as a real button with its start time; clicking seeks the actual audio to that line. The active line follows currentTime, previous and next lines remain readable, and Lyrics off replaces the list with the current cover, playlist description, and a Lyrics on button rather than blank space. For alternate values, replace all 36 lines with new original six-line previews that fit the rewritten tracks and use the same timestamps.
   Layout: The lyric viewport is 330px high on desktop with six lines in a vertically scrollable, mask-free list and 72px centering space above and below. Active text is Fraunces 600 at 36px, inactive lines 28px in Muted Lilac, all left aligned with comfortable wrapping. At mobile use a 300px viewport, active 29px and inactive 23px, timestamps 11px, and no horizontal clipping. When lyrics are off, the replacement panel has the same height so controls do not jump.
   Motion: Use the shared active-line and centering behavior tied to currentTime. Do not use CSS keyframe timing independent of the audio, fake karaoke word highlighting, or auto-scroll after playback has ended.
3. **Song comments with local likes and composer** — Below the stage show 'Listener notes' and the current track's comment count. Default Afterglow Avenue comments are: NicoPapers, 'The second line lands exactly with the soft drum. Tiny detail, big feeling.', 128 sample likes; MaraListens, 'This preview leaves enough room for the words. I opened the queue before it reached the last line.', 86; JuniperAudio, 'Blue Hour Radio next makes a perfect two-song night drive.', 54; SleeveNotes, 'That final avenue image deserves the whole skyline.', 31. Give every other track two unique original comments with fictional handles and sample-like counts in content.ts. Each comment has a geometric SVG bust, handle, body, and Heart like button; liking toggles once, adjusts the displayed count by one, and persists. Sort controls are Most liked and Original order. The composer identifies the visitor as Guest listener, accepts up to 240 characters with a live count, and states 'Your comment is posted only on this device.' Publishing appends a fully visible comment labeled 'Posted on this device', allows its deletion, and never sends or simulates replies. Empty and over-limit states give inline guidance. Do not display dates, relative times, online badges, or fake incoming comments.
   Layout: Use a two-column desktop area with the comment stream in eight columns and a sticky composer in four. Comments share hairline-separated rows on one Panel Plum surface rather than nested bubbles. At mobile place the composer first in a collapsible 'Write a listener note' disclosure, then the stream; all handles and long words wrap and like controls remain 44px.
   Motion: Likes crossfade fill and count over 140ms. New comments use one 160ms entrance and deletion collapses over 160ms. Sorting crossfades the list without moving the composer.
4. **Queue drawer and deterministic up-next behavior** — The shared Queue button opens a right drawer titled 'Your queue' with current track, Up next list, and 'Audio plays in this order'. Initially current is Afterglow Avenue and upcoming is Peach Static, Blue Hour Radio, Velvet Satellites, Glass Garden, Midnight Orchard. Each upcoming row contains cover, title, artist, 0:18, ArrowUp, ArrowDown, Remove, and Play next. Reordering swaps actual queue IDs; Remove deletes only that queue entry; Play next moves the item directly after current without starting it. Selecting a row's title makes it current and preserves its new queue position without duplicates. Include Clear upcoming with confirmation and Add chart to restore any missing chart tracks in rank order. Ended audio selects the next actual queue item, removes it from upcoming, and plays it only when the previous preview was already playing; the final item stops at 18 seconds with Replay available. Queue changes persist, while reload restores a paused player. Empty state offers Add chart and Browse library.
   Layout: Desktop drawer is min(420px,92vw), full viewport height, Panel Plum, with current track pinned at top and a scrollable upcoming list. Mobile is a full-width bottom sheet limited to 86dvh with a visible drag-free Close button and safe-area padding. Rows use 52px covers and two compact icon rows so reorder and remove remain accessible at 390px without covering the mini player's controls semantically; the drawer sits above all other UI.
   Motion: Use the standard 220ms drawer and 180ms row layout transitions. Queue state changes before animation, audio never waits for a row effect, and reduced motion makes all queue changes immediate.

## Assets
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/afterglow-avenue.webp to public/images/afterglow-avenue.webp. Alt: 'Abstract mixed-media avenue lights in apricot and coral on deep plum.' Use for Afterglow Avenue, the featured playlist collage, charts, vinyl label, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/peach-static.webp to public/images/peach-static.webp. Alt: 'Abstract peach arcs and soft signal lines in a grainy mixed-media composition.' Use for Peach Static, Peach on the Windowsill, charts, vinyl, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/blue-hour-radio.webp to public/images/blue-hour-radio.webp. Alt: 'Abstract powder-blue radio waves and a coral moon on textured plum paper.' Use for Blue Hour Radio, both playlist collages that include it, charts, vinyl, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/velvet-satellites.webp to public/images/velvet-satellites.webp. Alt: 'Abstract gouache satellite spheres and lilac orbital ribbons on deep plum.' Use for Velvet Satellites, featured and Side B Satellites playlists, charts, vinyl, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/glass-garden.webp to public/images/glass-garden.webp. Alt: 'Abstract translucent botanical shapes with apricot light and powder-blue shadows.' Use for Glass Garden, Peach on the Windowsill, charts, vinyl, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/9726b42a-9387-4af5-b970-450a99dff4e6/midnight-orchard.webp to public/images/midnight-orchard.webp. Alt: 'Abstract orchard circles and dark branches with coral fruit and lilac grain.' Use for Midnight Orchard, the featured playlist collage, charts, vinyl, mini player, and queue. Credit in ASSETS.md: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- icon: Use tree-shaken lucide-react (ISC) for Library, ListMusic, Disc3, Search, X, Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, ListPlus, ListVideo, Heart, MessageCircle, ArrowUp, ArrowDown, Trash2, RotateCcw, ChevronRight, Info, Check, Menu, Music2, Send, and MoreHorizontal. Draw only the original open-oval-and-seed brand mark, favicon, vinyl grooves, and geometric listener busts in SVG. Record Lucide's package source and ISC license in ASSETS.md; use no brand icons.
- font: Self-host Fraunces Variable and DM Sans Variable through @fontsource-variable/fraunces and @fontsource-variable/dm-sans, plus IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono (all OFL). Import only used local files, list emitted paths and copyright holders in ASSETS.md, and make no Google Fonts or other CDN requests.
- video: Audio assets; no video. scripts/generate-audio.mjs deterministically creates public/audio/afterglow-avenue.wav, peach-static.wav, blue-hour-radio.wav, velvet-satellites.wav, glass-garden.wav, and midnight-orchard.wav as original 18-second 22050Hz mono 16-bit procedural compositions from each track's own BPM, root, scale, motif, and seed. Bundle the generator and all six WAV files locally. Document them in ASSETS.md as 'Original procedural audio generated for this template', released under CC0 1.0 with https://creativecommons.org/publicdomain/zero/1.0/. No recordings, samples, external streams, intelligible voices, or imitation of existing songs.

## Don'ts
- Do not add a backend, server code, API routes, authentication, accounts, a database, websockets, analytics, external APIs, remote forms, real multi-user comments, or streaming services. Playback, likes, comments, saves, search, and queue behavior are entirely client-side.
- Do not use any existing music-service name, logo, mascot, slogan, signature palette, proprietary icon set, custom font, recognizable interface composition, trade dress, source code, or prompt text.
- Do not use real recording artists, bands, listeners, usernames, likenesses, celebrity portraits, endorsements, chart histories, comments, lyrics, or play counts. Every artist, person, lyric, comment, metric, and playlist is fictional and original.
- Do not bundle or request commercial songs, recordings, sampled audio, copyrighted lyrics, album covers, music videos, third-party playback widgets, remote streams, or external music APIs. Use only the six original procedural WAV previews and six supplied generated covers.
- Do not autoplay audio, create unexpected playback on route change or reload, reuse one audio file for different song titles, fake a seek bar, or animate lyrics on a timer independent of actual audio currentTime.
- Do not present chart ranks, editorial movement, sample play counts, comment likes, listener handles, or local playback as live activity. Never simulate incoming plays, likes, comments, replies, or online listeners.
- Do not add recognizable brand marks, text or logos inside cover art, existing album-cover compositions, real people's faces, anime or game characters, famous landmarks, or branded objects. Keep all six images abstract and in the specified shared mixed-media style.
- Do not hotlink assets or use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA media. Download the six exact covers to their declared local paths and list all third-party files and credits in ASSETS.md.
- Do not load scripts, styles, fonts, icons, images, or audio from a CDN. Use the fixed stack, self-host all Fontsource fonts, tree-shake Lucide, and keep the six WAV files and generator in the project.
- Do not use commercial fonts, restricted UI source, purchased templates, unlicensed dependencies, initials-only listener identities, external avatar services, or real avatar photographs. Use original geometric SVG busts and allowed licenses only.
- Do not turn Library into a marketing landing page, typography-only hero, pricing funnel, generic analytics dashboard, or static music-card gallery. The first screen must contain the rich working playlist app and prominent cover collage.
- Do not leave search, playlist play/save/queue, track selection, playback, seek, volume, lyrics, lyric seeking, comments, likes, sorting, queue reorder/removal/clear, reset, or mobile navigation nonfunctional. Every visible control needs a real local result.
- Do not allow duplicate queue IDs, lose playback on hash navigation, restart the current song when opening Queue, advance after a paused track ends, loop the final track automatically, or restore audible playback after reload.
- Do not emit source maps, copy src/ into dist/, use absolute root asset URLs, exceed 20 MB, or require server fallback. The single npm run build command must regenerate all six audio files and produce minified relative-path static files in dist/.
- Do not add HTML entries, routing libraries, bare-directory links, or server-dependent URLs. Keep exactly the declared hash routes and make unknown hashes show Library.
- Do not hard-code BRAND, MUSIC_MOOD, AUDIENCE, TAGLINE, or FEATURED_PLAYLIST outside src/content.ts, leave variable tokens visible, or retain default song titles, lyrics, artists, comments, alt text, or motif copy when values change.
- Do not introduce horizontal overflow, clipped lyrics, inaccessible icon-only controls, tiny touch targets, keyboard traps, focus loss, or console errors. Verify all three views, playback, comments, and queue at 1440×900 and 390×844.
- Do not ignore prefers-reduced-motion. Stop vinyl rotation and nonessential travel, disable smooth lyric scrolling, and preserve instant lyric, playback, queue, and comment feedback while leaving user-initiated audio functional.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, visible calendar dates, relative comment times, or keyword-stuffed content. A plain [BRAND] document title and original favicon are enough.
- Do not mention VibeFather inside the product UI except the optional small [CREDIT] sidebar footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/music-streaming-app-with-lyrics · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.