Scroll-Driven Storytelling Without the Core Web Vitals Tax

Context

A premium French champagne house, built during my time at VISEO Asia. The brief was a custom theme, built from scratch off a design handoff, with scroll-driven interactions and brand storytelling across international markets in multiple currencies and multiple stores.

The problem

Design-forward, animation-heavy builds are usually where Core Web Vitals quietly die. Every scroll effect is a candidate for layout thrash. Every hero video or full-bleed image is a candidate for a blown LCP. The standard way most agencies hit a brief like this is to stack animation libraries and worry about performance after launch, if at all.

The constraint

The design was already locked by the time build started. I couldn’t ask the brand to simplify the storytelling to make performance easier, and I couldn’t ship a “beautiful but slow” launch for a premium brand where the site itself is part of the product experience. On top of that, the theme had to serve multiple markets and currencies without turning into multiple codebases that drift apart over time.

The approach

I treated the animation budget as a constraint to design around, not a cost to pay after the fact. That meant leaning on native scroll and CSS-driven interactions instead of JavaScript-heavy animation libraries wherever the effect allowed it, keeping media lazy-loaded below the fold with the hero asset prioritized explicitly, and building the CMS layer on Shopify Metaobjects so content changes don’t require touching the theme’s code at all.

For the multi-market requirement, I rejected forking a separate theme per store. That’s the fast way to ship the first market and the slow way to maintain the fifth one. Every fix has to be repeated, and the versions drift. Instead, one theme codebase runs every market through Shopify Markets and metaobject-driven configuration, so currency and store differences are data, not code.

The result

Core Web Vitals were validated post-deployment across the animation-heavy build, without simplifying the design brief to get there. The metaobjects-based CMS means marketing runs banner, badge, and content updates with zero dev tickets. One theme codebase serves every market and currency the brand operates in.

What I’d do differently

I’d write the animation performance budget down before design handoff, not during build. Chasing performance after a design is already locked means every fix is a negotiation. Setting the budget earlier would have avoided a couple of rounds of rework on effects that looked great in the mockup and cost more than they were worth on a real device.