hero developer cli terminal install dark animated status cycling devtools hero developer cli terminal install dark devtools cycling-status bash curl dark hero for developer tool with install command CLI product landing page hero animated status badge hero with terminal install block
Hero Developer
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/developer.json developer.html
<style>
@keyframes ws-cycle {
0%, 26% { transform: translateY(0); }
33%, 59% { transform: translateY(-100%); }
66%, 92% { transform: translateY(-200%); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ws-hero-cycle { animation: none !important; }
}
</style>
<!-- Always-dark developer hero — hardcoded dark palette -->
<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] py-24">
<!-- Subtle grid background -->
<div class="pointer-events-none absolute inset-0 opacity-[0.04]"
style="background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); background-size: 40px 40px;"> <!-- ws-ok --></div>
<div class="relative mx-auto max-w-4xl px-6 text-center">
<!-- Animated status badge -->
<div class="inline-flex items-center gap-2 rounded-full border border-[var(--ws-hero-border)] bg-[var(--ws-hero-preview-bg)] px-3.5 py-1.5">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_2px_oklch(79.2%_0.209_151.711/0.5)]"></span>
<div class="h-4 overflow-hidden text-xs font-mono text-slate-300">
<ul class="ws-hero-cycle m-0 list-none p-0 leading-4" style="animation: ws-cycle 7.5s ease infinite;" aria-live="polite" aria-label="Current activity">
<li>◈ Debugging your tests</li>
<li>◓ Analyzing the codebase</li>
<li>✽ Writing documentation</li>
</ul>
</div>
</div>
<!-- Headline -->
<h1 class="mt-8 text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
The AI that lives<br class="hidden sm:block"> in your terminal
</h1>
<p class="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-[var(--ws-hero-text-soft)]">
Claude Code understands your entire codebase — edits files, runs commands, and ships production-ready code, all from your CLI.
</p>
<!-- CTAs -->
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
Get started free
</a>
<a href="#" class="rounded-xl border border-slate-700 px-6 py-3 text-sm font-semibold text-slate-300 transition hover:border-slate-500 hover:text-white">
View docs
</a>
</div>
<!-- Install block -->
<div class="mx-auto mt-12 max-w-lg overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/80 text-left backdrop-blur-sm">
<!-- OS tabs (CSS-only radio) -->
<input type="radio" name="os-tab" id="os-mac" class="peer/mac sr-only" checked>
<input type="radio" name="os-tab" id="os-linux" class="peer/linux sr-only">
<input type="radio" name="os-tab" id="os-win" class="peer/win sr-only">
<div class="flex border-b border-slate-800 px-1 pt-1">
<label for="os-mac"
class="cursor-pointer rounded-t-lg px-4 py-2 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/mac:border-b-2 peer-checked/mac:border-slate-400 peer-checked/mac:text-slate-200">
macOS
</label>
<label for="os-linux"
class="cursor-pointer rounded-t-lg px-4 py-2 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/linux:border-b-2 peer-checked/linux:border-slate-400 peer-checked/linux:text-slate-200">
Linux
</label>
<label for="os-win"
class="cursor-pointer rounded-t-lg px-4 py-2 text-xs font-medium text-slate-500 transition hover:text-slate-300 peer-checked/win:border-b-2 peer-checked/win:border-slate-400 peer-checked/win:text-slate-200">
Windows
</label>
</div>
<!-- macOS panel -->
<div class="hidden peer-checked/mac:block">
<div class="flex items-center justify-between px-5 py-4">
<code class="font-mono text-sm text-emerald-400">curl -fsSL https://claude.ai/install.sh | bash</code>
<button type="button" aria-label="Copy command"
class="ml-4 shrink-0 rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-800 hover:text-slate-300">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/>
</svg>
</button>
</div>
</div>
<!-- Linux panel -->
<div class="hidden peer-checked/linux:block">
<div class="flex items-center justify-between px-5 py-4">
<code class="font-mono text-sm text-emerald-400">curl -fsSL https://claude.ai/install.sh | bash</code>
<button type="button" aria-label="Copy command"
class="ml-4 shrink-0 rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-800 hover:text-slate-300">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/>
</svg>
</button>
</div>
</div>
<!-- Windows panel -->
<div class="hidden peer-checked/win:block">
<div class="flex items-center justify-between px-5 py-4">
<code class="font-mono text-sm text-sky-400">irm https://claude.ai/install.ps1 | iex</code>
<button type="button" aria-label="Copy command"
class="ml-4 shrink-0 rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-800 hover:text-slate-300">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/>
</svg>
</button>
</div>
</div>
</div>
<!-- Supporting note -->
<p class="mt-4 text-xs text-[var(--ws-hero-text-muted)]">Free during beta · No credit card required</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
herodevelopercliterminalinstalldarkanimatedstatuscyclingdevtools
Slots
| Name | Required | Description |
|---|---|---|
| status-badge | No | Animated pill showing cycling activity messages (CSS keyframes, no JS). |
| heading | Yes | Main headline. |
| subtext | No | Supporting paragraph. |
| cta | Yes | Primary and secondary action buttons. |
| install-block | No | Tabbed terminal block with OS-specific install commands. |
| note | No | Fine-print below the install block (pricing/beta info). |
Always-dark hero for CLI tools and developer SaaS products. Top eyebrow is a pill badge with a pulsing green dot and a CSS-animated text strip that cycles through activity messages (”◈ Debugging…”, ”◓ Analyzing…”) every 2.5s using @keyframes ws-cycle — no JS required. Below the headline and CTAs sits a compact install panel with CSS-only OS tabs (macOS / Linux / Windows via radio peer-checked). The macOS and Linux commands share the same curl invocation; Windows shows a PowerShell one-liner. Copy button is static — connect navigator.clipboard.writeText() for production.