<div class="blur-container">
  <div class="blur-layer layer1"></div>
  <div class="blur-layer layer2"></div>
  <div class="blur-layer layer3"></div>
  <div class="blur-layer layer4"></div>
</div>

.blur-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.blur-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blur-layer.layer1 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.blur-layer.layer2 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
}

.blur-layer.layer3 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
}

.blur-layer.layer4 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
}

5Twelve

/ Gold Coast, Australia
Minimalist design, measurable results.
  • UX & UI Design
  • Animation and Interaction
  • Custom Development
  • Intuitive Content Management

Project overview

We partnered with Bre and James at 5Twelve to build a digital home that matches their authority in the SEO industry. Based on the Gold Coast, they needed a site that reflected their "no-nonsense" approach to results.
It’s a site designed to let their track record speak for itself.

The challenge

The main challenge was making a strictly black-and-white design feel dynamic and high-end rather than flat or empty. We had to find creative ways to add depth and "polish" using only a monochrome scale while ensuring the technical SEO foundations were flawless.
The goal was to achieve premium sophistication through extreme minimalism.

What we did
(and what we avoided)

  • Sleek monochrome UI design

  • Dynamic multi-step onboarding form

  • Smooth, refined micro-animations

  • Content-driven blog integration

  • High-performance minimalist architecture

  • Cluttered, distracting layouts
  • Generic "stock" color palettes
  • Standard, friction-heavy forms
  • Excessive visual noise
  • Slow, unoptimized transitions

Our focus lies in delivering tangible bottom line outcomes that make a real impact.

  • Bespoke Frontend Development
    Creating a polished, "living" minimalist site using advanced CSS and animations.
  • Interactive Form Engineering
    Developing a custom questionnaire to streamline the client onboarding process.
  • Monochrome Visual Strategy
    Balancing shades and borders to create depth without using color.
  • CMS & Blog Setup
    Building a simple system for the team to share high-impact SEO insights.

Awards

  • Best Innovation
    CSSDA / June 2025
  • Best UI Design
    CSSDA / June 2025
  • Best UX Design
    CSSDA / June 2025
  • Innovation Excellence

    CSSDA / March 2025

  • UI Design

    CSSDA / March 2025

  • UX Design

    CSSDA / March 2025

    • We’re absolutely thrilled with our new website — it’s exactly what we were looking for. Studio Quatro understood our vision perfectly and delivered a clean, modern site that truly represents our brand. Couldn’t be happier.
    Bre / Director at 5Twelve

    Keep exploring