Blurring the line between real and virtual through avatars.

The Clueless Instagram
@THECLUELESS.AI

The Clueless Tech
@THECLUELESS.TECH

For General Inquires, Customer
Requests & Services Inquires:
HELLO@THECLUELESS.AI

For Press & Inquiries:
PRESS@THECLUELESS.AI

For Job Applications & Internships
CAREERS@THECLUELESS.AI

Via Phone:
+34 699 091 483

Barcelona
CARRER DE JERICÓ 3, LOCAL
08035, BARCELONA

México
THE CLUELESS BY TROOP
AV. SANTA FE 428, 05348 CDMX
THECLUELESS.AI@TROOP.COM.MX

CLIENTS

AUDI
DOUGLAS
AMAZON
LLONGUERAS
L'OREAL
HELLMAN'S
SONY PICTURES
PRIME
GOLDEN CONCEPT
FANVUE
COCA-COLA

CLIENTS

HEALTHY POKE
ELISAVA
MAHOU
UDIA
BANCO SANTANDER
BBVA
VOGUE
GOA ORGANICS
CHARO RUIZ
RAZZER
LYNK & CO

MEDIA

FORBES
BBC
ABC
THE TIMES
EL PERIÓDICO
EURONEWS
FINANCIAL TIMES
LA VANGUARDIA
WIRED
GLAMOUR
NEO2

NEWS

XATAKA
REASONWHY
INFOBAE
NETINFLUENCER
MUNDO DEPORTIVO
SPORT
MARCA
LA RAZÓN
THE SUN
THE GUARDIAN
GRAFFICA

LOCATIONS

BARCELONA
MÉXICO
ENGLAND
UNITED ARAB EMIRATES

COPYRIGHT 2026 © THE CLUELESS AIGENCY S.L.

COPYRIGHT 2026 © THE CLUELESS AIGENCY S.L.

// Buscar el contenedor del video var bgVideoDiv = document.querySelector('.semplice-cover .background-video'); if (!bgVideoDiv) return; var originalVideo = bgVideoDiv.querySelector('video'); if (!originalVideo) return; // ── Crear estructura del carrusel ────────── bgVideoDiv.style.position = 'relative'; bgVideoDiv.style.overflow = 'hidden'; // Crear los elementos de video var videoElements = []; videos.forEach(function (src, i) { var vid = document.createElement('video'); vid.src = src; vid.autoplay = (i === 0); vid.muted = true; vid.playsInline = true; vid.setAttribute('playsinline', ''); vid.setAttribute('webkit-playsinline', ''); vid.preload = 'auto'; vid.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;' + 'opacity:' + (i === 0 ? '1' : '0') + ';transition:opacity 1s ease;z-index:1;'; bgVideoDiv.appendChild(vid); videoElements.push(vid); }); // Eliminar el video original originalVideo.remove(); // ── Crear dots ───────────────────────────── var dotsContainer = document.createElement('div'); dotsContainer.style.cssText = 'position:absolute;bottom:80px;left:50%;transform:translateX(-50%);' + 'display:flex;gap:10px;z-index:10;'; var dots = []; videos.forEach(function (_, i) { var dot = document.createElement('button'); dot.style.cssText = 'width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);' + 'background:' + (i === 0 ? 'rgba(255,255,255,0.3)' : 'transparent') + ';cursor:pointer;padding:0;' + 'transition:background 0.3s ease;outline:none;'; dot.setAttribute('aria-label', 'Video ' + (i + 1)); dot.addEventListener('click', function () { goToVideo(i); }); dotsContainer.appendChild(dot); dots.push(dot); }); bgVideoDiv.appendChild(dotsContainer); // ── Lógica del carrusel ──────────────────── var currentIndex = 0; var isTransitioning = false; function goToVideo(index) { if (index === currentIndex || isTransitioning) return; isTransitioning = true; var prevIndex = currentIndex; // Fade out del anterior videoElements[prevIndex].style.opacity = '0'; // Activar el nuevo videoElements[index].currentTime = 0; videoElements[index].play(); videoElements[index].style.opacity = '1'; // Actualizar dots dots[prevIndex].style.background = 'transparent'; dots[index].style.background = 'rgba(255,255,255,0.3)'; currentIndex = index; // Pausar el video anterior DESPUÉS del fade (para que no se vea el corte) setTimeout(function () { videoElements[prevIndex].pause(); videoElements[prevIndex].currentTime = 0; isTransitioning = false; }, 1000); } function nextVideo() { var next = (currentIndex + 1) % videos.length; goToVideo(next); } // ── Zonas de click izquierda/derecha ─────── var clickZoneLeft = document.createElement('div'); clickZoneLeft.style.cssText = 'position:absolute;top:0;left:0;width:50%;height:100%;z-index:5;cursor:pointer;'; clickZoneLeft.addEventListener('click', function () { var prev = (currentIndex - 1 + videos.length) % videos.length; goToVideo(prev); }); bgVideoDiv.appendChild(clickZoneLeft); var clickZoneRight = document.createElement('div'); clickZoneRight.style.cssText = 'position:absolute;top:0;right:0;width:50%;height:100%;z-index:5;cursor:pointer;'; clickZoneRight.addEventListener('click', function () { nextVideo(); }); bgVideoDiv.appendChild(clickZoneRight); // Cuando termina un video, pasar al siguiente videoElements.forEach(function (vid, i) { vid.addEventListener('ended', function () { if (i === currentIndex) { nextVideo(); } }); }); // Iniciar primer video videoElements[0].play(); })();