The live demo was built from exactly this text — nothing added.

# Lo-fi Room Ambience Mixer

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

## Brief
Build [BRAND], an original single-page ambience mixer set in [ROOM_NAME], [ROOM_SETTING]. The first screen is a rich hand-drawn SVG room with five independently controlled ambient channels: rain, café murmur, fireplace, vinyl crackle, and birds. Each slider changes both a bundled local audio loop and a corresponding part of the room. Include a focus timer whose default duration is [FOCUS_MINUTES] minutes, three presets, and named mixes saved in localStorage. The default invitation is '[ROOM_TAGLINE]'. Sound is opt-in; everything else works immediately without an account.

- Audience: Creators, students, developers, designers, and anyone building a quiet focus space, an interactive portfolio piece, or a polished browser toy for people who enjoy customizable ambient sound.
- Goal: Let visitors understand the experience within five seconds, shape a visible and audible atmosphere without instructions, start a focused work interval, and return to favorite mixes on the same device. Keep the room dominant and make every visible control perform a real local action.
- Tone: Warm, unhurried, concise, and lightly poetic without becoming whimsical or vague. Use practical control labels and small moments of hospitality. Make no medical, sleep, productivity, or mental-health claims.

## Stack
- Framework: Vite 7 + React 19 + TypeScript 5
- Styling: Tailwind CSS 3.4 + custom CSS
- Libraries: react (MIT), react-dom (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 React 19.2, TypeScript 5.9, Vite 7.2, @vitejs/plugin-react, Tailwind CSS 3.4, PostCSS, and Autoprefixer. 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 a component, animation, audio, state-management, or routing library.
  - In vite.config.ts set base='./', plugins=[react()], build.outDir='dist', build.sourcemap=false, and assetsInlineLimit=0. Keep all production asset URLs relative and do not copy src/ into dist/.
  - Configure Tailwind content for ./index.html and ./src/**/*.{ts,tsx}. Add every Design color to theme.extend.colors, font families display=['Fraunces Variable','Georgia','serif'], sans=['DM Sans Variable','system-ui','sans-serif'], and mono=['IBM Plex Mono','monospace']. Put room-specific keyframes, range styling, SVG texture, and reduced-motion overrides in src/index.css.
  - Import @fontsource-variable/fraunces, @fontsource-variable/dm-sans, @fontsource/ibm-plex-mono/400.css, and @fontsource/ibm-plex-mono/500.css in src/fonts.ts. Self-host only the emitted Fontsource files; never request a font CDN.
  - Keep every visitor-facing string, channel definition, preset, SVG label, default variable value, and audio path in typed src/content.ts. Suggested component files are Header.tsx, RoomScene.tsx, MixerPanel.tsx, FocusTimer.tsx, MixShelf.tsx, SaveMixDialog.tsx, HowItWorksDialog.tsx, Toast.tsx, and Footer.tsx, composed by src/App.tsx for the single index.html page.
  - Create scripts/generate-audio.mjs with no dependencies. Use a fixed seeded PRNG, 22050Hz mono 16-bit PCM, and 12-second loops. Generate public/audio/rain.wav from layered filtered noise and droplet ticks; cafe.wav from band-limited unintelligible murmur-like noise with soft cup and spoon ticks, never speech or music; fireplace.wav from low filtered noise and seeded crackle envelopes; vinyl.wav from restrained pink noise, dust pops, and subtle mechanical hiss; birds.wav from seven original sine-glissando chirp motifs over faint leaf noise. Apply short seam crossfades, normalize peaks below 0.82, write canonical WAV headers, and make repeated runs byte-identical. Commit the five generated files; together they should be about 2.6 MB.
  - Implement src/lib/audio.ts with one lazily created AudioContext. Only after an explicit Listen press, fetch and decode the five exact local WAV paths, create one looping AudioBufferSourceNode and GainNode per channel, connect them through a master GainNode capped at 0.7, and start playback. Sliders call setTargetAtTime for click-free gain changes. Mute preserves the prior nonzero value; Pause sounds suspends the context without losing levels. Handle loading and decode failures visibly and never autoplay.
  - Implement src/lib/storage.ts with safe JSON parsing, schema checks, try/catch around localStorage, and keys derived from a lowercase hyphenated BRAND slug. Persist current channel levels, mute states, and up to eight named custom mixes. Do not persist or display calendar dates. Timer state may reset on reload.
  - Drive RoomScene.tsx from React state and CSS custom properties for the five channel levels. Update SVG attributes and classes only when controls change; use CSS transforms and opacity for continuous motion rather than rerendering the SVG every animation frame. Honor prefers-reduced-motion with static rain, flame, steam, record, birds, and instant interface state changes.
  - Use performance.now() and an absolute end time for the focus timer, updating the visible remaining time four times per second. Pause stores remaining milliseconds, reset restores the selected duration, and switching duration while stopped updates the ring. Completion announces 'Session complete. Take a breath.' in an aria-live region and may play a short synthesized chime only when the visitor already enabled sound.

## Variables
- [BRAND] — Ambience space name (default: "Nooklight"). An invented short name used in the wordmark, document title, storage prefix, and footer.
- [ROOM_NAME] — Room name (default: "The Amber Study"). A specific invented name for this illustrated space.
- [ROOM_SETTING] — Room setting (default: "an upstairs reading room on a rainy evening"). A short lowercase phrase describing the room and moment.
- [ROOM_TAGLINE] — Hero invitation (default: "Make a little weather for your thoughts."). One gentle sentence of roughly 35–55 characters; rewrite it when the room changes.
- [FOCUS_MINUTES] — Default focus length (default: "25"). A positive whole number of minutes from 1 to 120; use it for the initial timer and middle duration preset.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/lo-fi-room-ambience-mixer 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 Ink `#211C2A` — Page background, deepest shadows, and dark text on amber buttons.
- Panel Plum `#2D2637` — Mixer, timer, dialog, and saved-mix surfaces.
- Dusk Wall `#493C55` — Back wall of the illustrated room and secondary surfaces.
- Muted Lavender `#B9AAC2` — Secondary text and inactive icons on dark surfaces.
- Warm Cream `#F6E9D2` — Primary text, lampshade, paper, and highlights.
- Old Paper `#DFC9A9` — Books, labels, and soft border details.
- Honey Amber `#E8AA62` — Primary action, active slider, lamplight, and selected states.
- Ember Coral `#D87350` — Flame core, record label, and warm accents; not body text.
- Rain Blue `#8299B6` — Window sky, rain streaks, and cool ambient highlights.
- Leaf Sage `#8FA489` — Plants, birds' branch, success feedback, and quiet accents.
- Walnut `#765044` — Floor, desk, fireplace mantel, and furniture outlines.
- Fine Line `#51445D` — One-pixel borders and dividers on dark UI surfaces.

### Typography
- Room invitation and large timer numerals: Fraunces Variable (OFL), weights 600/700
- Interface, body copy, buttons, labels, and dialogs: DM Sans Variable (OFL), weights 400/500/600/700
- Volume percentages, timer presets, and tiny status labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base grid with an 8px dominant rhythm. Page maximum width is 1480px; desktop gutters are 28px, tablet 20px, and mobile 14px. Header height is 68px. Intro has 28px top and 24px bottom padding. Workspace columns have a 20px gap. Scene and panel padding is 20px; compact control rows use 10px vertical gaps. Keep 44px minimum pointer targets and at least 8px between adjacent targets.
- Radius: Scene card 24px, mixer and dialog panels 20px, preset cards 16px, standard buttons and inputs 12px, small icon buttons 10px, and status pills 999px. SVG furniture uses softly rounded joins rather than sharp geometric corners. Borders are one pixel; avoid nested floating cards and heavy glass effects.
- Motion: Rain streaks fall on three staggered linear loops while droplets creep down the glass. Rain level controls visible streak count, opacity from 0 to 0.8, and duration from 2.8 seconds at high volume to a frozen hidden state at zero.
- Motion: Café level raises two cup-steam paths and shortens their drift loop from 5.5 to 2.8 seconds; a tiny spoon glints every 4 seconds only above 35 percent. This is a restrained visual metaphor, not a separate café illustration.
- Motion: Fireplace flames scale and skew gently on staggered 700–1200ms loops. Fire level controls flame height, ember opacity, and the amber wash on the nearby floor; zero leaves unlit logs without smoke.
- Motion: The vinyl disc rotates once every 1.8 seconds while its level is above zero, with a subtle tonearm bob and two level bars. Reduced motion holds the disc still and uses the label and bars to show the setting.
- Motion: Two small generic bird silhouettes on the outdoor branch hop at most once every 5 seconds and leaves sway slowly. Bird level controls their visibility and motion; there are no mascots, speech bubbles, or musical-note particles.
- Motion: Buttons and cards respond in 120–180ms with at most 2px translation. Dialogs fade and rise 8px over 180ms. Toasts remain for 2.4 seconds. No scroll-jacking, parallax, autoplay, flashing, infinite text marquee, or cursor follower.
- Motion: Under prefers-reduced-motion, remove every ambient and entrance animation, show a complete static room, keep all state cues readable, and leave audio behavior unchanged.
- Imagery: Create one detailed original inline SVG room, viewBox 0 0 1200 760, with no raster images or external illustration. Use a straight-on slightly elevated cutaway composition: large rain window and branch on the left, books and a turntable on a walnut desk in the foreground, steaming cup on a side table, fireplace and amber floor glow on the right, an empty upholstered reading chair, shaded lamp, plants, framed abstract lines, and layered rugs. Add a static low-opacity SVG grain filter and two or three broad color washes for depth; do not animate noise. No people, faces, pets, characters, logos, branded products, recognizable landmarks, copied room compositions, or text baked into the artwork. The complete room is the first-screen visual anchor, not a small decorative thumbnail.

## Pages & Sections
### [BRAND] — [ROOM_NAME] (`index.html`)
1. **Header and room invitation** — The header contains an original inline SVG mark made from a rounded window and three rain strokes, the [BRAND] wordmark, and a small sage status dot with 'Room ready'. On the right, a BookOpen icon and text open 'How it works'; do not add navigation to nonexistent pages. Below, an uppercase mono eyebrow reads '[ROOM_NAME] · [ROOM_SETTING]'. The H1 is exactly [ROOM_TAGLINE], rendered as one or two balanced lines. Supporting copy reads 'Five sounds. One slower moment.' The document title is [BRAND] and the favicon uses the same original window mark.
   Layout: Use a full-width header inside the 1480px container with brand left and help action right. The intro is a flex row: eyebrow and H1 at left, supporting copy aligned to the lower right. H1 uses Fraunces 600, clamp(36px,4vw,56px), line-height 1.04, letter-spacing -0.025em, and Warm Cream. On screens below 760px, stack the intro with a 10px gap, use 36px H1, hide only the redundant 'Room ready' text, and keep the help control available.
   Motion: Header and intro appear together with a 300ms opacity transition; there is no staggered text reveal or typewriter effect. The help button uses a quiet border brightening on hover.
2. **Interactive illustrated room** — Fill the left workspace with the complete original SVG room described in Design. Every visual channel has a distinct location: rain and birds at the window, café steam at the cup, fire and light at the hearth, and vinyl at the desk. The initial levels are Rain 62, Café 24, Fireplace 48, Vinyl 18, Birds 0, so the first view visibly includes rain, steam, firelight, and a turning record without starting audio. A bottom-left scene caption shows [ROOM_NAME] and 'Visual mix active'; a bottom-right primary Honey Amber button with Volume2 or Pause icon reads 'Listen' before activation, 'Pause sounds' while playing, and 'Warming up…' while decoding. If audio cannot load, show 'Audio could not load. The visual mixer still works.' in an inline status region. The SVG has an accessible summary, while internal decorative paths are hidden from assistive technology.
   Layout: The workspace is a grid with minmax(0,1.65fr) for the scene and minmax(340px,1fr) for the controls. The scene card has a 16/10 aspect ratio, minimum height 520px, overflow hidden, Panel Plum background, Fine Line border, and a subtle 0 20px 60px #15101966 shadow. The SVG fills the card with preserveAspectRatio xMidYMid meet. Scene captions sit on #211C2AD9 solid-backed pills rather than over unprotected detailed art. Below 980px use one column with the scene first and controls second; below 600px use a 4/3 scene aspect ratio, no minimum height, 12px caption insets, and no horizontal cropping or page overflow.
   Motion: Apply the five reactive animation systems in Design directly from channel levels. The Listen button fades its label state over 120ms. Master pause affects audio only; the visible mix still responds to sliders. Reduced-motion users see all selected elements in static positions.
3. **Sound mixer and focus timer** — The right panel begins with 'Soundscape' and a small TextButton 'Reset levels'. Five rows in this exact order are Rain, Café, Fireplace, Vinyl, Birds, using CloudRain, Coffee, Flame, Disc3, and Bird Lucide icons. Each row has a text label, a separate mute icon button with an accessible name, a 0–100 step-1 range input, and a mono percentage output. The initial values are 62, 24, 48, 18, and 0. Moving a slider updates gain and scene intensity immediately; mute sets that channel to silence without erasing its previous level, and unmute restores it. Reset levels restores the five initial values with a toast 'Back to the original room.'

Below a divider, 'Focus timer' appears beside a Timer icon. Show remaining mm:ss in Fraunces 600 inside a circular SVG progress ring. Duration buttons read '15 min', '[FOCUS_MINUTES] min', and '60 min', with [FOCUS_MINUTES] selected initially. Primary button text cycles through 'Start focus', 'Pause', and 'Resume'; a separate RotateCcw button resets. The timer never starts automatically and completion changes the status line to 'Session complete. Take a breath.' without opening external notifications.
   Layout: Keep the entire right panel visible as one aligned surface with 20px padding and the same height as the desktop scene. Mixer rows are 58px high with 12px gaps; labels occupy 112px, the range flexes, and percentages are right-aligned at 42px. Use custom range tracks in Fine Line with Honey Amber fill and a 20px Warm Cream thumb with Night Ink border. The timer block is a 116px row with a 92px ring at left and duration/actions at right. On narrow mobile, keep each slider on its own full-width line below its label, maintain 44px targets, and let the panel height grow naturally rather than shrinking controls.
   Motion: Range fill and active states update without animated lag. The timer ring uses a 200ms linear stroke-dashoffset update. Timer buttons respond in 120ms. No pulsing ring, gamified streak, confetti, or celebratory modal on completion.
4. **Preset and saved-mix shelf** — Below the workspace, title the shelf 'Rooms for a moment' with supporting text 'Start with a blend, then make it yours.' Provide exactly three preset cards: 'Slow Evening' with Rain 62 / Café 24 / Fireplace 48 / Vinyl 18 / Birds 0 and copy 'Rain at the glass, a low fire, a little crackle.'; 'Café Corner' with Rain 18 / Café 72 / Fireplace 36 / Vinyl 24 / Birds 0 and copy 'Cup nearby, soft murmur, nothing urgent.'; 'Morning Pages' with Rain 0 / Café 12 / Fireplace 0 / Vinyl 8 / Birds 82 and copy 'Open the window and begin with the birds.' Each card shows five tiny labeled level bars, not an image. Activating a card updates all channels and the room, marks the card with aria-pressed, and does not start audio.

A bordered custom-mix area contains 'Your saved mixes', a 'Save current mix' button, and an initial empty line 'No saved mixes yet. Shape the room and keep one here.' Saving opens an inline dialog with a required input labeled 'Mix name', placeholder 'Rainy chapter', 24-character maximum, Cancel, and 'Save mix'. Store levels and mute states locally, show the name with miniature level bars, and provide Load and Delete actions. Limit saved mixes to eight with a visible explanation when full. Deletion requires one inline confirmation. Toast text is 'Mix saved on this device.' Do not show dates, accounts, cloud-sync claims, or fake sharing.
   Layout: Use a three-column preset grid with 16px gaps and a separate full-width saved-mix shelf 20px below. Preset cards are left-aligned with 18px padding, a 16px radius, Panel Plum background, and Fine Line border. The active preset has a Honey Amber border and small 'Current' pill. Saved mixes use a responsive two-column grid; at mobile widths presets and saved mixes become one column. The save dialog is centered at maximum width 420px with a Night Ink scrim at 70 percent, never a full new page.
   Motion: Loading a preset crossfades scene intensities over 220ms while audio gains ramp smoothly. The selected card changes border immediately. Dialogs use the standard 180ms entrance; deleting a row uses opacity only and reduced motion removes all transitions.
5. **How-it-works dialog and footer** — The help dialog is titled 'A room that follows your mix.' It contains three numbered rows: '01 Blend' with 'Move any slider. The matching corner of the room changes with the sound.'; '02 Listen' with 'Press Listen to begin all five local loops together. Pause whenever you like; your levels stay put.'; '03 Keep a mix' with 'Save up to eight atmospheres on this device, or start a focus interval while you listen.' A small note reads 'Five original procedural loops · CC0 · Stored with the site. No account, no streaming, no autoplay.' Close with a clearly labeled button, the X icon, Escape, or scrim click; trap focus and return it to the help trigger.

The footer left reads [BRAND] followed by 'A quieter corner of the browser.' The right contains plain text 'Original room art · Local audio · Your mixes stay on this device' and the optional [CREDIT] footer link when enabled. No social links, newsletter form, pricing, member counts, date, health claims, or invented accolades.
   Layout: The dialog uses Panel Plum, 20px radius, 24px padding, a Fine Line border, and three rows separated by subtle rules. Footer is a full-width flex row with 28px vertical padding and a top Fine Line border. On mobile it stacks with 12px gaps and the credit remains legible at 14px.
   Motion: Use only the standard dialog fade and 8px rise. The footer is static.

## Assets
- image: No third-party, stock, raster, or generated image files. Draw the entire hero room, window mark, favicon, furniture, plants, birds, fireplace, rain, vinyl, and texture as original inline SVG/CSS in RoomScene.tsx and the local favicon. Record in ASSETS.md that all scene art is code-drawn for this template and no external image assets are used.
- icon: Use only tree-shaken lucide-react icons (ISC) for CloudRain, Coffee, Flame, Disc3, Bird, BookOpen, Volume2, VolumeX, Pause, Play, RotateCcw, Timer, Save, Trash2, X, Plus, and Check. Do not import a brand icon set. In ASSETS.md list the imported modules, https://www.npmjs.com/package/lucide-react, Lucide contributors, and the ISC license.
- font: Self-host Fraunces Variable, DM Sans Variable, and IBM Plex Mono 400/500 through the specified Fontsource packages (OFL). In ASSETS.md list emitted local woff2 paths, package source URLs, copyright holders copied from the bundled OFL files, and the OFL license. No Google Fonts, Adobe Fonts, or other font CDN.
- video: Audio assets; no video. scripts/generate-audio.mjs deterministically creates public/audio/rain.wav, cafe.wav, fireplace.wav, vinyl.wav, and birds.wav as 12-second 22050Hz mono 16-bit original procedural loops. Bundle the generator and WAV files locally. These newly synthesized loops and generator source are original template assets released under CC0 1.0; document all five paths, the generator path, 'Original procedural audio generated for this template', and https://creativecommons.org/publicdomain/zero/1.0/ in ASSETS.md. Do not download recordings, imitate existing songs, or use intelligible voices.

## Don'ts
- Do not copy any existing ambience app's room artwork, layout, control styling, code, prompt, or exact copy; the specified SVG composition and interface must be implemented from scratch.
- Do not use recognizable brand names, logos, mascots, signature characters, product slogans, branded objects, custom fonts, unique reference icons, or an existing site's exact palette.
- Do not add real people, faces, celebrity likenesses, anime, game or film characters, pets, or recognizable landmarks. Birds are small generic silhouettes only.
- Do not hotlink or stream audio and do not use recordings without a verified redistribution-compatible CC0 license. Use only the five locally generated original CC0 WAV files and never fetch third-party audio.
- Do not autoplay sound, create an AudioContext before a user gesture, add background video, use intelligible speech, reproduce an existing melody, or make audio necessary to operate the visual mixer.
- Do not use a backend, server code, API routes, accounts, databases, external APIs, analytics, notifications, forms that submit anywhere, cloud sync, or sharing claims. Saved mixes and settings stay in localStorage.
- Do not load scripts, styles, fonts, icons, images, or media from a CDN. Self-host the fixed Fontsource fonts, tree-shake Lucide, use original SVG art, and keep all five WAV files in the build.
- Do not add npm dependencies beyond the fixed stack or use restricted UI source, commercial fonts, CC BY-NC, CC BY-SA, unlicensed packages, placeholder-image services, Unsplash, Pexels, or Pixabay.
- Do not turn the first screen into a typography-led landing page, a generic bento dashboard, a stock-photo hero, a pricing page, or a multi-step signup funnel. The interactive room and mixer are the product.
- Do not add scroll-jacking, parallax, flashing, autoplaying carousels, cursor followers, fake online activity, user counts, streaks, productivity scores, dates, medical claims, sleep claims, or mental-health claims.
- Do not emit source maps, copy src/ into dist/, use absolute root asset URLs, exceed 20 MB, or require a server. The single npm run build command must regenerate audio and produce minified relative-path static files in dist/.
- Do not add routes or bare-directory links. This is one index.html page; dialogs are local interface states and every internal help or preset control performs the behavior described here.
- Do not ignore mobile or accessibility requirements. At 1440×900 and 390×844 there must be zero console errors and no page-level horizontal overflow; all controls need labels, keyboard operation, visible focus, 44px targets, appropriate pressed states, and reduced-motion behavior.

---
— Prompt by VibeFather · https://vibefather.ai/t/lo-fi-room-ambience-mixer · 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.