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.
A complete blog system was engineered for long-term SEO value - paginated listings, tag-based filtering, monthly archives, related post recommendations, social sharing, and reading time estimation. Every post, in every language, managed entirely through the CMS.
A contact form with intelligent category routing directs general inquiries, business development, and press communications to their respective teams - validated, rate-limited, and protected against automated abuse.
A custom cookie consent system replaced the previous third-party dependency, reducing external requests and placing privacy controls entirely within the platform's own infrastructure.
Performance was treated not as a final polish but as a structural constraint. WebGL initialization deferred via requestIdleCallback. Eleven of fourteen CMS bloks dynamically imported to slash initial bundle size. CSS animations replacing JavaScript-driven hero transitions. AVIF image delivery. Font loading strategies that preserve visual stability without blocking paint. Every optimization compounding toward a Lighthouse score that contradicts the visual richness on screen.
The Outcome
Performance Ascension - Lighthouse performance scores exceeding 95 on desktop, with a perfect 100 accessibility rating. WebGL effects, smoke transitions, and scroll-triggered animations coexisting with sub-second load times through surgical deferred rendering and code splitting.
Global Reach - Nine languages - English, German, Spanish, French, Polish, Portuguese, Chinese, Russian, and Turkish - each with locale-prefixed routing, SEO-optimized hreflang annotations, and Incremental Static Regeneration at sixty-second intervals. Content changes propagate worldwide in under a minute.
Editorial Independence - The marketing team manages every section, every image, every line of copy across all nine languages through Storyblok's visual editor. No pull requests. No deployment cycles. No developer bottlenecks. The CMS architecture was designed so that the developer becomes unnecessary for day-to-day operations - the highest compliment a system can pay its creator.
The Gaming Canvas - Custom WebGL confetti with 3D tumble physics and fragment shader trails. Multi-layer smoke compositing with viewport-aware lazy rendering. Framer Motion scroll reveals for content sections. A visual language that speaks to gamers without sacrificing the performance metrics that speak to search engines.
Mobile Dominance - Mobile-first responsive architecture with adaptive performance: canvas effects scale particle counts to viewport width, motion trails disable on smaller devices, and touch interactions are prioritized throughout. The mobile experience is not a compromise - it is the primary design target.
Content Engine - A blog system with four route types - paginated listings, individual posts with rich text and related content, tag-based filtering, and monthly archives. Built for organic discovery, equipped for long-term SEO growth, and entirely CMS-managed.