All Prompts
All Prompts
testimonialsectionresponsiveinteractiveanimatedscrollavatartailwind
Interactive Scroll-Synced Testimonial Section
Интерактивная секция отзывов с синхронизацией по скроллу. Анимированные цитаты, стики-аватары, плавный скролл. Идеально для демонстрации фидбека.
Prompt
<section class="container border-x max-w-7xl border-white/10 border-b mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
<style>
.testimonial-item {
transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
opacity: 0.15;
filter: blur(4px);
transform: scale(0.96) translateX(-10px);
}
.testimonial-item.active {
opacity: 1;
filter: blur(0);
transform: scale(1) translateX(0);
}
.avatar-indicator {
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0.3;
filter: grayscale(100%);
transform: scale(1);
border-color: rgba(255, 255, 255, 0.05);
box-shadow: none;
}
.avatar-indicator.active {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.4);
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 40px -5px rgba(168, 85, 247, 0.4);
z-index: 20;
}
.avatar-indicator::after {
content: '';
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
</style>
<!-- Header -->
<div class="flex flex-col lg:flex-row lg:items-end justify-between mb-24 gap-12 relative z-10">
<div class="flex-1">
<h2 class="text-6xl md:text-7xl lg:text-8xl font-oswald uppercase tracking-tight leading-[0.9] text-white">
What They Said
</h2>
</div>
<div class="flex flex-col justify-end items-start lg:items-end lg:text-right max-w-md gap-12">
<p class="text-zinc-400 text-lg leading-relaxed text-left lg:text-left">
Voices of our satisfied clients from around the globe.
</p>
<div class="w-full flex justify-end">
<span class="text-sm text-zinc-500 font-mono">
SCROLL TO READ
</span>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 relative min-h-[800px]">
<!-- Left Column: Testimonial Quotes (Scrollable) -->
<div class="lg:col-span-9 flex flex-col gap-40 lg:pb-40 py-12">
<!-- Quote 1 -->
<div class="testimonial-item group relative aura-reveal" data-index="0">
<div class="md:pl-12 relative">
<!-- Big Quote Icon -->
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z" class=""></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
My ping dropped from 80ms to 35ms instantly. I can finally
compete at a high level without lag spikes.
</blockquote>
<div class="flex items-center gap-4">
<!-- Mobile Inline Avatar -->
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Alex Chen
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Semi-Pro Valorant Player
</span>
</div>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="testimonial-item group relative" data-index="1">
<div class="md:pl-12 relative">
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z" class=""></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
Incredible reliability and encryption standards. Highly
recommended for enterprise usage!
</blockquote>
<div class="flex items-center gap-4">
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Sarah Jenkins
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Director at Style Vision
</span>
</div>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="testimonial-item group relative" data-index="2">
<div class="md:pl-12 relative">
<div class="absolute -left-2 -top-6 md:-left-12 md:-top-8 opacity-20">
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="text-white transform rotate-180">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z" class=""></path>
</svg>
</div>
<blockquote class="text-3xl md:text-5xl text-white font-light leading-[1.1] tracking-tight mb-8">
Transformed our connectivity across borders into a seamless
experience. Superb!
</blockquote>
<div class="flex items-center gap-4">
<div class="lg:hidden w-10 h-10 rounded-full overflow-hidden border border-white/20">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover">
</div>
<div class="flex flex-col">
<span class="text-sm text-white font-medium">
Marcus Thorne
</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">
Freelance Journalist
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Sticky Avatars (Desktop) -->
<div class="hidden lg:flex lg:col-span-3 sticky top-[40vh] flex-col items-end gap-8 pr-4 h-fit">
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="0">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="1">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
<div class="relative w-16 h-16 rounded-full border border-white/10 overflow-hidden cursor-pointer avatar-indicator" data-target="2">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=faces" class="w-full h-full object-cover transition-all">
</div>
</div>
</div>
<script>
(function() {
// Intersection Observer with a tight margin to detect middle of viewport
const options = {
root: null,
rootMargin: '-45% 0px -45% 0px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const index = entry.target.getAttribute('data-index');
updateActiveState(index);
}
});
}, options);
// Observe all testimonial items
const items = document.querySelectorAll('.testimonial-item');
items.forEach(item => observer.observe(item));
// Click to scroll functionality for avatars
const avatars = document.querySelectorAll('.avatar-indicator');
avatars.forEach(avatar => {
avatar.addEventListener('click', () => {
const targetIndex = avatar.getAttribute('data-target');
const targetItem = document.querySelector(`.testimonial-item[data-index="${targetIndex}"]`);
if (targetItem) {
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
updateActiveState(targetIndex);
}
});
});
function updateActiveState(index) {
// Toggle active class on text items
items.forEach(item => {
if (item.getAttribute('data-index') === index) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
// Toggle active class on avatars
avatars.forEach(avatar => {
if (avatar.getAttribute('data-target') === index) {
avatar.classList.add('active');
} else {
avatar.classList.remove('active');
}
});
}
// Initialize first item as active
setTimeout(() => updateActiveState('0'), 100);
})();
</script>
</section>