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

Dream Design Laboratory

/ Bali, Indonesia
An inspired digital presence for a sound design studio.
  • UX & UI Design
  • Animation and Interaction
  • Custom Development

Project overview

Dream Design Laboratory creates high-end, custom sound experiences using professional studio tech. We designed a refined, black-and-white digital experience that mirrors their brand: polished and detail-oriented.
The site features smooth interactions and an integrated catalogue showcasing their premium installations in homes, luxury spaces, and yachts.

The challenge

The main challenge was translating a high-fidelity, sensory experience—crystal clear sound, into a purely visual medium. The previous digital footprint didn't reflect the "Next-Gen" nature of their installations or the luxury markets they serve, such as high-end residential and yachting.
We needed to move away from a standard service-list layout and create an immersive environment that felt as polished and purposeful as a high-end sound studio.

What we did
(and what we avoided)

  • High-contrast branding

  • Organic interactions

  • Environmental categorisation

  • Visual-first layout

  • Simplified Navigation

  • Visual clutter
  • Static experience
  • Generic structures:
  • Friction in navigation
  • Over-branding

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

  • Visual Identity & Digital Strategy
    Developed a minimalist UI/UX design that aligns with luxury industry standards and professional audio aesthetics.
  • Custom Frontend Development
    Implemented smooth motion design and subtle interactions to enhance the premium "feel" of the user journey.
  • Interactive Portfolio Catalogue
    Built a custom-categorised gallery to showcase technical installations across residential, commercial, and yacht sectors.
  • Responsive Performance Optimisation
    Ensured the high-resolution media-heavy site maintains lightning-fast loading speeds and a seamless experience on all mobile devices.

Awards

  • Best innovation
    CSSDA / March 2025
  • Best UI Design
    CSSDA / March 2025
  • Best UX Design
    CSSDA / March 2025
  • Innovation Excellence

    CSSDA / March 2025

  • UI Design

    CSSDA / March 2025

  • UX Design

    CSSDA / March 2025

    • Working with the team was such a smooth experience from start to finish. They really took the time to understand what Dream Design Laboratory is all about, and the website now feels like us.
    Jane / Co-Founder of Dream Design Laboratory

    Keep exploring