home - www.tenthousandfeet.studio

Hautlence Times

Catalogue Design

A catalogue conceived as a newspaper, designed by us for Hautlence. CD Doobop Studio ph @ Leonardo Malè

Doo-bop Studio

Visual Identity

Visual Identity

SHOP THE STORY

Curated vintage in Milan, 2026

Visual Identity

Design Space, LA

A hybrid experience between the physical and the digital, bringing together a cutting-edge selection of galleries, designers and artists run by Basic.space. AD Nuovagroup. 2025

Website Design

AgX

A highly specialised film developing, photo-printing and scanning lab. 2025

Visual Identity

BLU

A space offered as a platform and habitat to an international network for: artist residencies, exhibitions, public programs. 2025

Exhibition Design

IL NOSTRO TEMPO. CinéFondationCartier

An exhibition with the cinematographic works of 12 artists and directors. 2025

Exhibition Design

Torre Velasca by BBPR. MAXXI Archive

An exhibition with archive materials recounting the first Italian-style skyscraper. 2024

Visual Identity

Ceriani Szostak

Design studio based in Amsterdam focused on excellence and beauty. 2024

Visual Identity

Editorial Design

Viola Spettri

Atelier, workspace of contemporary artists and cultural hub open to the public, focusing on contemporary art and experimentation. 2024

Visual Identity

Mini Spazio

A local space for design, art, urban culture. 2024

Visual Identity

TEQA

Teqa is a box for multiple ideas and concepts coming together to form collective projects. 2024

<?php
$projects = get_posts(array(
  'post_type' => 'project',
  'posts_per_page' => -1
));

foreach ($projects as $index => $project): 
  $media_files = get_field('images', $project->ID);

  $label_1 = get_field('label_1', $project->ID); 
  $label_2 = get_field('label_2', $project->ID); 
  $label_3 = get_field('label_3', $project->ID); 
  $title   = get_field('title', $project->ID); 
  $details = get_field('details', $project->ID);

  if ($media_files): ?>
    <div class="slick-slider-container" id="slider-<?php echo $index; ?>">
      <div class="slick-slider">
        <?php foreach ($media_files as $i => $file): ?>
          <?php if (strpos($file['mime_type'], 'image') !== false): ?>
            <div class="slick-slide">
              <?php
              // Attributi personalizzati per le immagini
              $img_attrs = array(
                'class' => 'lazy-media',
                'decoding' => 'async',
              );

              // Se è la prima immagine del primo progetto → eager + fetchpriority high
              if ($index === 0 && $i === 0) {
                $img_attrs['loading'] = 'eager';
                $img_attrs['fetchpriority'] = 'high';
              } else {
                $img_attrs['loading'] = 'lazy';
              }

              echo wp_get_attachment_image(
                $file['ID'],
                'large', // usa dimensione ottimizzata di WP (puoi cambiare se serve)
                false,
                $img_attrs
              );
              ?>
            </div>
          <?php elseif (strpos($file['mime_type'], 'video') !== false): ?>
            <div class="slick-slide">
              <?php $preload = ($index === 0) ? 'metadata' : 'none'; ?>
              <video 
                preload="<?php echo $preload; ?>" 
                muted 
                playsinline 
                loop 
                class="lazy-media">
                <source src="<?php echo esc_url($file['url']); ?>" type="<?php echo esc_attr($file['mime_type']); ?>">
                Your browser does not support the video tag.
              </video>
            </div>
          <?php endif; ?>
        <?php endforeach; ?>
      </div>
      
      <div class="project-details">
        <div class="project-labels">
          <h6><?php echo esc_html($label_1); ?></h6>
          <h6><?php echo esc_html($label_2); ?></h6>
          <h6><?php echo esc_html($label_3); ?></h6>
        </div>
        <div class="project-title-caption">
          <p><?php echo esc_html($title); ?></p>
        </div>
        <div class="project-details-text">
          <p><?php echo esc_html($details); ?></p>
        </div>
      </div>
    </div>
  <?php endif; ?>
<?php endforeach; ?>

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.slick-slider-container {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slick-slider {
  height: 100%;
  width: 100%;
}

.slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* --- Blur-up effect --- */
.slick-slide img,
.slick-slide video {
  width: auto;
  height: 100dvh;
  object-fit: cover;
  filter: blur(20px);
  opacity: 0;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.slick-slide img.loaded,
.slick-slide video.loaded {
  filter: blur(0);
  opacity: 1;
}

.project-details {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 15;
  padding-left: 13px;
  padding-bottom: 10px;
  mix-blend-mode: difference;
}

.project-labels {
  display: flex;
  gap: 38px;
  margin-bottom: 1px;
  mix-blend-mode: difference;
}

.project-labels h7 {
  margin: 0;
}

.project-title-caption p {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.project-details-text p {
  margin: 0;
  mix-blend-mode: difference;
}

#project-button {
  mix-blend-mode: overlay;
}

/* Preloader bianco a schermo intero */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-out;
  opacity: 1;
}

body.loaded #preloader {
  opacity: 0;
  pointer-events: none;
}




