Interactive Synth UI
Using motion and interaction to make the UI reflect the product
Overview
Continuum Audio is a fictional synthesizer brand built as a personal exploration of interaction design in Rive. The goal was simple but ambitious: design a product page where the UI itself feels like the product. Every interaction, from selecting a synth to hearing it play, was designed to reflect the tactile, sensory experience of working with a real piece of hardware. Six synthesizers, a palette of colors inspired by the clean yet characterful aesthetic of Teenage Engineering, and a set of interactions that respond, animate, and breathe, all built to push the boundaries of what a product page can feel like.
The Design
Continuum Audio (my fictional brand) lives in the space between retro and futuristic, the kind of aesthetic that feels familiar and forward-thinking at the same time. I drew inspiration from the almost toy-like design language of Teenage Engineering, and translated into a product line of six synthesizers each available in its own distinct color. The palette gives the page visual variety while keeping the overall experience cohesive, letting each synth feel like its own personality within the same family.
Rather than relying on traditional spec sheets, these product specs were reimagined as animated bars measuring warmth, growl, smoothness, fatness, and shimmer. I set out to build it as departure from the clinical language of most hardware product pages, using descriptors that actually reflect how a synthesizer sounds and feels rather than how it measures.
The Interactions
The guiding principle behind every interaction on the Continuum Audio page was that the UI should feel like the product it's selling. Synthesizers are tactile, responsive, and alive, and the page needed to reflect that.
When a user selects a synthesizer, an audio waveform animation plays over the product for a brief moment, as if the instrument is waking up. The spec bars animate to new values for each synth selected, giving the page a sense of responsiveness that makes browsing feel active rather than passive. Hitting play triggers an actual audio sample from the synthesizer alongside a live waveform visualization, turning a standard product preview into something closer to a performance.
Hover and click states were built into every interactive element, from the product selection to the play button, ensuring that every point of contact between the user and the page has a considered, intentional response. Nothing sits still. Everything reacts.
The Challenge
Continuum Audio was built specifically to push into more complex territory in Rive, including data binding, state machine animations, listeners, conditions, view models, and instances. Getting all of those systems to work together seamlessly inside a single screen was the real challenge.
The most difficult problem to solve was the interaction between product selection and the audio waveform animation, as that was my biggest vision for connecting the product with the UI itself. When a user clicks a synthesizer, the page needs to know which product was selected, trigger the correct audio sample, launch the waveform animation in the right place, and update the spec bars simultaneously. Getting all of those events to fire correctly and in the right sequence required careful scripting and a deep understanding of how Rive handles state and communication between components.
It was the kind of problem that looks simple on the surface and reveals its complexity the moment you start building it.
The More You Know
This exercise taught me that the most interesting design challenges aren't always visual. The aesthetic direction came together relatively quickly, but the harder work was making the interactions feel as considered and intentional as the design itself. Building in Rive at this level of complexity forced me to think less like a designer and more like a systems thinker, mapping out how every state, event, and condition connected before writing a single line of script. The project also reinforced something I already believed, which is that the best digital experiences happen when the UI and the product it represents speak the same language.