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

Island Heart Retreats

/ Gold Coast, Australia
A digital sanctuary for a soulful retreat.
  • Animation and Interaction
  • Modular Content
  • Custom Development
  • Intuitive Content Management

Project overview

A soulful collaboration with designer Damian Wheeler to bring the vision of Island Heart Retreats to life. We developed a fluid, animated site designed to mirror the grounding energy of the retreats themselves.
We created an intuitive digital space that feels like a breath of fresh island air.

The challenge

The core obstacle was translating a static, soulful design into a high-performance digital experience. We had to implement complex, custom animations to maintain the brand’s "serene" energy without sacrificing loading speeds or the simplicity of the booking functionality.
Custom animations didn't compromise the site’s performance or the simplicity of the booking process.

What we did
(and what we avoided)

  • Custom animation engine

  • Integrated booking system

  • Responsive frontend development

  • Intuitive navigation

  • Static layouts
  • Clunky multi-steps
  • Compromising design integrity
  • Unoptimised motion

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

  • Custom Animation Coding
    Scripting organic transitions and movements.
  • Third-Party Integration
    Setting up the automated booking platform.
  • Responsive Styling
    Adapting a complex visual vision to all screen sizes.
  • UX/UI Refinement
    Optimising the flow from discovery to reservation.

Awards

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

    CSSDA / March 2025

  • UI Design

    CSSDA / March 2025

  • UX Design

    CSSDA / March 2025

    • Working with the team was a true blessing. They brought the spirit of Island Heart Retreats to life online, calm, soulful, and easy to navigate. Our guests feel that energy the moment they land on the site, and booking their stay has never been simpler.

    Kat and Cam / Directors of Island Heart Retreats

    Keep exploring