Copa City V2 - The Rebuild
Transforming a static one-pager into a high-performance, multilingual gaming platform.
The Predicament
Copa City's original website had carried the game's digital presence through its earliest chapters - a single scrollable page, functional in scope, limited in ambition. The blog existed but lay hidden. Mobile users navigated a desktop experience compressed to fit their screens. Nine language versions shared a CMS architecture so tightly wound that every content update required developer intervention.
The game was evolving. Its community was growing across continents and languages. The web presence could no longer afford to stand still.
"What was needed was not a facelift. It was a reconstruction - one that would preserve the brand's identity while dismantling everything underneath and rebuilding it for scale, speed, and editorial independence."
The Orchestration
The rebuild began not with code, but with architecture. Every decision served a dual mandate: immerse the visitor in Copa City's gaming world, and liberate the marketing team from the developer's calendar.
Forty-eight components were designed following Atomic Design principles - atoms, molecules, organisms, and Storyblok bloks - each a self-contained unit that the CMS could orchestrate without code changes. Fourteen Storyblok bloks map directly to page sections, every one of them editable in nine languages through a visual interface.
The design itself underwent three distinct evolutions. The first iteration honored the brand's original bright blue palette. The second deepened the tones. The third - a dark navy base with blue accents, gradients, and atmospheric lighting - became the definitive expression of Copa City's digital identity.
Two bespoke canvas systems create the atmospheric layer that distinguishes Copa City from conventional game marketing sites. A WebGL confetti canvas with custom vertex and fragment shaders produces three-dimensional particle physics - paper-like tumbling in brand colors, with motion trails that dissolve like stadium lights in rain. A smoke background system renders multi-layered radial gradients in additive blend mode, creating organic depth transitions between sections.
