The Spanish site rebuilt: a design system shipped as a private npm package, a homepage reworked over several iterations, and the motion that carries both.
A high-traffic site that had grown by accretion, still on Vue 2 and still shipping copy changes as developer tickets. The redesign had to do three things at once: move the codebase to Vue 3’s Composition API, give the marketing and content teams sections they could author themselves, and make the result feel like a brand page rather than a catalogue.
Vue 2 to Vue 3’s Composition API across the existing codebase, then the design system pulled out into a private npm package with its own example-pages project — somewhere to see every component before a version was released rather than after.
The hero resolving and fading as you leave it, the marquee running under the fold, the menu showcase scrolling sideways against the page, the Big Mac page pinning its product and repositioning it through each block of information. One GSAP timeline per act, scrubbed by scroll, so a sequence can be retimed in one place.
The backgrounds behind several card blocks are moving blobs drawn in canvas with shaders rather than video or GIF — texture that costs a few kilobytes, with resolution and pixel ratio clamped per device.
A full accessibility pass against the EU accessibility regulation with the corrections implemented, plus Lighthouse profiling on the pages carrying the most traffic.
The redesign shipped and the homepage went through several rounds on it. The design system it produced is still the package the rest of the client’s frontend work is built from — a search bar, a reorganised structure and a testing environment were added to it after launch.
Reels recorded from the live site