A premium wellness brand entering the sauna market needed a site that matched the engineering quality they sell.
Luke's design, my execution. Atmospheric scroll animations, product CMS, and 97/100/100/100 Lighthouse scores.
A sauna is a considered purchase. The buyer researches carefully, evaluates quality signals, and makes a decision based on trust as much as specification. A site that loads slowly, animates clumsily, or feels assembled from a template actively works against conversion at this price point.
Achieving near-perfect Lighthouse scores alongside atmospheric animations and high-resolution product photography requires a specific build discipline. Every asset decision had to be made with the Lighthouse audit in mind from the start, not optimised retrospectively.
Explore the main parts of the build.
The hero builds from dark warmth. Photography fading in with staggered text reveals. Background moves slower than foreground content. The sequence communicates the sauna experience before the visitor reads a word.
Every sauna model managed in the CMS. New products slot into the existing architecture automatically. No design or development work per new product.
Key product features enter staggered on scroll: each callout appearing in sequence so the visitor's eye follows the intended reading path.
FAQ and wellness benefits sections built with structured data markup, eligible for Google rich results. The team manages both from the CMS editor.
97 Performance with atmospheric parallax, scroll reveals, hover interactions, and high-resolution product photography all active. Atmosphere and performance, not a trade-off.
The details that shaped the finished build.
AVIF format + WebP fallback: 50–60% smaller than JPEG. Premium product photography is large. Every image serves in AVIF with WebP fallback. All images below the fold are lazy-loaded.
CSS-first: JS only where native Webflow can't reach. Every animation that could run in CSS does. Rich motion with minimal script weight.
Self-hosted, preloaded, subset to characters used. No flash of unstyled text, no layout shift on font load, no Google Fonts round-trip latency.
Background and foreground at different scroll rates: a subtle depth effect that gives the site atmosphere without distracting from the product. Pure CSS transform, zero JavaScript.
Secondary detail photography reveals on hover. Product cards reveal closer views of materials and finishes on hover. The transition communicates quality through the interaction itself.
100 score: ARIA, contrast ratios, motion respect. Full ARIA labelling. Colour contrast ratios verified across the warm palette. All animations respect prefers-reduced-motion.
Madimack's team now has a sauna site that represents the brand's engineering standards before a visitor has scrolled past the hero. The CMS absorbs new products as the range expands without any developer involvement.
For Luke, the white-label model means he can present a Webflow site built to his exact specification without the overhead of managing technical implementation himself. The design is his. The execution is mine. The result looks like one seamless product.
Waleed executes exactly what we design: no shortcuts, no approximations. The animations land the way we spec them, the Lighthouse scores hold, and the CMS does what we need it to do.
Tell us about your business, what needs to change and what you liked about Madimack Saunas. We will help you agree a scope and estimate before work starts.
You will speak directly with Muhammad Waleed Jamshed, who leads Al Kasib.
View the contact page for project enquiries.
A few details are enough to start.
Thanks. We will be in touch.
That did not send. Please try again.
See the scope and story behind another project.
Project scope: Design to Webflow · Terminal Aesthetic · Motion · Lighthouse
Project scope: Design to Webflow · Kinetic Animations · Case Study CMS · White-label Dev