<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%);
}

Reefto

/ Cairns, Australia
Empowering Traditional Owners to protect and care for their Country
  • Animation and Interaction
  • Custom Development
  • Intuitive Content Management

Project overview

Reefto partnered with Studio Quatro and Saltwater People to create a digital platform that honors the rights and obligations of Aboriginal and Torres Strait Islander people. The site serves as a vital tool to showcase the inherent connection Traditional Owners have as Custodians of the Great Barrier Reef World Heritage Area.
We ensured their voices and cultural heritage are represented with impact.

The challenge

The core challenge was building a digital space that respects the deep cultural significance of the Reef while maintaining high technical standards. We needed to present complex information about rights and land interests in a way that feels authoritative yet accessible to the community.
Balancing the storytelling of the Traditional Owners with a clean, modern interface.

What we did
(and what we avoided)

  • Optimised for mobile accessibility

  • Fast, robust blog

  • Implemented clean, snappy code

  • Clear, modern typography

  • Integrated seamless content management

  • Cluttered, distracting visual elements
  • Generic, soulless website templates
  • Heavy, slow-loading media assets
  • Overly complex navigation structures
  • Inappropriate or insensitive styling

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

  • Front-End Development
    High-performance coding with a focus on respectful design
  • WordPress Integration
    Custom CMS for autonomous management of cultural content
  • SEO & Performance Tuning
    Technical optimisation to ensure wide reach and fast loading
  • Cross-Device Testing
    Rigorous QA to ensure accessibility for all community members

Keep exploring