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

Solis Estudio

/ Gold Coast, Australia
High-end creative freedom and motion-driven storytelling.
  • UX & UI Design
  • Animation and Interaction
  • Modular Content
  • Custom Development

Project overview

We partnered with Cesar and his team at Solis Estudio to execute a comprehensive digital transformation. The project involved a strategic branding tune-up and the development of a modular website that breaks away from traditional architectural grids.
By blending luxury aesthetics with cutting-edge animations, we created a digital home that showcases their prestigious awards, blueprints, and portfolio with a "sexy" and premium feel.

The challenge

The primary challenge was balancing "creative freedom" with technical manageability. We had to translate a non-traditional, highly animated design into a modular backend system that the Solis team could easily manage.
all while migrating their legacy branding into a more refined, premium color palette without losing their established identity.

What we did
(and what we avoided)

  • Premium branding tune-up

  • Creative motion design

  • Modular backend architecture

  • Award-winning portfolio showcase

  • Seamless page transitions

  • Traditional grid layouts
  • Generic website templates
  • Slow loading animations
  • Static, flat interfaces
  • Complicated backend editing

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

  • Creative Brand Refinement
    We adjusted the previous brand colors and visual elements to achieve the "sexy" and premium tone requested, aligning the identity with luxury market standards.
  • Custom Motion Development
    We engineered unique page transitions and custom interactions that provide a sense of flow and creative freedom throughout the user journey.
  • Modular Web Architecture
    We built a flexible, high-performance system from the ground up, allowing the team to manage their portfolio and "behind the scenes" content effortlessly.

Awards

  • Best Innovation
    CSSDA / April 2026
  • Best UI Design
    CSSDA / April 2026
  • Best UX Design
    CSSDA / April 2026
  • Innovation Excellence

    CSSDA / March 2025

  • UI Design

    CSSDA / March 2025

  • UX Design

    CSSDA / March 2025