cards spotlight cursor hover features grid cards spotlight cursor hover radial-gradient features grid interactive feature card grid with cursor spotlight hover glow effect on cards six feature grid with radial highlight
Cards Hover Spotlight
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/hover-spotlight.json hover-spotlight.html
<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
<style>
.ws-spotlight-card .ws-spotlight-layer { opacity: 0; transition: opacity 0.35s ease; }
.ws-spotlight-card:hover .ws-spotlight-layer { opacity: 1; }
</style>
<div class="mx-auto max-w-7xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Consolidate your workflow</h2>
<p class="mt-4 text-lg text-[var(--ws-cards-text-soft)]">Everything you need in one place — stop switching tools.</p>
</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Write</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Rich text documents that think like you do. Block-based, keyboard-first, infinitely nestable.</p>
</div>
</article>
<!-- Card 2 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Draw</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Infinite canvas for diagrams, wireframes, and visual thinking. No constraints, no grids.</p>
</div>
</article>
<!-- Card 3 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Plan</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Databases, tasks, and timelines in the same document. Plan and track without switching apps.</p>
</div>
</article>
<!-- Card 4 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Privacy-first</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Local storage by default. Your data never leaves your device unless you choose to sync.</p>
</div>
</article>
<!-- Card 5 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Collaborate</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Real-time multiplayer with conflict-free sync. Invite your team and work together live.</p>
</div>
</article>
<!-- Card 6 -->
<article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
<div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
<div class="relative z-10">
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
<svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
</div>
<h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">AI-powered</h3>
<p class="text-sm text-[var(--ws-cards-text-soft)]">Built-in AI that writes, summarizes, and transforms content — right where you work.</p>
</div>
</article>
</div>
</div>
<script>
document.querySelectorAll('.ws-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 SSR Safe Copy & Paste
Stable Published
cardsspotlightcursorhoverfeaturesgrid
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle above the card grid. |
| cards | Yes | Six feature cards, each with icon, title, and description. |
Feature-Card-Grid mit 6 Karten in einem 3×2-Raster. Beim Hovern folgt ein Radial-Glow dem Cursor über die jeweilige Karte. Jede Card hat ein Icon, einen Titel und eine kurze Beschreibung. Inspiriert von AFFiNE’s “Consolidate Your Workflow”-Sektion.