Two Sides | synthesizer

Two Sides is a web synthesizer inspired by the aesthetic and music of the series «Stranger Things.» The interface is designed like a wall adorned with Christmas lights: red, yellow, and green bulbs establish the instrument’s color palette. It is a vibrant, slightly anxious, and nostalgic image that immediately evokes the world of the show, allowing users to feel immersed in its atmosphere. The instrument is designed so that anyone, even without knowing music theory, can compose their own piece and express mood through sound and color.

At the core of the concept lies the idea of two worlds: the instrument exists in two styles, like the World and the Underbelly. The «World» is warm and bright, with beige panels and vibrant colored lights. The «Underbelly» is dark, gray, and unsettling, where all colors turn red and the sound drops lower and thickens. Switching between them transforms the same synthesizer into two opposite sides of a single story.

The tool’s style is built on two states. The world is warm: beige panels, while red, yellow, and green repeat the garland’s colors and denote sound sources. The reverse side is cold and anxious: a gray wall, dark panels, everything red, and flickering. The same panel is used, only the color and background change; the shape remains the same. The shape is consistent everywhere: rounded panels, lamps, and sliders instead of knobs, because it’s easier to control them with a mouse. Inter font

I used simple, easily understandable buttons, yet styled them to match the chosen theme.

There are three sound sources: two synthesizers and drums. Each goes into its own channel, where the volume and panning are adjusted. The color of the source and the channel are the same. The channels merge onto a master bus, and from there, the sound passes through four effects in sequence: distortion, delay, reverb, and glitch. The sources are named synth1, synth2, and drums; the channels are ch-s1, ch-s2, and ch-dr; the effects start with fx-; the sequencer rows start with seq-row-; and the buttons start with btn-.

I used the Claude neural network. It helped me better understand how a synthesizer works and what I needed to write in the code for sound to be produced and for everything to function. I needed to grasp the overall structure of the synthesizer. This was my first time writing code that creates music, and writing code—especially JavaScript—was challenging for me. I also used ChatGPT to create the mockups. I developed the concept, design, and layout independently.