Загрузка...
Анимированный карусель карточек с орбитальным эффектом и сеткой фич. Интерактивный UI-компонент для лендингов и витрин продуктов, созданный на Tailwind CSS и JS.
<div class="xl:pt-18 max-w-full mr-auto ml-auto pt-18 pr-6 pb-24 pl-6"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2)">
<!-- Six Feature Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:gap-12 max-w-full gap-x-8 gap-y-8">
<!-- Showcase: CTA + Stacked Cards -->
<div class="md:col-span-3 col-span-1 w-full space-y-12">
<!-- Floating text bubbles -->
<div class="max-w-6xl mr-auto ml-auto relative">
<span class="hidden items-center -top-6 -left-2 bubble-float-1 sm:inline-flex text-xs font-semibold tracking-tight rounded-2xl pt-2 pr-3 pb-2 pl-3 absolute" style="background: linear-gradient(135deg, rgb(30, 144, 255) 0%, rgb(18, 115, 234) 100%); color: rgb(255, 255, 255); box-shadow: rgba(18, 115, 234, 0.35) 0px 10px 24px; transform: translateY(0.0159999px) rotate(-6deg); animation: 3s ease-in-out 0s infinite normal none running floatBubble1;">AI Chat Support<i class="w-2 h-2 bg-current absolute -bottom-1 left-6 rotate-45 rounded-[2px]" style="background:#1273ea;"></i></span>
<span class="hidden sm:inline-flex items-center -top-12 text-xs font-semibold tracking-tight rounded-2xl pt-2 pr-3 pb-2 pl-3 absolute right-0 bubble-float-2" style="background: linear-gradient(135deg, rgb(139, 92, 246) 0%, rgb(124, 58, 237) 100%); color: rgb(255, 255, 255); box-shadow: rgba(124, 58, 237, 0.35) 0px 10px 24px; transform: translateY(8.42334px) rotate(6deg); animation: 3s ease-in-out 0.5s infinite normal none running floatBubble2;">
Problem Solved
<i class="w-2 h-2 bg-current absolute -bottom-1 right-6 rotate-45 rounded-[2px]" style="background:#7c3aed;"></i>
</span>
<!-- Card Stack with Orbit Animation -->
<div
class="flex min-h-[400px] sm:px-6 sm:mt-0 sm:mb-40 mt-0 mb-40 pr-4 pl-4 relative gap-x-0 gap-y-0 items-end justify-center"
id="card-orbit-container">
<!-- Card 1 -->
<div
class="orbit-card group absolute w-[180px] sm:w-[220px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 transition-all duration-100 hover:-translate-y-[6px] shadow-[0_20px_50px_rgba(0,0,0,0.5)]"
data-orbit-index="0"
style="left: 966px; top: 260.112px; transform: translate(-50%, -50%) rotate(12deg) scale(1.00012); opacity: 0.5004; z-index: 50; filter: none;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/149e33ce-f3dc-40ee-b985-cb0735411ff5_800w.jpg" alt="Minimal bag on moss" class="w-full h-full object-cover transition-transform duration-100 group-hover:scale-110">
<div class="absolute inset-0 rounded-3xl" style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.6);"></div>
<div
class="transition-all duration-100 group-hover:bg-black/20 bg-black/0 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<!-- Card 2 -->
<div
class="orbit-card group absolute w-[190px] sm:w-[240px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 shadow-[0_20px_50px_rgba(0,0,0,0.55)] transition-all duration-100 hover:-translate-y-[6px]"
data-orbit-index="1"
style="left: 765.723px; top: 381.3px; transform: translate(-50%, -50%) rotate(5.99168deg) scale(1.12996); opacity: 0.933213; z-index: 93; filter: none;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/be34e0e0-bfda-49c7-b231-b353206dd7a2_800w.jpg" alt="Sports car at sunset" class="w-full h-full object-cover transition-transform duration-100 group-hover:scale-110">
<div class="absolute inset-0 rounded-3xl" style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.6);"></div>
<div
class="transition-all duration-100 group-hover:bg-black/20 bg-black/0 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<!-- Card 3 -->
<div
class="orbit-card group absolute w-[200px] sm:w-[260px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 shadow-[0_24px_60px_rgba(0,0,0,0.6)] hover:z-10 transition-all duration-100 hover:scale-105 hover:-translate-y-[6px]"
data-orbit-index="2"
style="left: 365.723px; top: 381.188px; transform: translate(-50%, -50%) rotate(-6.00831deg) scale(1.12984); opacity: 0.932813; z-index: 93; filter: none;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4c9c20c8-e367-4ade-a102-dda55d03765d_800w.jpg" alt="Citrus still life with dropper bottle" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="transition-all duration-100 absolute top-0 right-0 bottom-0 left-0"
style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55);">
<div
class="transition-all duration-100 group-hover:bg-black/20 bg-black/0 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<div
class="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
style="background: radial-gradient(600px circle at 50% 30%, rgba(139 transparent 40%);"></div>
</div>
<!-- Card 4 -->
<div
class="orbit-card group absolute w-[190px] sm:w-[240px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 shadow-[0_20px_50px_rgba(0,0,0,0.55)] transition-all duration-100 hover:-translate-y-[6px]"
data-orbit-index="3"
style="left: 166px; top: 259.888px; transform: translate(-50%, -50%) rotate(-12deg) scale(0.99988); opacity: 0.9992; z-index: 50; filter: blur(2.0016px);">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/986db8ed-1c5d-42fb-8c1d-4b3716d2e317_800w.jpg" alt="Reflective sphere render on field" class="w-full h-full object-cover transition-transform duration-100 group-hover:scale-110">
<div class="absolute inset-0 rounded-3xl" style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.6);"></div>
<div
class="transition-all duration-100 group-hover:bg-black/20 bg-black/0 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<!-- Card 5 -->
<div
class="orbit-card group absolute w-[190px] sm:w-[240px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 shadow-[0_22px_55px_rgba(0,0,0,0.55)] transition-all duration-100 hover:-translate-y-[6px]"
data-orbit-index="4"
style="left: 366.277px; top: 138.7px; transform: translate(-50%, -50%) rotate(-5.99168deg) scale(0.870036); opacity: 0; z-index: 7; filter: blur(4px);">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7a2dc7c2-23b6-422f-a823-9f6546bcaa1e_800w.jpg" alt="Portrait fashion outdoors" class="w-full h-full object-cover transition-transform duration-100 group-hover:scale-110">
<div class="absolute inset-0 rounded-3xl" style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55);"></div>
<div
class="transition-all duration-100 group-hover:bg-black/20 bg-black/0 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<!-- Card 6 -->
<div
class="orbit-card group absolute w-[200px] sm:w-[260px] aspect-[4/5] rounded-3xl overflow-hidden border border-white/10 bg-black/60 shadow-[0_26px_70px_rgba(0,0,0,0.6)] hover:z-10 transition-all duration-100 hover:scale-105 hover:-translate-y-[6px]"
data-orbit-index="5"
style="left: 766.277px; top: 138.812px; transform: translate(-50%, -50%) rotate(6.00831deg) scale(0.870156); opacity: 0; z-index: 7; filter: blur(4px);">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_800w.jpg" alt="Perfume bottles product shot" class="w-full h-full object-cover transition-transform duration-100 group-hover:scale-110">
<div class="rounded-3xl absolute top-0 right-0 bottom-0 left-0"
style="box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55);"></div>
<div
class="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/20">
</div>
<div
class="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
style="background: radial-gradient(600px circle at 60% 30%, rgba(139,92,246,0.12), transparent 40%);">
</div>
</div>
</div>
</div>
<!-- Divider -->
<!-- Feature Row -->
<div
class="col-span-1 grid grid-cols-1 sm:px-6 md:col-span-3 md:grid-cols-3 md:pt-44 md:pb-20 w-full pt-44 pr-4 pb-20 pl-4 gap-x-6 gap-y-6">
<!-- Feature 1 -->
<div
class="group overflow-hidden transition-all duration-100 hover:translate-y-[-6px] bg-white/5 border-white/10 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 relative"
style="box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); animation: fadeSlideUp 0.8s ease-out 1.5s both;">
<div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0"
style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));">
</div>
<div class="absolute inset-0 pointer-events-none opacity-[0.12]"
style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.25) 1px, transparent 0); background-size: 18px 18px;">
</div>
<div class="relative flex items-center gap-3 mb-3">
<div class="w-10 h-10 rounded-2xl flex items-center justify-center"
style="background: linear-gradient(135deg,#8b5cf6 0%, #7c3aed 100%); box-shadow: 0 8px 24px rgba(124,58,237,0.45); animation: pulse 2s ease-in-out infinite 0.2s;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-message-circle-more text-white">
<path
d="M3 12c0 1.7 1 3.3 2.7 4.5l-.7 3.5 3.5-.7C10.7 20 12.3 21 14 21c4.4 0 8-3.1 8-7s-3.6-7-8-7-8 3.1-8 7Z"
class="">
</path>
<path d="M8 12h.01" class=""></path>
<path d="M12 12h.01" class=""></path>
<path d="M16 12h.01" class=""></path>
</svg>
</div>
<h3 class="text-white text-lg font-semibold tracking-tight">Fast Responses</h3>
</div>
<p class="relative text-white/70 text-sm leading-relaxed">Get timely answers to your questions.</p>
</div>
<!-- Feature 2 -->
<div
class="group overflow-hidden transition-all duration-300 hover:translate-y-[-6px] bg-white/5 border-white/10 border rounded-[28px] pt-6 pr-6 pb-6 pl-6 relative"
style="box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); animation: fadeSlideUp 0.8s ease-out 1.6s both;">
<div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0"
style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));">
</div>
<div class="absolute inset-0 pointer-events-none opacity-[0.12]"
style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.25) 1px, transparent 0); background-size: 18px 18px;">
</div>
<div class="relative flex items-center gap-3 mb-3">
<div class="w-10 h-10 rounded-2xl flex items-center justify-center"
style="background: linear-gradient(135deg,#8b5cf6 0%, #7c3aed 100%); box-shadow: 0 8px 24px rgba(124,58,237,0.45); animation: pulse 2s ease-in-out infinite 0.4s;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-sparkles text-white">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class="">
</path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
</div>
<h3 class="text-white text-lg font-semibold tracking-tight">Expert Guidance</h3>
</div>
<p class="relative text-white/70 text-sm leading-relaxed">Our team understands both design and tech.</p>
</div>
<!-- Feature 3 -->
<div
class="group relative rounded-[28px] border border-white/10 bg-white/5 p-6 overflow-hidden transition-all duration-300 hover:translate-y-[-6px]"
style="box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); animation: fadeSlideUp 0.8s ease-out 1.7s both;">
<div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0"
style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));">
</div>
<div class="absolute inset-0 pointer-events-none opacity-[0.12]"
style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.25) 1px, transparent 0); background-size: 18px 18px;">
</div>
<div class="relative flex items-center gap-3 mb-3">
<div class="w-10 h-10 rounded-2xl flex items-center justify-center"
style="background: linear-gradient(135deg,#8b5cf6 0%, #7c3aed 100%); box-shadow: 0 8px 24px rgba(124,58,237,0.45); animation: pulse 2s ease-in-out infinite 0.6s;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-lock-keyhole text-white">
<circle cx="12" cy="16" r="1" class=""></circle>
<rect width="18" height="12" x="3" y="10" rx="2" class=""></rect>
<path d="M7 10V7a5 5 0 0 1 10 0v3" class=""></path>
</svg>
</div>
<h3 class="text-white text-lg font-semibold tracking-tight">Continuous Help</h3>
</div>
<p class="relative text-white/70 text-sm leading-relaxed">Support doesn't stop after launch.</p>
</div>
</div>
</div>
</div>
<style>
@keyframes floatBubble1 {
0%,
100% {
transform: translateY(0px) rotate(-6deg);
}
50% {
transform: translateY(-10px) rotate(-6deg);
}
}
@keyframes floatBubble2 {
0%,
100% {
transform: translateY(0px) rotate(6deg);
}
50% {
transform: translateY(-10px) rotate(6deg);
}
}
</style>
<script>
(function() {
const container = document.getElementById('card-orbit-container');
if (!container) return;
const cards = Array.from(container.querySelectorAll('.orbit-card'));
const bubble1 = document.querySelector('.bubble-float-1');
const bubble2 = document.querySelector('.bubble-float-2');
const totalCards = cards.length;
let animationTime = 0;
const speed = 0.0008;
function updateOrbit() {
animationTime += speed;
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
const centerX = containerWidth / 2;
const centerY = containerHeight * 0.65;
const radiusX = Math.min(containerWidth * 0.45, 400);
const radiusY = Math.min(containerHeight * 0.35, 150);
cards.forEach((card, index) => {
const angleOffset = (index / totalCards) * Math.PI * 2;
const angle = animationTime + angleOffset;
const x = centerX + Math.cos(angle) * radiusX;
const y = centerY + Math.sin(angle) * radiusY;
const depth = Math.sin(angle);
const scale = 0.85 + (depth + 1) * 0.15;
const zIndex = Math.round(50 + depth * 50);
const rotation = Math.cos(angle) * 12;
let opacity, blur;
if (depth < -0.5) {
opacity = 0;
blur = 4;
} else if (depth < 0) {
opacity = 0.5 + (depth + 0.5) * 1.0;
blur = 2 + Math.abs(depth) * 2;
} else {
opacity = 0.5 + depth * 0.5;
blur = 0;
}
card.style.left = x + 'px';
card.style.top = y + 'px';
card.style.transform = `translate(-50%, -50%) rotate(${rotation}deg) scale(${scale})`;
card.style.opacity = opacity;
card.style.zIndex = zIndex;
card.style.filter = blur > 0 ? `blur(${blur}px)` : 'none';
if (index === 0 && bubble1) {
const bubbleY = Math.sin(animationTime * 2) * 10;
bubble1.style.transform = `translateY(${bubbleY}px) rotate(-6deg)`;
}
if (index === 5 && bubble2) {
const bubbleY = Math.sin((animationTime + 0.5) * 2) * 10;
bubble2.style.transform = `translateY(${bubbleY}px) rotate(6deg)`;
}
});
requestAnimationFrame(updateOrbit);
}
updateOrbit();
window.addEventListener('resize', () => {});
})();
</script>
</div>