@media (max-width: 767px) {
  .slick-slider {
    height: 100dvh;
    width: 100%;
  }
  
  .slick-slide img,
  .slick-slide video {
    width: 100;
    height: 100dvh;
  }

  .project-details {
    bottom: 48px;
    z-index: 15;
    padding-left: 10px;
  }

  .project-labels {
    display: flex;
    gap: 20px;
  }

  .project-labels h6 {
    margin: 0;
    font-size: 8px;
  }

  .project-title-caption p {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
  }

  .project-details-text p {
    margin: 0;
  }
}

jQuery(document).ready(function($) {
  // Inizializzazione slick
  $('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false,
    dots: false,
    variableWidth: true,
    infinite: true,
    swipe: false,
    touchThreshold: 10,
    accessibility: false,
    centerMode: $(window).width() <= 767
  });

  // Blur-up effect: quando media pronti
  $('img.lazy-media').each(function(){
    if (this.complete) {
      $(this).addClass('loaded');
    } else {
      $(this).on('load', function(){ $(this).addClass('loaded'); });
    }
  });

  $('video.lazy-media').each(function(){
    $(this).on('loadeddata', function(){
      $(this).addClass('loaded');
    });
  });

  // Gestione video: solo la slide attiva riproduce il video
  $('.slick-slider').on('afterChange', function(event, slick, currentSlide){
    $(slick.$slides).find('video').each(function(){ this.pause(); });
    $(slick.$slides[currentSlide]).find('video').each(function(){ this.play(); });
  });

  // Cursor feedback (prev/next)
  if ($(window).width() > 0) {
    $(document).on('mousemove', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;
      $('body').css('cursor', cursorPosition < windowWidth / 2 ? 'w-resize' : 'e-resize');
    });

    $(document).on('click', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;
      if ($(e.target).closest('.slick-slider-container').length) {
        const $activeSlider = $('.slick-slider:visible');
        if ($activeSlider.length) {
          cursorPosition < windowWidth / 2
            ? $activeSlider.slick('slickPrev')
            : $activeSlider.slick('slickNext');
        }
      }
    });
  }
});

// Preloader globale primo progetto
const firstProjectMedia = document.querySelectorAll("#slider-0 img.lazy-media, #slider-0 video.lazy-media");
let loadedCount = 0;
const totalFirstProject = firstProjectMedia.length;

function checkLoaded() {
  loadedCount++;
  if (loadedCount >= totalFirstProject) {
    document.body.classList.add("loaded"); // preloader scompare
  }
}

firstProjectMedia.forEach(media => {
  if (media.tagName.toLowerCase() === "img") {
    if (media.complete) checkLoaded();
    else {
      media.onload = checkLoaded;
      media.onerror = checkLoaded;
    }
  } else if (media.tagName.toLowerCase() === "video") {
    media.addEventListener("canplay", function() {
      media.classList.add("loaded"); // togli blur quando primo frame pronto
      checkLoaded();
    }, { once: true });
    media.onerror = checkLoaded;
  }
});

// Timeout di sicurezza 8s
setTimeout(() => document.body.classList.add("loaded"), 8000);

<div id="preloader"></div>

<?php
$projects = get_posts(array(
  'post_type' => 'project',
  'posts_per_page' => -1
));

foreach ($projects as $index => $project): 
  $media_files = get_field('images', $project->ID);

  $label_1 = get_field('label_1', $project->ID); 
  $label_2 = get_field('label_2', $project->ID); 
  $label_3 = get_field('label_3', $project->ID); 
  $title   = get_field('title', $project->ID); 
  $details = get_field('details', $project->ID);

  if ($media_files): ?>
    <div class="slick-slider-container" id="slider-<?php echo $index; ?>">
      <div class="slick-slider">
        <?php foreach ($media_files as $i => $file): ?>
          <?php if (strpos($file['mime_type'], 'image') !== false): ?>
            <div class="slick-slide">
              <img 
                src="<?php echo esc_url($file['url']); ?>" 
                alt="<?php echo esc_attr($file['alt']); ?>"
                <?php echo $i === 0 ? 'loading="eager"' : 'loading="lazy"'; ?> 
                class="lazy-media">
            </div>
          <?php elseif (strpos($file['mime_type'], 'video') !== false): ?>
    <div class="slick-slide">
        <?php $preload = ($index === 0) ? 'metadata' : 'none'; ?>
        <video 
          preload="<?php echo $preload; ?>" 
          muted 
          playsinline 
          loop 
          class="lazy-media">
            <source src="<?php echo esc_url($file['url']); ?>" type="<?php echo esc_attr($file['mime_type']); ?>">
            Your browser does not support the video tag.
        </video>
    </div>
