Het werk voelt alsof er nauwelijks aan getrokken is. Precies wat we zochten.
Sanne — studio van Loon
Het werk voelt alsof er nauwelijks aan getrokken is. Precies wat we zochten.
Sanne — studio van Loon
Klein, rustig, en heel precies. Alles wat we niet konden formuleren.
Joris — atelier hertog
Het is geen schreeuw, het is een kamer. Mensen blijven langer.
Iris — uitgeverij elst
Niets in de weg, alles op zijn plaats.
Marit — kade 11
// Mechanisme: testimonial-stacking-quotes-quiet import gsap from 'https://esm.sh/[email protected]'; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const cards = gsap.utils.toArray('.qq-card'); if (reduce) { cards.forEach(c => gsap.set(c, { autoAlpha: 0.7 })); gsap.set(cards[0], { autoAlpha: 1 }); } else { gsap.set(cards, { y: 60, autoAlpha: 0 }); gsap.set(cards[0], { y: 0, autoAlpha: 0.7 }); let i = 0; const advance = () => { const next = (i + 1) % cards.length; gsap.to(cards[i], { autoAlpha: 0.4, duration: 1.6, ease: 'power1.out' }); gsap.fromTo(cards[next], { y: 60, autoAlpha: 0 }, { y: 0, autoAlpha: 0.7, duration: 1.6, ease: 'power1.out' }); i = next; }; setInterval(advance, 3500); }
<!-- Skeleton: testimonial-stacking-quotes-quiet -->
<section class="qq-wrap">
<span class="qq-eyebrow">— stemmen —</span>
<div class="qq-stack">
<article class="qq-card"><p class="qq-text">Het werk voelt alsof er nauwelijks aan getrokken is. Precies wat we zochten.</p><p class="qq-attr">Sanne — studio van Loon</p></article>
<article class="qq-card"><p class="qq-text">Klein, rustig, en heel precies. Alles wat we niet konden formuleren.</p><p class="qq-attr">Joris — atelier hertog</p></article>
<article class="qq-card"><p class="qq-text">Het is geen schreeuw, het is een kamer. Mensen blijven langer.</p><p class="qq-attr">Iris — uitgeverij elst</p></article>
<article class="qq-card"><p class="qq-text">Niets in de weg, alles op zijn plaats.</p><p class="qq-attr">Marit — kade 11</p></article>
</div>
</section> /* Styling: testimonial-stacking-quotes-quiet — quiet */
.qq-wrap { background:#F4F1EB; color:#0A0A0A; min-height:100vh; padding:14vh 8vw; font-family:'Inter',system-ui,sans-serif; font-weight:300; }
.qq-eyebrow { font-size:.74rem; letter-spacing:.2em; color:rgba(10,10,10,.45); text-transform:lowercase; }
.qq-stack { position:relative; max-width:48rem; margin:6rem auto 0; min-height:46vh; }
.qq-card { position:absolute; inset:0; padding:2rem 0; }
.qq-text { font-family:'Fraunces',serif; font-weight:300; font-style:italic; font-size:clamp(1.4rem,2.8vw,2.2rem); line-height:1.35; margin:0 0 1.2rem; color:rgba(10,10,10,.7); letter-spacing:-.005em; }
.qq-attr { margin:0; font-size:.82rem; letter-spacing:.04em; color:rgba(10,10,10,.45); }