An AI Built a RESONANCE — Ember-8 Polyphonic Desktop Synthesizer Website — Here’s the Design Trick That Makes It Work

Before you orderOffer from Amazon

Get audio and creator gear delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

Step into the fictional workshop of RESONANCE, where an AI orchestrates the creation of a detailed, interactive synth site embedded with authentic hardware aesthetics. The centerpiece is the Ember-8, a polyphonic desktop synthesizer that invites users to play and explore its layered soundscape. Its signature move is the seamless integration of a tactile, rack-inspired interface with real-time audio visualization, all crafted through pure CSS and JavaScript—delivering a convincing, hardware-like experience in a digital space.

Designing RESONANCE’s site involved a carefully curated palette of muted charcoal, warm amber, and soft cream, echoing vintage rack gear. The interface features metallic gradients, pseudo-elements for screws, and layered textures that evoke real hardware panels. Typography choices lean on a monospace font for technical fidelity, while silkscreen-style labels add to the tactile feel. The interaction design relies on CSS transitions for knobs, LEDs that pulse with amplitude, and an audio-driven scope that visually responds to sound, all wrapped in a modular, rack-mount aesthetic—built entirely with semantic HTML, CSS, and Web Audio API, deliberately avoiding any external libraries to preserve authenticity.

The build process unfolded in three stages: initial development focused on translating the synth’s hardware layout into a static HTML prototype, followed by a rigorous critique emphasizing visual coherence, interaction fidelity, and accessibility; finally, an art director’s review ensured the design maintained an authentic boutique aesthetic while optimizing for performance and user engagement. The project was guided by a comprehensive code and design manual, detailing core functions such as the audio graph setup, visual scope rendering, and hardware emulation, which were meticulously implemented to create an immersive, responsive experience.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 12 of 175, “resonance”):
RESONANCE — a modular synthesizer studio. Fiction: boutique synth maker; the flagship unit is playable. Aesthetic: hardware rack: charcoal #16171b panels, brushed-aluminum CSS gradients, cream silkscreen labels, amber LEDs #ffb454. Fonts: dela-gothic-one (logo/display), ibm-plex-mono (panel labels). SIGNATURE: a functioning Web Audio synth panel — 8 playable keys (pointer + keyboard asdfghjk), 3 rotary knobs (drag to turn: filter cutoff, resonance, delay mix) drawn as CSS/SVG hardware knobs with indicator dots, waveform selector switch, and TWO live canvas scopes: oscilloscope (time domain) and spectrum bars (AnalyserNode). Audio starts only after explicit “power” switch click (autoplay policy). LEDs pulse with amplitude. Below: spec sheet table, three rack modules with panel art, ordering card. Unforgettable: you can actually play the website like an instrument.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/resonance/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the live RESONANCE synth environment firsthand and discover the intricate design behind its digital craftsmanship. Visit the dedicated showcase to explore all 175 sites in the series—each one a testament to how AI can craft convincing, tactile interfaces that bridge the gap between hardware and web. Dive in and see for yourself how this virtual boutique synth site redefines interactivity in audio tech storytelling.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 11: The Cartographer’s Society — est. 1831
• Room 8: CHROMA — Laboratory of Colour Perception

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI