~/portrun · zsh

{elapsedSec}s

{visible.map((line, i) => (

{line.kind === 'prompt' && $ } {line.kind === 'done' && ◉ } {line.text}

))}

); } // ── Abstract graphic (alt hero layout) ────────────────────────────────────── // A wireframe graph of nodes/edges deploying — pure geometry. function NodeGraph({ accent }) { const [t, setT] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Layout: source (left) → orchestrator (mid) → 3 provider groups (right) // Each provider group contains 2 server nodes so the graph reads as a real fleet. const SRC = { x: 70, y: 220, label: 'git · main' }; const ORC = { x: 260, y: 220, label: 'portrun' }; const providers = [ { id: 'do', x: 500, y: 96, name: 'cluster a', region: 'us-east', servers: [ { id: 'do-1', label: 'api-1', y: 70, status: 'ok' }, { id: 'do-2', label: 'api-2', y: 122, status: 'ok' }, ], }, { id: 'hz', x: 500, y: 220, name: 'cluster b', region: 'eu-central', servers: [ { id: 'hz-1', label: 'worker', y: 194, status: 'deploy' }, { id: 'hz-2', label: 'cache', y: 246, status: 'ok' }, ], }, { id: 'vl', x: 500, y: 344, name: 'cluster c', region: 'ap-south', servers: [ { id: 'vl-1', label: 'edge-1', y: 318, status: 'ok' }, { id: 'vl-2', label: 'edge-2', y: 370, status: 'ok' }, ], }, ]; // All edges: src→orc, orc→each provider group const edges = [ { from: SRC, to: ORC, phase: 0 }, ...providers.map((p, i) => ({ from: ORC, to: { x: p.x - 80, y: p.y }, phase: i * 0.33, })), ]; const dot = (x, y, r, color, opacity = 1) => ( ); // Sparkline generator — seeded by server id so each is stable but different const sparkPath = (seed, w = 48, h = 12) => { const pts = []; for (let i = 0; i <= 12; i++) { const n = Math.sin(seed * 0.7 + i * 0.6 + t * 1.5) * 0.5 + Math.sin(seed * 1.3 + i * 1.1) * 0.3; pts.push([i / 12 * w, h / 2 - n * h * 0.4]); } return pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' '); }; return (

infrastructure deployments logs costs

fleet · 6 nodes · ● live

); } // ── Signup form ───────────────────────────────────────────────────────────── const ROLES = ['Engineer', 'Lead / Staff', 'CTO / VPE', 'Founder', 'DevOps / SRE', 'Other']; const LOOPS_FORM_URL = 'https://app.loops.so/api/newsletter-form/cmoe4inz50z3b0ixj7wdg4jgx'; function SignupForm({ accent, compact }) { const [step, setStep] = React.useState(0); // 0 = email, 1 = details, 2 = done const [f, setF] = React.useState({ email: '', role: '', useCase: '', }); const [touched, setTouched] = React.useState({}); const [submitting, setSubmitting] = React.useState(false); const [submitErr, setSubmitErr] = React.useState(''); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email); const step1Valid = f.role && f.useCase.trim().length >= 4; const advance = (e) => { e.preventDefault(); setTouched({ ...touched, email: true }); if (emailValid) setStep(1); }; const submit = async (e) => { e.preventDefault(); setTouched({ ...touched, role: true, useCase: true }); if (!step1Valid || submitting) return; setSubmitting(true); setSubmitErr(''); try { const body = new URLSearchParams(); body.append('email', f.email); body.append('userGroup', f.role); body.append('useCase', f.useCase); const res = await fetch(LOOPS_FORM_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: body.toString(), }); if (!res.ok) { if (res.status === 429) throw new Error('too many requests · try again in a minute'); throw new Error('signup failed · please retry'); } setStep(2); } catch (err) { setSubmitErr(err.message || 'something went wrong'); } finally { setSubmitting(false); } }; if (step === 2) { return (

◉ confirmed · {new Date().toISOString().slice(0,19).replace('T',' ')}

You're on the list.

