designpaca/apps/site/public/work/pulsegate/index.html
Yun Chan e09d4efb1c
Some checks failed
ci / build (push) Has been cancelled
feat: strengthen design skill and refresh all showcases
2026-09-12 18:16:33 +09:00

300 lines
14 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pulsegate · Edge Monitoring Workflow</title>
<meta
name="description"
content="An illustrative workflow for checking an endpoint from distributed edge locations. It does not create probes or provide a live service."
/>
<meta property="og:title" content="Pulsegate · Edge Monitoring Workflow" />
<meta
property="og:description"
content="An illustrative edge-monitoring flow with endpoints, locations, and reporting fields."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0B0E12" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230B0E12'/%3E%3Cpath d='M6 17h6l3-8 4 14 3-6h4' fill='none' stroke='%236CA3EE' stroke-width='2'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">pulsegate<span class="wordmark-dot">.</span></a>
<nav class="nav" aria-label="Sections">
<a href="#wiring">Wiring</a>
<a href="#numbers">Numbers</a>
<a href="#pricing">Pricing</a>
</nav>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<div class="hero-text">
<h1 id="hero-h" class="reveal">
Understand an edge<br />check at a glance
</h1>
<p class="lead reveal" style="--delay: 80ms">
This page illustrates how one endpoint can be checked from several
edge locations and reported with the same fields. Locations,
timings, plans, and results are examples; no probe runs from this page.
</p>
<dl class="probe-proof reveal" style="--delay: 110ms">
<div>
<dt>example endpoint</dt>
<dd><code>GET /health</code></dd>
</div>
<div>
<dt>example origin</dt>
<dd>Seoul</dd>
</div>
<div>
<dt>example cadence</dt>
<dd>10 s · 28 locations</dd>
</div>
</dl>
<div class="hero-actions reveal" style="--delay: 140ms">
<a class="btn btn-primary" href="#pricing">View example plans</a>
<a class="link-quiet" href="#wiring">See the check flow</a>
</div>
<div class="workflow-command">
<div class="command reveal" style="--delay: 200ms">
<span class="command-prompt" aria-hidden="true">$</span>
<code>GET /health → inspect the response</code>
</div>
<p class="hero-note reveal" style="--delay: 240ms">
Illustrative workflow only — this page does not create an account,
run a check, or collect a destination URL.
</p>
</div>
</div>
<figure class="instrument reveal" style="--delay: 160ms">
<figcaption class="instrument-head">
<span>ILLUSTRATIVE LATENCY FRAME · P99 · 24H</span>
<span>example 10s interval</span>
</figcaption>
<svg
viewBox="0 0 560 264"
role="img"
aria-label="Illustrative 24-hour p99 latency chart with example locations and timings; it is not live monitoring data."
>
<g class="chart-grid">
<line x1="0" y1="8" x2="560" y2="8" />
<line x1="0" y1="70" x2="560" y2="70" />
<line x1="0" y1="132" x2="560" y2="132" />
<line x1="0" y1="194" x2="560" y2="194" />
<line x1="0" y1="256" x2="560" y2="256" class="chart-axis" />
<line x1="70" y1="0" x2="70" y2="264" />
<line x1="140" y1="0" x2="140" y2="264" />
<line x1="210" y1="0" x2="210" y2="264" />
<line x1="280" y1="0" x2="280" y2="264" />
<line x1="350" y1="0" x2="350" y2="264" />
<line x1="420" y1="0" x2="420" y2="264" />
<line x1="490" y1="0" x2="490" y2="264" />
</g>
<polyline
class="series series-faint"
points="0,96 35,94 70,97 105,92 140,95 175,93 205,88 210,74 215,60 220,74 225,90 260,95 280,93 315,96 350,94 385,97 420,93 455,96 490,94 525,97 560,95"
/>
<polyline
class="series series-muted"
points="0,224 35,222 70,225 105,221 140,224 175,223 210,226 245,222 280,224 315,223 350,226 385,222 420,225 455,223 490,226 525,223 560,225"
/>
<polyline
class="series series-accent"
points="0,243 35,242 70,244 105,242 140,243 175,244 210,242 245,243 280,244 315,242 350,243 385,244 420,243 455,242 490,244 525,243 560,243"
/>
</svg>
<div class="instrument-rows" role="group" aria-label="Illustrative location readings, p99 over one example frame">
<div><span>ICN-01 · Seoul</span><span class="num">14.2 ms</span></div>
<div><span>NRT-02 · Tokyo</span><span class="num">28.6 ms</span></div>
<div><span>SIN-01 · Singapore</span><span class="num">34.0 ms</span></div>
<div><span>SJC-04 · San Jose</span><span class="num">88.4 ms</span></div>
<div><span>LHR-02 · London</span><span class="num">126.8 ms</span></div>
<div><span>FRA-01 · Frankfurt</span><span class="num">142.1 ms</span></div>
</div>
</figure>
</div>
</section>
<section id="wiring" class="section" aria-labelledby="wiring-h">
<div class="wrap">
<h2 id="wiring-h" class="reveal">How an edge check is mapped</h2>
<p class="lead reveal" style="--delay: 80ms">
The diagram separates an endpoint, distributed checking locations,
and the metrics returned to a monitoring system. It is a conceptual
route, not a map of operating facilities.
</p>
</div>
<div class="wrap wiring-diagram reveal" style="--delay: 120ms">
<svg viewBox="0 0 1120 220" role="img" aria-label="Illustrative workflow diagram: locations check an endpoint, an engine evaluates responses, and fields flow to a monitoring system.">
<path
class="trace"
d="M 40 60 H 300 M 40 110 H 300 M 40 160 H 300 M 300 110 H 470 M 650 110 H 820 M 820 60 V 160 M 820 60 H 1010 M 820 160 H 1010"
/>
<g class="station">
<rect x="40" y="44" width="14" height="14" />
<rect x="40" y="94" width="14" height="14" />
<rect x="40" y="144" width="14" height="14" />
<text x="66" y="55">ICN · NRT · SIN …</text>
<text x="66" y="105">FRA · LHR · AMS …</text>
<text x="66" y="155">SJC · IAD · ORD …</text>
</g>
<g class="station">
<rect x="470" y="88" width="180" height="44" />
<text x="478" y="106">assertion engine</text>
<text x="478" y="124" class="mono-note">http · grpc · tcp · dns</text>
</g>
<g class="station">
<rect x="1010" y="46" width="70" height="26" />
<rect x="1010" y="146" width="70" height="26" />
<text x="1006" y="38" text-anchor="end">Prometheus</text>
<text x="1006" y="192" text-anchor="end">OpenTelemetry</text>
</g>
<g class="flow-label">
<text x="310" y="100">every 10 s</text>
<text x="660" y="100">p50 · p99 · jitter</text>
</g>
</svg>
</div>
<div class="wrap wiring-notes">
<div class="wiring-note reveal">
<h3>Check from the edge</h3>
<p>
A useful check identifies where it ran and which part of the
response was measured, so results can be compared fairly.
</p>
</div>
<div class="wiring-note reveal" style="--delay: 80ms">
<h3>Check the response, not only reachability</h3>
<p>
A useful workflow can compare response content, status, certificate
expiry, and timing instead of treating a reachable address as success.
</p>
</div>
<div class="wiring-note reveal" style="--delay: 160ms">
<h3>Keep the reporting fields consistent</h3>
<p>
The example keeps endpoint, location, time, and response fields
together so they can be handed to an existing monitoring workflow.
</p>
</div>
</div>
</section>
<section id="numbers" class="section band" aria-labelledby="numbers-h">
<div class="wrap">
<h2 id="numbers-h" class="reveal">One example frame, many locations</h2>
<p class="lead reveal" style="--delay: 80ms">
This table shows how an endpoint, DNS, TLS, response time, and a
percentile can be read together. Its values and locations are illustrative.
</p>
<div class="table-wrap reveal" style="--delay: 120ms">
<table>
<caption class="sr-only">
Illustrative location readings: DNS, TLS, TTFB, and p99 over one example frame
</caption>
<thead>
<tr>
<th scope="col">POP</th>
<th scope="col">City</th>
<th scope="col" class="num">DNS</th>
<th scope="col" class="num">TLS</th>
<th scope="col" class="num">TTFB</th>
<th scope="col" class="num">p99 / 24h</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">ICN-01</th><td>Seoul</td><td class="num">1.8</td><td class="num">6.4</td><td class="num">14.2</td><td class="num">15.9</td></tr>
<tr><th scope="row">NRT-02</th><td>Tokyo</td><td class="num">2.1</td><td class="num">7.1</td><td class="num">28.6</td><td class="num">31.2</td></tr>
<tr><th scope="row">SIN-01</th><td>Singapore</td><td class="num">2.4</td><td class="num">8.2</td><td class="num">34.0</td><td class="num">37.5</td></tr>
<tr><th scope="row">SJC-04</th><td>San Jose</td><td class="num">3.0</td><td class="num">9.6</td><td class="num">88.4</td><td class="num">94.7</td></tr>
<tr><th scope="row">LHR-02</th><td>London</td><td class="num">4.0</td><td class="num">11.2</td><td class="num">126.8</td><td class="num">133.0</td></tr>
<tr><th scope="row">FRA-01</th><td>Frankfurt</td><td class="num">4.2</td><td class="num">11.8</td><td class="num">142.1</td><td class="num">151.8</td></tr>
<tr class="row-more"><td colspan="6">…22 more illustrative locations in the same example frame</td></tr>
</tbody>
</table>
</div>
<p class="measure-note reveal" style="--delay: 160ms">
Illustrative 24-hour frame · 10 s example interval · milliseconds shown
for DNS, TLS, TTFB, and p99.
</p>
</div>
</section>
<section id="pricing" class="section" aria-labelledby="pricing-h">
<div class="wrap pricing-grid">
<div class="pricing-text">
<h2 id="pricing-h" class="reveal">Example plan structure</h2>
<p class="lead reveal" style="--delay: 80ms">
These rows show how interval, retention, and export options can be
compared. They are not offers, prices, or an account signup flow.
</p>
</div>
<div class="pricing-rows reveal" style="--delay: 120ms">
<div class="price-row">
<div>
<h3>Example Free</h3>
<p>3 probes · 60 s interval · 7-day retention</p>
</div>
<div class="price-val">
<span>Example $0</span>
<a class="btn btn-primary" href="#pricing">View the example</a>
</div>
</div>
<div class="price-row">
<div>
<h3>Example Pro</h3>
<p>Unlimited probes · 10 s interval · 13-month retention · OTel export</p>
</div>
<div class="price-val">
<span>Example $0.40 <em>per probe-month</em></span>
<a class="link-quiet" href="#pricing">Example only</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<p>pulsegate — illustrative edge-monitoring workflow</p>
<p class="foot-meta">no live probes, accounts, prices, or operating locations</p>
</div>
</footer>
<script>
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io.unobserve(e.target);
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
</script>
</body>
</html>