<?php endif; ?>

        <?php endforeach; ?>
      </div>
      
      <div class="project-details">
        <div class="project-labels">
          <h6><?php echo esc_html($label_1); ?></h6>
          <h6><?php echo esc_html($label_2); ?></h6>
          <h6><?php echo esc_html($label_3); ?></h6>
        </div>
        <div class="project-title-caption">
          <p><?php echo esc_html($title); ?></p>
        </div>
        <div class="project-details-text">
          <p><?php echo esc_html($details); ?></p>
        </div>
      </div>
    </div>
  <?php endif; ?>
<?php endforeach; ?>

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.slick-slider-container {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slick-slider {
  height: 100%;
  width: 100%;
}

.slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* --- Blur-up effect --- */
.slick-slide img,
.slick-slide video {
  width: auto;
  height: 100dvh;
  object-fit: cover;
  filter: blur(20px);
  opacity: 0;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.slick-slide img.loaded,
.slick-slide video.loaded {
  filter: blur(0);
  opacity: 1;
}

.project-details {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 15;
  padding-left: 13px;
  padding-bottom: 10px;
  mix-blend-mode: difference;
}

.project-labels {
  display: flex;
  gap: 38px;
  margin-bottom: 1px;
  mix-blend-mode: difference;
}

.project-labels h7 {
  margin: 0;
}

.project-title-caption p {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.project-details-text p {
  margin: 0;
  mix-blend-mode: difference;
}

#project-button {
  mix-blend-mode: overlay;
}

/* Preloader bianco a schermo intero */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-out;
  opacity: 1;
}

body.loaded #preloader {
  opacity: 0;
  pointer-events: none;
}




@media (max-width: 767px) {
  .slick-slider {
    height: 100dvh;
    width: 100%;
  }
  
  .slick-slide img,
  .slick-slide video {
    width: auto;
    height: 100dvh;
  }

  .project-details {
    bottom: 48px;
    z-index: 15;
    padding-left: 10px;
  }

  .project-labels {
    display: flex;
    gap: 20px;
  }

  .project-labels h6 {
    margin: 0;
    font-size: 8px;
  }

  .project-title-caption p {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
  }

  .project-details-text p {
    margin: 0;
  }
}

jQuery(document).ready(function($) {
  // Inizializzazione slick
  $('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false,
    dots: false,
    variableWidth: true,
    infinite: true,
    swipe: false,
    touchThreshold: 10,
    accessibility: false,
    centerMode: $(window).width() <= 767
  });

  // Blur-up effect: quando media pronti
  $('img.lazy-media').each(function(){
    if (this.complete) {
      $(this).addClass('loaded');
    } else {
      $(this).on('load', function(){ $(this).addClass('loaded'); });
    }
  });

  $('video.lazy-media').each(function(){
    $(this).on('loadeddata', function(){
      $(this).addClass('loaded');
    });
  });

  // Gestione video: solo la slide attiva riproduce il video
  $('.slick-slider').on('afterChange', function(event, slick, currentSlide){
    $(slick.$slides).find('video').each(function(){ this.pause(); });
    $(slick.$slides[currentSlide]).find('video').each(function(){ this.play(); });
  });

  // Cursor feedback (prev/next)
  if ($(window).width() > 0) {
    $(document).on('mousemove', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;
      $('body').css('cursor', cursorPosition < windowWidth / 2 ? 'w-resize' : 'e-resize');
    });

    $(document).on('click', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;
      if ($(e.target).closest('.slick-slider-container').length) {
        const $activeSlider = $('.slick-slider:visible');
        if ($activeSlider.length) {
          cursorPosition < windowWidth / 2
            ? $activeSlider.slick('slickPrev')
            : $activeSlider.slick('slickNext');
        }
      }
    });
  }
});

// Preloader globale primo progetto
const firstProjectMedia = document.querySelectorAll("#slider-0 img.lazy-media, #slider-0 video.lazy-media");
let loadedCount = 0;
const totalFirstProject = firstProjectMedia.length;

function checkLoaded() {
  loadedCount++;
  if (loadedCount >= totalFirstProject) {
    document.body.classList.add("loaded"); // preloader scompare
  }
}

firstProjectMedia.forEach(media => {
  if (media.tagName.toLowerCase() === "img") {
    if (media.complete) checkLoaded();
    else {
      media.onload = checkLoaded;
      media.onerror = checkLoaded;
    }
  } else if (media.tagName.toLowerCase() === "video") {
    media.addEventListener("canplay", function() {
      media.classList.add("loaded"); // togli blur quando primo frame pronto
      checkLoaded();
    }, { once: true });
    media.onerror = checkLoaded;
  }
});

