All Prompts
All Prompts
carouselteam3dtailwindinteractiveabout-sectionjavascript
Interactive 3D Team Carousel
Интерактивный 3D карусель команды с карточками участников. Tailwind-стиль, подсветка центральной карточки, градиенты. Для страниц 'О нас' или 'Команда'.
Prompt
<section class="sm:py-24 grid-corners pt-16 pb-16 relative" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(7)" id="why">
<div class="grid-corners-bottom"></div>
<div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(7) > div:nth-of-type(2)">
<div class="animate-in mx-auto max-w-3xl text-center">
<span class="inline-flex items-center gap-1 rounded-full bg-lime-400/10 px-2 py-1 text-[11px] text-lime-300 ring-1 ring-lime-300/20 uppercase tracking-tight">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-3.5 w-3.5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
Team
</span>
<h2 class="sm:text-5xl text-4xl font-semibold tracking-tight mt-4 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Meet</span>
<span class="karaoke-word">the</span>
<span class="karaoke-word">team</span>
<span class="karaoke-word">that</span>
<span class="karaoke-word">talks</span>
<span class="karaoke-word">to</span>
<span class="karaoke-word">AI</span>
<span class="karaoke-word">like</span>
<span class="karaoke-word">it's</span>
<span class="karaoke-word">a</span>
<span class="karaoke-word">pet</span>
<span class="karaoke-word"></span>
</h2>
<p class="mx-auto mt-3 max-w-2xl text-neutral-300 text-sm sm:text-base karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">The</span>
<span class="karaoke-word">humans</span>
<span class="karaoke-word">behind</span>
<span class="karaoke-word">the</span>
<span class="karaoke-word">models</span>
<span class="karaoke-word">builders,</span>
<span class="karaoke-word">dreamers,</span>
<span class="karaoke-word">and</span>
<span class="karaoke-word">delightful</span>
<span class="karaoke-word">nerds.</span>
<span class="karaoke-word"></span>
</p>
</div>
<div class="flex mt-16 relative items-center justify-center" style="perspective: 1200px;">
<button id="teamPrevBtn" class="absolute left-4 z-20 inline-flex h-12 w-12 items-center justify-center rounded-full bg-black/50 ring-1 ring-white/10 hover:bg-white/5 transition" aria-label="Previous">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
</button>
<div class="relative w-full max-w-md h-[500px] flex items-center justify-center">
<div class="flex transition-transform duration-500 ease-out absolute top-0 right-0 bottom-0 left-0 items-center justify-center" style="transform-style: preserve-3d;" id="carouselTrack">
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="0" style="transform: translateX(-360px) scale(0.85) rotateY(20deg); opacity: 0.4; filter: brightness(0.6); z-index: 2;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e22892ae-580d-4f98-b6c4-47cacdd0c9d3_800w.webp" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
</svg>
<span class="text-white">Growth Lead</span>
</div>
<p class="text-xl font-semibold text-white tracking-tight">
John Alvarez
</p>
</div>
</div>
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="1" style="transform: translateX(-180px) scale(0.9) rotateY(10deg); opacity: 0.6; filter: brightness(0.75); z-index: 5;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/118fb7f9-cdd4-4a2a-89bd-3170e009a9a4_800w.webp" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<path d="M12 8V4H8" class=""></path>
<rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
<path d="M2 14h2" class=""></path>
<path d="M20 14h2" class=""></path>
<path d="M15 13v2" class=""></path>
<path d="M9 13v2" class=""></path>
</svg>
<span class="text-white">AI Lead</span>
</div>
<p class="text-xl font-semibold tracking-tight text-white">
Jackson Mitchel
</p>
</div>
</div>
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-2 ring-lime-300/40 bg-lime-400/10 transition-all duration-500" data-index="2" style="transform: translateX(0px) scale(1) rotateY(0deg); opacity: 1; z-index: 10; box-shadow: rgba(163, 230, 53, 0.3) 0px 20px 60px; filter: brightness(1);">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5e1c1b8c-f44b-4a81-abaf-0241f388c8ff_800w.jpg" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent"></div>
<div class="absolute top-6 right-6">
<div class="inline-flex items-center gap-1 rounded-full bg-lime-400 px-3 py-1.5 text-xs font-medium text-neutral-950">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
<path d="M12 2v20M2 12h20" class=""></path>
</svg>
Featured
</div>
</div>
<div class="absolute bottom-8 left-8 right-8">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 text-xs ring-1 ring-white/20 backdrop-blur-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
<rect width="20" height="14" x="2" y="6" rx="2" class=""></rect>
</svg>
<span class="text-white">Product Head</span>
</div>
<p class="text-3xl font-bold text-white tracking-tight mb-1">
Jenny Doe
</p>
<p class="text-sm text-neutral-300 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
<span class="karaoke-word"></span>
<span class="karaoke-word">Leading</span>
<span class="karaoke-word">product</span>
<span class="karaoke-word">vision</span>
<span class="karaoke-word">&</span>
<span class="karaoke-word">strategy</span>
<span class="karaoke-word"></span>
</p>
</div>
</div>
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="3" style="transform: translateX(180px) scale(0.9) rotateY(-10deg); opacity: 0.6; filter: brightness(0.75); z-index: 5;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6c1697f5-cb65-4307-a9e2-c0560b4e3a68_800w.webp" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class="">
</path>
</svg>
<span class="text-white">Social Media Head</span>
</div>
<p class="text-xl font-semibold tracking-tight text-white">
Armenia Sean
</p>
</div>
</div>
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="4" style="transform: translateX(360px) scale(0.85) rotateY(-20deg); opacity: 0.4; filter: brightness(0.6); z-index: 2;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/11c70762-35c0-4a1d-bdd9-40176c7ee60b_800w.webp" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class="">
</path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
<polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
<polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
<line x1="12" x2="12" y1="22.08" y2="12" class=""></line>
</svg>
<span class="text-white">Design Lead</span>
</div>
<p class="text-xl font-semibold tracking-tight text-white">
Maya Patel
</p>
</div>
</div>
<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="5" style="transform: translateX(540px) scale(0.75) rotateY(-45deg); opacity: 0; filter: brightness(0.5); z-index: 1;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/986db8ed-1c5d-42fb-8c1d-4b3716d2e317_3840w.jpg" alt="Team member" class="h-full w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M9 3v18" class=""></path>
<path d="m16 15-3-3 3-3" class=""></path>
</svg>
<span class="text-white">Platform Engineer</span>
</div>
<p class="text-xl font-semibold tracking-tight text-white">
Liam Becker
</p>
</div>
</div>
</div>
</div>
<button id="teamNextBtn" class="absolute right-4 z-20 inline-flex h-12 w-12 items-center justify-center rounded-full bg-black/50 ring-1 ring-white/10 hover:bg-white/5 transition" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</button>
</div>
</div>
<script>
(function () {
const cards = [
{ name: 'Sofia Alvarez', role: 'Growth Lead', img: 'https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?w=1200&q=80&auto=format&fit=crop' },
{ name: 'Jackson Mitchel', role: 'AI Lead', img: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=1200&q=80&auto=format&fit=crop' },
{ name: 'John Doe', role: 'Product Head', img: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=1200&q=80&auto=format&fit=crop' },
{ name: 'Armenia Sean', role: 'Social Media Head', img: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=1200&q=80&auto=format&fit=crop' },
{ name: 'Maya Patel', role: 'Design Lead', img: 'https://images.unsplash.com/photo-1541534401786-2077eed87a2d?w=1200&q=80&auto=format&fit=crop' },
{ name: 'Liam Becker', role: 'Platform Engineer', img: 'https://images.unsplash.com/photo-1544005316-04d7f94c1d27?w=1200&q=80&auto=format&fit=crop' }
];
let currentIndex = 2;
const prevBtn = document.getElementById('teamPrevBtn');
const nextBtn = document.getElementById('teamNextBtn');
const carouselCards = document.querySelectorAll('.carousel-card');
function updateCarousel() {
carouselCards.forEach((card, i) => {
const relativePos = i - currentIndex;
let transform = '';
let opacity = 1;
let filter = 'brightness(1)';
let zIndex = 1;
let ringClass = 'ring-1 ring-white/10';
let shadow = '';
if (relativePos === 0) {
transform = 'translateX(0) scale(1) rotateY(0deg)';
opacity = 1;
zIndex = 10;
ringClass = 'ring-2 ring-lime-300/40';
shadow = '0 20px 60px rgba(163,230,53,0.3)';
} else if (relativePos === -1) {
transform = 'translateX(-180px) scale(0.9) rotateY(10deg)';
opacity = 0.6;
filter = 'brightness(0.75)';
zIndex = 5;
} else if (relativePos === 1) {
transform = 'translateX(180px) scale(0.9) rotateY(-10deg)';
opacity = 0.6;
filter = 'brightness(0.75)';
zIndex = 5;
} else if (relativePos === -2) {
transform = 'translateX(-360px) scale(0.85) rotateY(20deg)';
opacity = 0.4;
filter = 'brightness(0.6)';
zIndex = 2;
} else if (relativePos === 2) {
transform = 'translateX(360px) scale(0.85) rotateY(-20deg)';
opacity = 0.4;
filter = 'brightness(0.6)';
zIndex = 2;
} else {
transform = `translateX(${relativePos * 180}px) scale(0.75) rotateY(${-relativePos * 15}deg)`;
opacity = 0;
filter = 'brightness(0.5)';
zIndex = 1;
}
card.style.transform = transform;
card.style.opacity = opacity;
card.style.filter = filter;
card.style.zIndex = zIndex;
card.style.boxShadow = shadow;
card.className = `carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ${ringClass} ${relativePos === 0 ? 'bg-lime-400/10' : ''} transition-all duration-500`;
});
}
if (prevBtn) {
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + cards.length) % cards.length;
updateCarousel();
});
}
if (nextBtn) {
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
});
}
updateCarousel();
})();
</script>
</section>