Most beverage websites rely on

Most beverage websites rely on the exact same pale pastel themes, which quickly causes visual fatigue among digital natives. In real life, drinking a cold can comes with visceral cues: the metal snap of the tab, the gas release, and ice cold condensation. This project translates that offline tactile rush into the browser through high contrast layout architecture and real time audio feedback.

Key design and technical decisions:

Synthesized Audio UX: Instead of loading external audio files, a custom Web Audio API synthesizer generates the 1400 Hz metal tab click and the 4.8 kHz gas release in real time, triggering physical anticipation before purchase.

Tactile Interface: Heavy borders and hard offset shadows give interactive components an arcade feel. Buttons physically shift downward on click instead of fading.

Visual Proof: In place of generic 3D renders, the site uses 2K macro frost photography showing real condensation beads, paired with actual desk setup photography to validate the zero sugar formula.

Conversion Path: The catalog focuses on four core drops, preselecting a 12 pack bundle to minimize decision friction while driving average order value. A persistent bottom drawer and free shipping progress tracker streamline checkout.

Video Handling: Both widescreen and vertical commercial loops remain strictly muted to respect user control.

Built with React, Vite, Web Audio API, and Vanilla CSS tokens. Open for select high converting landing page and brand design projects on Contra.