Appropriately naming the theme of 2016 “controlled chaos,” digital design firm BASIC created a year-in-review microsite that features an unconventionally glitchy, gritty design scheme. Involving everyone in each of its departments, BASIC’s site represents an office-wide endeavor to break out of the usual, Swiss-style minimalism it is known for. “The brief was simple: make something unexpected and different and get people talking,” explains Matt Faulk, chief executive officer and executive creative director at BASIC. “The beauty of this project was all in the process. It was great to see ideas and concepts being passed around, refined and in many instances, completely reworked.” The site’s UI features smooth scroll animations and subtle fading text effects, all to the bass-heavy beat of an ambient soundtrack. Altering at peak frequencies, text distortions and image displacement maps contribute to the theme of “controlled chaos.”

The fully responsive site supports animations through desktop and mobile devices. Glitches are optimized to run in a 2-D canvas, allowing effects to function without the assistance of WebGL. A series of custom algorithms operate en masse, slicing images and SVGs into random-sized chunks and dismantled lines; to ensure smooth rendering across various screen sizes, BASIC’s algorithms generate and render images in chunk relative to their size. The chunks are transformed and repositioned using various patterns, creating glitches and distortions. To tie in the soundtrack with the visuals, the sound runs through various filters and analyzers that expose frequency data in real-time, which is then used to trigger on-screen distortions or render oscilloscope-type visualizations. For mobile browsers and devices, BASIC connected the audio analyzers with a Vibration API, triggering vibrations when certain frequencies peak and creating a tactile experience.