AXIRYA: building bright editorial e-commerce

AXIRYA is a speculative face-mist brand we built between client briefs. It is not a real company. We invented it specifically because we wanted a place to push the editorial e-commerce direction further than any of our actual clients had asked us to — bright, layered, photo-led, with a single master gradient threaded through every section of the site like a single piece of music. The result became the quality bar we now hold every cosmetics or beauty pitch against.

This is what we decided, why we decided it, and the trade-offs we made along the way.

The brief we wrote ourselves

Most face-mist brands are sold the same way: a flat product shot on white, ingredient call-outs in a sans-serif, and a soft pastel header. It works, but it is forgettable. The brief we wrote for AXIRYA was deliberately oppositional: treat the product page like the opening spread of a magazine, not a Shopify category template.

The fictional brand is Hool Labs, a Korean–British indie skincare line. The product is a 60ml face mist. The audience is in their late twenties, follows skincare TikTok, and resents being talked to like a shopper. Editorial respect — that is what the design needed to communicate before anything else.

One master gradient

The single biggest decision on AXIRYA was committing to one gradient and letting it flow uninterrupted from the top of the page to the bottom. It moves from a deep evening lavender at the top through dusk pink, warm peach, and finally a soft golden-hour sand at the foot. Every section sits on top of that gradient and inherits its colour mood.

Most e-commerce sites stop a gradient at the hero and start a new white section beneath it. We didn't. The gradient runs the full document height, and the section dividers are handled with mix-blend-mode overlays and atmospheric layers instead of hard background swaps. The effect is that the whole site reads as one continuous sky — you scroll intothe brand, not down through a stack of unrelated frames.

This was harder than it sounds. It meant every text colour, every button state, every form field had to work against six different colour temperatures depending on scroll position. We solved it by picking three ink colours — a deep aubergine for body text, a soft cream for inverted surfaces, and a saturated rust for accent — and testing every component against the gradient at each major scroll position before locking the palette.

CSS-only decoratives

The bubbles drifting across the hero, the cumulus cloud the bottle drops into, and the soft orb light sources throughout the page are all pure CSS. No PNG sprites, no SVG illustrations, no Lottie files. They render from scratch in the browser using radial gradients, conic gradients, backdrop-filter, and masked annulus shapes.

The bubble alone is seven layered radial gradients: backdrop refraction, a tinted body fill, a saturated iridescent rim, an inner shading band on the lower edge for 3D depth, a soft primary highlight, a sharp specular blob, and tiny rim sparkles. Two seeded variants (warm and cool) break up visual repetition. The whole effect is about 90 lines of inline style. No image bytes shipped.

Why bother? Two reasons. First, the bubbles need to scale, drift, and respond to scroll — a PNG sprite would either get pixelated or balloon the page weight. Second, the iridescence reads as real: light is actually being mixed live, not baked into a rasterised photo. Visitors who can tell the difference (and the ones who buy at this price point can tell) feel it. It earns the price tag without explaining the price tag.

Layered scroll-driven depth

The hero has five depth planes: a sky-background photo, two atmospheric gradient washes layered on top with mix-blend-mode, the kinetic typography layer, and a foreground cloud that scales up as the bottle drops into it on scroll. Each plane scrolls at a different rate using a GSAP parallax wrapper with speeds from 0.25 to 1.45.

The cardinal rule for parallax is subtle is invisible, loud is tacky, the middle path is craft. We landed on the heaviest layer (the deepest cloud) at 0.30 of scroll speed and the lightest foreground element at 1.45. The total parallax travel across the hero is about 320px of vertical displacement at typical scroll speeds — enough that the depth is felt without being announced.

Glassmorphic nav, magnetic cursor

The nav bar is a horizontal pill of frosted glass — backdrop-blur, a single-pixel inner border in cream, and a faint warm tint that picks up the gradient behind it. It pins to the top on scroll and contracts slightly past 60px scroll position. That contraction is purely visual; the link targets stay the same size. We always design contractions so they can't worsen click ergonomics.

The custom cursor is magnetic: a small dot follows the mouse, and on hover over any interactive element it expands into a softly outlined ring that snaps to the element's centre with a tiny easing. This pattern gets gimmicky fast on sites with too many interactive surfaces. AXIRYA gets away with it because the site is deliberately sparse — maybe five clickable elements per viewport — so the magnetic snap reads as attentive, not flashy.

What we'd change for a real client

AXIRYA is a showpiece. Real clients have constraints we ignored deliberately. Three things we'd compromise on if Hool Labs were a real shipping brand:

• Mobile parallax— we run the full parallax stack on phones, which costs frame budget. For a real client we'd disable parallax below the 768px breakpoint and let the page scroll naturally, keeping only the foreground cloud reveal.
• The bubble count— we drift six animated bubbles across the hero. For a real client we'd cap that to three on phones and four on desktop, freeing CPU for the cart flow once the user actually tries to buy.
• The cursor on touch — already gated behind(pointer: fine), but worth saying out loud: never let a custom cursor render on a touch device. It costs JS and serves nothing.

The bigger lesson

AXIRYA taught us that the difference between an e-commerce site that looks like an e-commerce template and an e-commerce site that looks like a brand is mostly about consistency at scale. One gradient. One typeface system. One motion language. One cursor. Held without exception for the full document height. Most sites flinch — they break the gradient at the fold, they switch typefaces in the footer, they leave the cursor as the OS default outside the hero. AXIRYA doesn't. That is the whole difference.

If you are pitching a beauty, wellness, or beverage brand and the reference deck looks anything like this, the live concept is the closest thing we have to a finished work in that space. We are happy to walk a client through it call-by-call.