478e2818b9
Some checks failed
CI / go (push) Has been cancelled
CI / docker (push) Has been cancelled
CI / lint-go (push) Has been cancelled
CI / lint-docs (push) Has been cancelled
CI / check-paperclip (push) Has been cancelled
Deploy static site / Deploy to GitHub Pages (push) Has been cancelled
Deploy static site / Deploy via Docker to hatch.surf (push) Has been cancelled
Three taglines rotate every 3.5s with a subtle 700ms opacity crossfade between the H1 and the hero sub on the hatch.surf landing page: 1. Inspect any request. Mock any response. (default, in initial HTML) 2. Your HTTP bin, on your machine. 3. Send. Capture. Mock. No signup. Implementation: - site/index.html: <div class='hero-tagline' aria-live=polite> with three <p class='hero-tagline-item'> children stacked; default #1 has is-active class and no aria-hidden (for SEO + no-JS users) - site/style.css: .hero-tagline uses position:relative with fixed height: 1.7em (no CLS during rotation); absolute children crossfade via transition: opacity 700ms var(--ease-out); font: JetBrains Mono weight 500 in var(--text-secondary); clamp(0.85rem, 2.2vw, 1rem) so mobile (375px+) fits the longest tagline on one line - site/main.js: initRotatingTagline() in the existing IIFE; setInterval every 3500ms swaps is-active and aria-hidden between siblings; early-returns if prefers-reduced-motion is set, so the default tagline stays visible without animation - Spacing: H1 mb-sp-6, tagline mb-sp-6, sub mb-sp-8 keeps the existing 24px/24px/32px rhythm unchanged below the headline Note: site/index.html (not the Next.js app under app/ + components/) is what hatch.surf/nginx actually serves. The Next.js work from the earlier failed run was reverted.
190 lines
11 KiB
HTML
190 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hatch — Self-hostable HTTP request inspector + mocker</title>
|
|
<meta name="description" content="Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Hatch — Self-hostable HTTP request inspector + mocker">
|
|
<meta property="og:description" content="Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.">
|
|
<meta property="og:image" content="/brand/og/default.png">
|
|
<meta property="og:url" content="https://hatch.sh">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Hatch — Self-hostable HTTP request inspector + mocker">
|
|
<meta name="twitter:description" content="Hatch is a self-hostable HTTP request inspector and mocker. One Go binary, SQLite, no SaaS, no per-request fee. Open source, MIT.">
|
|
<meta name="twitter:image" content="/brand/og/default.png">
|
|
|
|
<link rel="canonical" href="https://hatch.sh">
|
|
<link rel="icon" type="image/png" href="/brand/favicon/favicon-48.png">
|
|
|
|
<!-- Fonts: Inter for body, JetBrains Mono for code -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Anime.js magical background layers -->
|
|
<div id="magic-bg" aria-hidden="true">
|
|
<div class="magic-aurora"></div>
|
|
<div class="magic-aurora magic-aurora--2"></div>
|
|
<div class="magic-aurora magic-aurora--3"></div>
|
|
<svg class="magic-runes" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
|
|
<circle class="rune rune-outer" cx="400" cy="400" r="350" />
|
|
<circle class="rune rune-mid" cx="400" cy="400" r="260" />
|
|
<circle class="rune rune-inner" cx="400" cy="400" r="170" />
|
|
<circle class="rune rune-core" cx="400" cy="400" r="80" />
|
|
</svg>
|
|
<div class="magic-orbs" id="magic-orbs"></div>
|
|
<svg class="magic-connections" id="magic-connections"></svg>
|
|
<div class="magic-sparkles" id="magic-sparkles"></div>
|
|
<div class="magic-cursor-glow" id="magic-cursor-glow"></div>
|
|
</div>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<a href="/" class="logo">
|
|
<span class="logo-mark">⬡</span> Hatch
|
|
</a>
|
|
<nav>
|
|
<a href="https://github.com/elfoundation/hatch" class="nav-link">GitHub</a>
|
|
<a href="/blog/" class="nav-link">Blog</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-badge" data-animate="fade-up">Open source · MIT licensed</div>
|
|
<h1 data-animate="fade-up" data-delay="80">
|
|
Self-hostable HTTP request<br>inspector + mocker
|
|
</h1>
|
|
<!-- Slot 3 rotating tagline (ELF-457, brief ELF-456). Default #1 is in the
|
|
initial HTML for no-JS / SEO. JS in main.js cycles opacity every 3.5s. -->
|
|
<div class="hero-tagline" aria-live="polite" aria-atomic="true">
|
|
<p class="hero-tagline-item is-active">Inspect any request. Mock any response.</p>
|
|
<p class="hero-tagline-item" aria-hidden="true">Your HTTP bin, on your machine.</p>
|
|
<p class="hero-tagline-item" aria-hidden="true">Send. Capture. Mock. No signup.</p>
|
|
</div>
|
|
<p class="hero-sub" data-animate="fade-up" data-delay="160">
|
|
One Go binary. SQLite under the hood.<br>
|
|
<code>docker compose up</code>, and you have an inspection endpoint and a live feed in under 30 seconds.
|
|
</p>
|
|
<div class="hero-cta" data-animate="fade-up" data-delay="240">
|
|
<a href="https://github.com/elfoundation/hatch" class="btn btn-primary">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
|
View on GitHub
|
|
</a>
|
|
<a href="https://github.com/elfoundation/hatch#quick-start" class="btn btn-secondary">
|
|
Quick Start →
|
|
</a>
|
|
</div>
|
|
<div class="hero-terminal" data-animate="fade-up" data-delay="320">
|
|
<div class="terminal-bar">
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-dot"></span>
|
|
<span class="terminal-title">terminal</span>
|
|
</div>
|
|
<pre><code><span class="t-prompt">$</span> <span class="t-cmd">docker compose up -d</span>
|
|
<span class="t-output">✓ hatch started on :8080</span>
|
|
<span class="t-prompt">$</span> <span class="t-cmd">curl -X POST https://your-bin.hatch.surf/test -d '{"hello":"world"}'</span>
|
|
<span class="t-output">✓ captured — view at https://your-bin.hatch.surf/inspect</span></code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="features">
|
|
<div class="container">
|
|
<h2 data-animate="fade-up">Three things, and nothing else</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature" data-animate="fade-up" data-delay="80">
|
|
<div class="feature-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
|
</div>
|
|
<h3>Capture</h3>
|
|
<p>Method, path, headers, query, body. Persists across restarts because the storage is SQLite on disk, not a hosted queue.</p>
|
|
</div>
|
|
<div class="feature" data-animate="fade-up" data-delay="160">
|
|
<div class="feature-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
|
</div>
|
|
<h3>Inspect</h3>
|
|
<p>A live SSE feed of incoming requests. Click any captured request to see the headers, the body, the timing.</p>
|
|
</div>
|
|
<div class="feature" data-animate="fade-up" data-delay="240">
|
|
<div class="feature-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
|
</div>
|
|
<h3>Mock</h3>
|
|
<p>Return a 200, a 500, or a custom JSON payload. For testing your own retry, backoff, and error-handling logic.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why -->
|
|
<section class="why">
|
|
<div class="container">
|
|
<h2 data-animate="fade-up">Why a single binary, not a SaaS</h2>
|
|
<div class="why-grid">
|
|
<div class="why-item" data-animate="fade-up" data-delay="80">
|
|
<div class="why-number">01</div>
|
|
<div class="why-content">
|
|
<h3>Compliance and privacy</h3>
|
|
<p>Some teams cannot legally send webhook payloads to a hosted SaaS. Hatch keeps the data on your own network.</p>
|
|
</div>
|
|
</div>
|
|
<div class="why-item" data-animate="fade-up" data-delay="160">
|
|
<div class="why-number">02</div>
|
|
<div class="why-content">
|
|
<h3>Cost</h3>
|
|
<p>A hosted inspector charges per request, per seat, or per retention day. Hatch is one Go binary on a $5 VPS. There is no per-request fee because there is no one to charge it.</p>
|
|
</div>
|
|
</div>
|
|
<div class="why-item" data-animate="fade-up" data-delay="240">
|
|
<div class="why-number">03</div>
|
|
<div class="why-content">
|
|
<h3>Speed of setup</h3>
|
|
<p><code>docker compose up</code> is faster than signing up for a SaaS, verifying your email, configuring your first bin, and pasting the URL into your webhook config.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="final-cta" data-animate="fade-up">
|
|
<div class="container">
|
|
<h2>Start inspecting in 30 seconds</h2>
|
|
<p>One binary. Your data stays yours.</p>
|
|
<a href="https://github.com/elfoundation/hatch" class="btn btn-primary btn-lg">
|
|
Get Hatch →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<span class="footer-logo">⬡ Hatch</span>
|
|
<p>© 2026 El Foundation. <a href="https://github.com/elfoundation/hatch">Hatch</a> is released under the <a href="https://github.com/elfoundation/hatch/blob/main/LICENSE">MIT License</a>.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs@4/dist/bundles/anime.umd.min.js"></script>
|
|
<script src="/main.js" defer></script>
|
|
</body>
|
|
</html>
|