We'll email {f.email} when early access opens. No marketing, no spam — just a heads-up and your API key.

); } return (

$ portrun waitlist step {step + 1}/2

{step === 0 && ( )} {step === 1 && (

role

{ROLES.map((r) => ( ))}

use case — what would you automate first?

set('useCase', e.target.value)}
                        onBlur={() => setTouched({ ...touched, useCase: true })}
                        data-invalid={touched.useCase && f.useCase.trim().length < 4 ? '1' : '0'} />
            </label>
          </div>
          {submitErr && <div className="field-err" style={{ marginTop: 12 }}>{submitErr}</div>}
          <div className="signup-actions">
            <button type="button" className="btn-ghost" onClick={() => setStep(0)} disabled={submitting}>
              ← back
            </button>
            <button type="submit" className="btn-primary"
                    style={{ background: accent, color: '#0a0a0a' }}
                    disabled={!step1Valid || submitting}>
              {submitting ? 'submitting…' : 'join waitlist →'}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}

// ── Feature block ───────────────────────────────────────────────────────────

const FEATURES = [
  {
    id: '01',
    title: 'One console for every server',
    body: 'Wire up your servers once. PortRun gives you a single, consistent place to provision, deploy, and watch them — no console-hopping, no shell scripts pinned to a wiki.',
    ascii: [
      '┌─ fleet ────────────────────────────────┐',
      '│ cluster-a   cluster-b   cluster-c │',
      '│    ◉           ◉            ○     │',
      '└────────────────────────────────┘',
    ],
  },
  {
    id: '02',
    title: 'Deploy from main',
    body: 'Push to main, PortRun picks up the build, runs your checks, and rolls out to every region in order. Instant rollback if health drifts.',
    ascii: [
      'main ─●─●─●─●─●─▶ prod',
      '         │',
      '         └─▶ staging (auto)',
    ],
  },
  {
    id: '03',
    title: 'Servers that heal themselves',
    body: 'Drift detection, reboot-on-crash, image refresh on CVE. Your 2 a.m. pager stays quiet.',
    ascii: [
      '[✓] api-1   healthy  uptime 14d',
      '[✓] api-2   healthy  uptime 14d',
      '[↻] worker  healing  (auto)   ',
    ],
  },
  {
    id: '04',
    title: 'Cost, decoded',
    body: 'Per-service spend, idle instance flags, and right-sizing suggestions generated from actual load — not vendor pricing pages.',
    ascii: [
      'api      $142 ██████▌',
      'worker    $48 ██▏    ',
      'db       $210 █████████',
    ],
  },
  {
    id: '05',
    title: 'Observability, built in',
    body: 'Metrics, logs, and traces wired up the moment a service comes online. OpenTelemetry out of the box.',
    ascii: [
      'p50  32ms  ▁▂▂▁▂▃▂▁▂',
      'p95  118ms ▂▃▅▃▂▄▆▃▂',
      'err  0.04% ▁▁▁▁▂▁▁▁▁',
    ],
  },
  {
    id: '06',
    title: 'GitOps, without the ceremony',
    body: 'Infra lives beside your code. Review infra changes in PRs. Merge to apply. Revert to roll back. That\u2019s it.',
    ascii: [
      'PR #412  infra/api.yaml',
      '+ replicas: 4',
      '- replicas: 2',
    ],
  },
];

function FeatureCard({ f, accent }) {
  return (
    <article className="feat">
      <div className="feat-head">
        <span className="feat-id">{f.id}</span>
        <span className="feat-rule" />
      </div>
      <h3 className="feat-title">{f.title}</h3>
      <p className="feat-body">{f.body}</p>
      <pre className="feat-ascii" style={{ color: 'rgba(10,10,10,0.55)' }}>
        {f.ascii.join('\n')}
      </pre>
    </article>
  );
}

function FeaturesSection({ accent }) {
  return (
    <section className="features" id="features">
      <div className="sect-head">
        <span className="sect-tag">§ capabilities</span>
        <h2 className="sect-h">
          Infrastructure that acts like <em>code</em>, behaves like <em>a product</em>.
        </h2>
      </div>
      <div className="feat-grid">
        {FEATURES.map((f) => <FeatureCard key={f.id} f={f} accent={accent} />)}
      </div>
    </section>
  );
}

Object.assign(window, {
  TerminalDemo, NodeGraph, SignupForm, FeaturesSection,
});