Live
Realmode

Realmode

A storefront for a Lagos fashion label, fast where it counts.

Role
Design, frontend, backend.
Stack
AstroCloudflare WorkersWooCommercePaystackGSAPLenis

Why I built it

Realmode is a Lagos fashion label making tailored casualwear: camp shirts, co-ord sets, hand-embellished pieces. The label had a WooCommerce backend that did its job (catalogue, orders, inventory) and a storefront that didn’t. A themed WordPress front that looked like every other shop and loaded like it too. The brand needed a front that felt designed, without walking away from the commerce stack the team already ran.

What it does

The storefront is an Astro site on a Cloudflare Worker: shop and category pages, product detail, cart, checkout, plus a journal and the usual info pages. WooCommerce stays the source of truth. The Worker proxies its Store API for cart and catalogue reads and keeps the REST credentials server-side, so the browser never sees a key.

Checkout is Paystack, wired at the edge. The Worker initializes the transaction, creates the order in WooCommerce with the payment reference attached, then verifies the transaction server-side before the order counts. That verify step matters: a “successful” redirect from a payment page is a claim, not a fact, so the Worker checks it against Paystack directly.

The feel of it

Motion carries a lot of the brand here, and most of it is small and physical rather than showy.

The hero is a WebGL canvas layered over the featured-collection carousel. Move your cursor across it and the image distorts based on how fast you’re moving. The mouse velocity feeds a force value through GSAP’s quickTo, so the effect swells when you flick and settles when you stop. It makes fabric photography feel like fabric.

Scrolling runs through Lenis with the lerp tuned fairly tight, so the page glides without feeling detached from your finger. Headings reveal themselves as they enter the viewport, split into characters that rise into place. Product tiles and journal cards follow the same system, so the whole site moves with one accent rather than a pile of effects.

The restraint was the actual work. Every animation got the same test: does it make the clothes look better, or is it just me showing off? A few nice ones failed that test and got cut.

Decisions I’d make again

Headless, not replatformed. The team’s operational muscle (inventory, orders, fulfilment) lives in WooCommerce and didn’t need to move. Only the customer-facing surface changed. Rebuilding the whole stack was the risk to avoid, not the thing to sell.

Payment verification is server-side or it isn’t verification. Initialize at the edge, verify at the edge, and degrade honestly: if the payment or commerce credentials are missing, checkout says so instead of pretending.

Fast by construction. Static where possible, edge-rendered where not, fonts self-hosted, and WooCommerce round-trips kept behind the Worker. The customer’s connection to Lagos never has to be good. Only Cloudflare’s does.