pricing spotlight cursor interactive cards plans glow pricing spotlight cursor glow radial-gradient interactive plans cards pricing cards with cursor spotlight interactive glow pricing section hover radial gradient pricing
Pricing Spotlight
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/spotlight.json spotlight.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Spotlight — Webspire Pattern</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.pricing-card {
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
400px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
rgba(99, 102, 241, 0.12),
transparent 60%
);
opacity: 0;
transition: opacity 300ms;
pointer-events: none;
z-index: 0;
}
.pricing-card:hover::before {
opacity: 1;
}
.pricing-card > * {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.pricing-card::before { transition: none; }
}
</style>
</head>
<body class="bg-slate-950 text-slate-200 font-sans antialiased">
<section class="py-24 px-6">
<div class="mx-auto max-w-7xl">
<!-- Heading -->
<div class="mx-auto max-w-2xl text-center mb-16">
<p class="mb-4 text-sm font-semibold uppercase tracking-widest text-indigo-400">Pricing</p>
<h2 class="text-4xl font-bold tracking-tight text-slate-100 sm:text-5xl">Simple, transparent pricing</h2>
<p class="mt-4 text-lg text-slate-400">Choose the plan that grows with you. No hidden fees, cancel anytime.</p>
</div>
<!-- Cards grid -->
<div class="grid gap-8 lg:grid-cols-3 lg:items-center">
<!-- Free -->
<div class="pricing-card rounded-2xl border border-slate-800 bg-slate-900/60 p-8"
onpointermove="trackSpotlight(event, this)">
<div class="mb-6">
<h3 class="text-lg font-semibold text-slate-100">Free</h3>
<p class="mt-1 text-sm text-slate-400">For individuals exploring the platform.</p>
</div>
<div class="mb-8">
<span class="text-5xl font-bold text-slate-100">$0</span>
<span class="ml-1 text-slate-400">/month</span>
</div>
<ul class="mb-8 space-y-3 text-sm text-slate-400">
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
3 projects
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
1 GB storage
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Community support
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-slate-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="text-slate-600">Analytics</span>
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-slate-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="text-slate-600">Priority support</span>
</li>
</ul>
<a href="#"
class="block rounded-xl border border-slate-700 py-3 text-center text-sm font-semibold text-slate-300 transition hover:border-indigo-500 hover:text-indigo-400">
Get started free
</a>
</div>
<!-- Pro (featured) -->
<div class="pricing-card relative rounded-2xl border border-indigo-500/50 bg-indigo-950/60 p-8 ring-1 ring-indigo-500/30 lg:scale-105"
onpointermove="trackSpotlight(event, this)">
<span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-indigo-500 px-3 py-1 text-xs font-bold text-white shadow-lg">Most popular</span>
<div class="mb-6">
<h3 class="text-lg font-semibold text-slate-100">Pro</h3>
<p class="mt-1 text-sm text-indigo-300">For growing teams and businesses.</p>
</div>
<div class="mb-8">
<span class="text-5xl font-bold text-slate-100">$29</span>
<span class="ml-1 text-indigo-300">/month</span>
</div>
<ul class="mb-8 space-y-3 text-sm text-indigo-200">
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
100 GB storage
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Advanced analytics
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Priority support
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Custom domains
</li>
</ul>
<a href="#"
class="block rounded-xl bg-indigo-500 py-3 text-center text-sm font-semibold text-white shadow-lg transition hover:bg-indigo-400">
Get started
</a>
</div>
<!-- Enterprise -->
<div class="pricing-card rounded-2xl border border-slate-800 bg-slate-900/60 p-8"
onpointermove="trackSpotlight(event, this)">
<div class="mb-6">
<h3 class="text-lg font-semibold text-slate-100">Enterprise</h3>
<p class="mt-1 text-sm text-slate-400">For large organizations and compliance needs.</p>
</div>
<div class="mb-8">
<span class="text-5xl font-bold text-slate-100">$99</span>
<span class="ml-1 text-slate-400">/month</span>
</div>
<ul class="mb-8 space-y-3 text-sm text-slate-400">
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Everything in Pro
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
1 TB storage
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
SSO & SAML
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Dedicated support
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 shrink-0 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Custom contracts
</li>
</ul>
<a href="#"
class="block rounded-xl border border-slate-700 py-3 text-center text-sm font-semibold text-slate-300 transition hover:border-indigo-500 hover:text-indigo-400">
Contact sales
</a>
</div>
</div>
</div>
</section>
<script>
function trackSpotlight(e, card) {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
card.style.setProperty('--spotlight-x', x + '%');
card.style.setProperty('--spotlight-y', y + '%');
}
</script>
</body>
</html>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
pricingspotlightcursorinteractivecardsplansglow
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| plans | Yes | Three pricing cards with price, features, and CTA. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| spotlightColor | string | rgba(99, 102, 241, 0.12) | Radial gradient spotlight color on card hover. |
Three pricing cards (Free, Pro, Enterprise) on a dark background. Each card has a ::before pseudo-element with a radial-gradient that is hidden by default (opacity: 0) and fades in on hover (opacity: 1). A tiny onpointermove handler sets --spotlight-x and --spotlight-y CSS custom properties on the card so the gradient tracks the cursor precisely. The Pro card is featured with a ring border and lg:scale-105 lift.