testimonial social-proof spotlight glow hover cursor interactive cards testimonial spotlight glow cursor hover interactive radial-gradient cards social-proof testimonial cards with cursor glow effect interactive spotlight testimonial grid hover radial glow testimonial section
Testimonials Spotlight
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/spotlight.json spotlight.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<style>
.spotlight-card .spotlight-layer { opacity: 0; transition: opacity 0.4s ease; }
.spotlight-card:hover .spotlight-layer { opacity: 1; }
</style>
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">Customer stories</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">Trusted by product teams who ship</h2>
<p class="mt-4 text-base text-[var(--ws-testimonials-text-soft)]">Real feedback from teams using Webspire in production every day.</p>
</div>
<div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"We replaced our entire component library with Webspire patterns in a sprint. The quality bar is exactly right — opinionated enough to ship fast, flexible enough to customize."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-400 to-purple-600 text-xs font-bold text-white">SR</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Sofia Reyes</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Head of Design, Linear</p>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.65 0.18 200 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The token system is brilliant. One `@theme` override and our brand colors cascade through every pattern. Dark mode just works without writing a single `dark:` class."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-600 text-xs font-bold text-white">MK</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Marcus Kim</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Senior Engineer, Vercel</p>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.7 0.15 60 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"Our agency builds client sites 3× faster now. The family model keeps variants consistent and the HTML-first approach means no framework lock-in for clients."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-400 to-orange-500 text-xs font-bold text-white">PW</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Priya Weston</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Creative Director, Studio W</p>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"I pitched Webspire to our VP by live-composing a full landing page with the MCP tool in 4 minutes. The AI integration alone is worth the switch."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-sky-400 to-blue-600 text-xs font-bold text-white">TN</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Tobias Nguyen</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Staff Engineer, Stripe</p>
</div>
</div>
</article>
<!-- Card 5 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.65 0.18 160 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The semantic model for domains and tones is genuinely useful. Our AI assistant now picks the right patterns for the right context without guesswork."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-rose-400 to-pink-600 text-xs font-bold text-white">AL</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Aiko Löwenstein</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Product Designer, Figma</p>
</div>
</div>
</article>
<!-- Card 6 -->
<article class="spotlight-card relative overflow-hidden rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
<div class="spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 300 / 0.08), transparent)"></div>
<div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
<blockquote class="mt-4">
<p class="text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"Copy-paste and it works. No dependencies, no framework drama. Our junior devs can contribute production-grade UIs on day one."</p>
</blockquote>
<div class="mt-5 flex items-center gap-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-violet-600 text-xs font-bold text-white">JC</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Jonas Chen</p>
<p class="text-xs text-[var(--ws-testimonials-text-muted)]">Engineering Manager, Notion</p>
</div>
</div>
</article>
</div>
</div>
<script>
document.querySelectorAll('.spotlight-card').forEach(card => {
card.addEventListener('mousemove', e => {
const r = card.getBoundingClientRect();
card.style.setProperty('--cx', `${e.clientX - r.left}px`);
card.style.setProperty('--cy', `${e.clientY - r.top}px`);
});
});
</script>
</section>
Details
Responsive Dark Mode Copy & Paste
Stable Published
testimonialsocial-proofspotlightglowhovercursorinteractivecards
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section label, title, and subtitle. |
| testimonials | Yes | Six testimonial cards in a responsive grid with spotlight overlay. |
Jede Card enthält ein absolut positioniertes .spotlight-layer mit einem radial-gradient, dessen Mittelpunkt über --cx / --cy CSS Custom Properties gesteuert wird. Ein mousemove-Listener setzt diese Variablen relativ zum Card-Rand. Die Opacity-Transition (0.4s ease) sorgt für ein weiches Ein- und Ausblenden. Auf Touch-Geräten bleibt das Layer unsichtbar — keine sichtbare Regression.