Syrup Sounds

A musical agency website

About Syrup Sounds

Syrup Sounds, a London-based audio production company, approached us to design and build them a new website that would amass attention for the brand.

View more

Our Vision

Craft & Design

Working hand-in-hand with the team at Syrup Sounds we developed  several interactive audio prototypes. Using their branding as a jumping off point we produced wireframe tech demos to test with real users and find the happy medium for background sounds and interaction that would be additive to the overall experience.

The finished product shows off Syrup's fantastic work while providing a novel and memorable experience across all devices. This interactive  experience gained the agency exposure and attention across their channels and won several design and development awards.

Syrup Sounds Designs
Homepage desktop
Work section desktop
Projects list desktop
Studio page desktop
Contact page desktop
Various mobile screens

Development

The animated background was created by building a unique physics engine from the ground up. This allowed us to obtain the level of collision detection required for the small shapes to interact with the flowing lines along the bottom of the site. Shapes are randomly selected and generated according to the size of the user's browser, while the flowing lines are procedurally generated when the site is loaded, to keep the site feeling fresh on every new load.

We made use of the Web Audio API to play back sound effects when two shapes collide. This meant we could pan the sound between the user's left and right speakers, relative to where the shapes collided on the screen. All of the background elements were built dynamically in JavaScript and output as vectors, rather than bitmaps. This meant we could achieve a crisp and smooth appearance regardless of the dimensions of the user's browser or the angle of a shape during rotation.

Statistics

  • 14k unique users in the first month.
  • 26k page views in the first month.
  • Shortlisted for an FWA, CSS Design Awards and Awwwards