Acoustic Room Index for a Sound Agency

Build a high-fidelity responsive homepage for NORTHROOM, an independent sound-design agency creating sonic identities and spatial audio systems for museums, public spaces, and cultural venues. The visitor is a creative or experience lead who needs to understand how the studio thinks, inspect one representative project, and identify the people behind it. The first viewport must prove one job: entering a project room changes the acoustic character, credits, and playable scenario excerpt as one coherent body of evidence.

Compose the homepage as an acoustic room index crossed with an audio cue sheet, not a conventional agency hero. Use a compact identity bar, a three-room project index, one dominant acoustic score, a credits rail, and a bottom transport as a single full-viewport instrument. Avoid a text-left/image-right hero, project-card grid, showreel collage, client-logo wall, floating service pills, studio portrait, testimonial, generic gradient, or decorative waveform wallpaper.

Use this exact demonstrated content: NORTHROOM; Spaces made audible.; Room index; Salt Library; Transit Hall; Glass House; Enter Salt Library; Acoustic score; Dry 0.22s; Warmth 64; Excerpt 00:18; Direction; NORTHROOM; Composition; Milo Hart; Mix; Lena Orson; Scenario excerpt. Treat the reverb time, warmth score, and excerpt as fictional scenario material made for the interface. Do not add awards, client names, listening counts, campaign impact, venue outcomes, testimonials, or claims about measured visitor behavior.

Art-direct the index with chalk #f4f2ec, near-black #11120f, mineral blue #275d63, vermilion #e54c35, muted olive #85856b, and rule gray #c8c8bf. Pair a very wide grotesk for room names with a compact interface sans and tabular mono for time, score, and credits. Use square geometry, hard editorial rules, calibration ticks, cue-sheet notation, and one purposeful signal color. The score must be code-native HTML/CSS data notation rather than an image, decorative CSS illustration, or SVG waveform.

Start with Transit Hall selected and make Enter Salt Library the deterministic five-second preview action. During 0–1.0 seconds Salt Library receives selection and the interface announces that the room is being entered. During 1.0–2.4 seconds the room name expands across the score while fixed calibration marks resolve. During 2.4–4.0 seconds Dry 0.22s, Warmth 64, and the 00:18 scenario excerpt update in sequence. During 4.0–5.0 seconds Direction, Composition, and Mix lock to their Salt Library credits and the transport settles ready. The same action must be repeatable and the final frame must remain stable.

Support idle, entering-room, room-active, excerpt-playing, excerpt-paused, unavailable-excerpt, visible-focus, reduced-motion, and Save-Data states. The scenario excerpt transport may simulate playback locally but must be labeled and must not imply that copyrighted audio is loaded. Room selection, Enter Salt Library, and play/pause controls must be keyboard operable; use a polite live region for material changes and never communicate selection through color alone. Put one data-preview-ready marker on the settled root, exactly one data-preview-action marker on Enter Salt Library, and set data-preview-action-complete only after the stable final state.

At 960×600, keep the identity, room index, complete Salt Library score, credits, and transport inside the first 16:10 composition. Below 720px, order the page as identity, room tabs, room title, acoustic facts, score rows, credits, then transport; keep every label readable at 320px and never require horizontal scrolling. With prefers-reduced-motion or Save-Data, render the completed Salt Library state immediately, disable all score choreography, and keep room and transport controls usable.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, network request, live audio service, stock imagery, placeholder box, handmade SVG/CSS illustration, lorem ipsum, copyrighted mark, or explanatory prose outside the designed product. Keep UI text and controls semantic and include one quiet source-prompt link.