// Timeout di sicurezza 8s
setTimeout(() => document.body.classList.add("loaded"), 8000);

<?php
$projects = get_posts(array(
  'post_type' => 'project',
  'posts_per_page' => -1
));



foreach ($projects as $index => $project): 
  $media_files = get_field('images', $project->ID); // Recupera il campo ACF

  $label_1 = get_field('label_1', $project->ID); 
  $label_2 = get_field('label_2', $project->ID); 
  $label_3 = get_field('label_3', $project->ID); 
  $title = get_field('title', $project->ID); 
  $details = get_field('details', $project->ID);

  if ($media_files): ?>
    <div class="slick-slider-container" id="slider-<?php echo $index; ?>">
      <div class="slick-slider">
        <?php foreach ($media_files as $file): ?>
          <?php if (strpos($file['mime_type'], 'image') !== false): ?>
            <div class="slick-slide">
              <img src="<?php echo esc_url($file['url']); ?>" alt="<?php echo esc_attr($file['alt']); ?>">
            </div>
          <?php elseif (strpos($file['mime_type'], 'video') !== false): ?>
            <div class="slick-slide">
              <video autoplay muted loop playsinline>
                <source src="<?php echo esc_url($file['url']); ?>" type="<?php echo esc_attr($file['mime_type']); ?>">
                Your browser does not support the video tag.
              </video>
            </div>
          <?php endif; ?>
        <?php endforeach; ?>
      </div>
      
      <div class="project-details">
        <div class="project-labels">
          <h6><?php echo esc_html($label_1); ?></h6>
          <h6><?php echo esc_html($label_2); ?></h6>
          <h6><?php echo esc_html($label_3); ?></h6>
        </div>
        <div class="project-title-caption">
          <p><?php echo esc_html($title); ?></p>
        </div>
        <div class="project-details-text">
          <p><?php echo esc_html($details); ?></p>
        </div>
      </div>
    </div>
  <?php endif; ?>
<?php endforeach; ?>

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}




.slick-slider-container {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slick-slider {
  height: 100%;
  width: 100%;
}

.slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slick-slide img,
.slick-slide video {
  width: auto;
  height: 100dvh;


}

.project-details {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 15;
  padding-left: 13px;
  padding-bottom: 10px;
  mix-blend-mode: difference;
}


.project-labels {
  display: flex;
  gap: 38px;
  margin-bottom: 1px;
  mix-blend-mode: difference;

}

.project-labels h7 {
  margin: 0;

}

.project-title-caption p {
  margin: 0;
  font-size: 16;
  text-transform: uppercase;
  mix-blend-mode: difference;

}

.project-details-text p {
  margin: 0;
  mix-blend-mode: difference;


}

#project-button {
  mix-blend-mode: overlay;
}





@media (max-width: 767px) {
  
  .slick-slider {
  height: 100dvh;
  width: 100%;
  /* display: flex;
    align-items: center; */
}
  
    .slick-slide img,
  .slick-slide video {
    width: auto;
    height: 100dvh;
  }
  

  .project-details {
    bottom: 48px;
    z-index: 15;
    padding-left: 10px;
  }

  .project-labels {
    display: flex;
    gap: 20px;
   

  }

  .project-labels h6 {
    margin: 0;
    font-size: 8px;
  }

  .project-title-caption p {
    margin: 0;
    font-size: 16;
    text-transform: uppercase;
  }

  .project-details-text p {
    margin: 0;

  }

}


jQuery(document).ready(function($) {
  $('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false,
    dots: false,
    variableWidth: true,

    infinite: true,
    swipe: false,
    touchThreshold: 10,
    accessibility: false,
    centerMode: $(window).width() <= 767

  });

  if ($(window).width() > 0) {
    $(document).on('mousemove', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;

      if (cursorPosition < windowWidth / 2) {
        $('body').css('cursor', 'w-resize');
      } else {
        $('body').css('cursor', 'e-resize');
      }
    });

    $(document).on('click', function(e) {
      const windowWidth = $(window).width();
      const cursorPosition = e.pageX;

     
      if ($(e.target).closest('.slick-slider-container').length) {
        
        const $activeSlider = $('.slick-slider:visible');

        if ($activeSlider.length) {
          if (cursorPosition < windowWidth / 2) {
           
            $activeSlider.slick('slickPrev');
          } else {
           
            $activeSlider.slick('slickNext');
          }
        }
      }
    });
  }
  
  
});

SERVICES

LOCATION

CONTACT

Hautlence Times

Doo-bop Studio

Visual Identity

Visual Identity

Website Design

Visual Identity

Exhibition Design

Exhibition Design

Visual Identity

Visual Identity

Editorial Design

Visual Identity

Visual Identity