<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EnvVault — Encrypted Environment Variables. No Server Required.</title>
<meta name="description" content="Replace plaintext .env files with AES-256-GCM encrypted vault files. No cloud, no infrastructure, just a CLI and a password. Built in Rust.">
<meta name="theme-color" content="#050506">
<meta property="og:title" content="EnvVault — Encrypted Environment Variables">
<meta property="og:description" content="Local-first encrypted environment variable manager. Zero infrastructure, zero unsafe code.">
<meta property="og:type" content="website">
<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=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23d4a24c'/><text x='16' y='22' text-anchor='middle' fill='%23050506' font-family='sans-serif' font-weight='900' font-size='14'>EV</text></svg>">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="noise" aria-hidden="true"></div>
<!-- ========== NAV ========== -->
<nav class="nav">
<div class="nav__in">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EV</span>
EnvVault
</a>
<ul class="nav__links" id="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#how">How It Works</a></li>
<li><a href="#compare">Compare</a></li>
<li><a href="#install">Install</a></li>
<li><a href="#guide">Guide</a></li>
<li><a href="roadmap.html">Roadmap</a></li>
<li class="nav__mobile-only"><a href="https://github.com/whynaidu/envvault" target="_blank" rel="noopener">GitHub</a></li>
<li class="nav__mobile-only"><a href="#install" class="nav__mobile-cta">Get Started</a></li>
</ul>
<a href="https://github.com/whynaidu/envvault" class="nav__gh" target="_blank" rel="noopener">
<svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
GitHub
</a>
<a href="#install" class="nav__cta">Get Started</a>
<button class="nav__ham" id="nav-ham" aria-label="Menu" aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</nav>
<!-- ========== HERO ========== -->
<section class="hero">
<div class="orbs" aria-hidden="true">
<div class="orb orb--gold"></div>
<div class="orb orb--cyan"></div>
<div class="orb orb--violet"></div>
</div>
<div class="wrap hero__layout">
<div>
<div class="hero__pill" data-reveal>
<span class="hero__pill-dot"></span>
v0.4.0 Released — Cross-platform builds
</div>
<h1 class="hero__h1" data-reveal="80">
Your secrets<br>deserve a <span class="gt">vault.</span>
</h1>
<p class="hero__sub" data-reveal="160">
Replace plaintext <strong>.env</strong> files with AES-256-GCM encrypted vault files. No cloud, no infrastructure, no vendor lock-in — just a single Rust binary and a password.
</p>
<div class="hero__actions" data-reveal="240">
<a href="#install" class="btn btn--gold btn--lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Install EnvVault
</a>
<a href="https://github.com/whynaidu/envvault" class="btn btn--outline btn--lg" target="_blank" rel="noopener">
View on GitHub
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="hero__term-glow" aria-hidden="true"></div>
<div class="term">
<div class="term__bar">
<div class="term__dots">
<span class="term__dot term__dot--r"></span>
<span class="term__dot term__dot--y"></span>
<span class="term__dot term__dot--g"></span>
</div>
<span class="term__title">envvault — zsh</span>
</div>
<div class="term__body" id="hero-term"></div>
</div>
</div>
</div>
</section>
<!-- ========== MARQUEE ========== -->
<div class="marquee" aria-hidden="true">
<div class="marquee__track">
<span class="marquee__item"><span class="dot"></span>AES-256-GCM</span>
<span class="marquee__item"><span class="dot"></span>Argon2id KDF</span>
<span class="marquee__item"><span class="dot"></span>HMAC-SHA256</span>
<span class="marquee__item"><span class="dot"></span>HKDF-SHA256</span>
<span class="marquee__item"><span class="dot"></span>Zero Unsafe Code</span>
<span class="marquee__item"><span class="dot"></span>Built in Rust</span>
<span class="marquee__item"><span class="dot"></span>159 Tests</span>
<span class="marquee__item"><span class="dot"></span>MIT / Apache-2.0</span>
<span class="marquee__item"><span class="dot"></span>Works Offline</span>
<span class="marquee__item"><span class="dot"></span>19 Commands</span>
<span class="marquee__item"><span class="dot"></span>5 Platforms</span>
<span class="marquee__item"><span class="dot"></span>3 Auth Methods</span>
<!-- Duplicate for seamless loop -->
<span class="marquee__item"><span class="dot"></span>AES-256-GCM</span>
<span class="marquee__item"><span class="dot"></span>Argon2id KDF</span>
<span class="marquee__item"><span class="dot"></span>HMAC-SHA256</span>
<span class="marquee__item"><span class="dot"></span>HKDF-SHA256</span>
<span class="marquee__item"><span class="dot"></span>Zero Unsafe Code</span>
<span class="marquee__item"><span class="dot"></span>Built in Rust</span>
<span class="marquee__item"><span class="dot"></span>159 Tests</span>
<span class="marquee__item"><span class="dot"></span>MIT / Apache-2.0</span>
<span class="marquee__item"><span class="dot"></span>Works Offline</span>
<span class="marquee__item"><span class="dot"></span>19 Commands</span>
<span class="marquee__item"><span class="dot"></span>5 Platforms</span>
<span class="marquee__item"><span class="dot"></span>3 Auth Methods</span>
</div>
</div>
<!-- ========== THE PROBLEM ========== -->
<section class="problem">
<div class="wrap">
<div class="problem__head">
<div class="label" data-reveal>The Problem</div>
<h2 class="h2" data-reveal="80">Your secrets are <span style="color:var(--red)">exposed</span>.</h2>
<p class="subtitle subtitle--center" data-reveal="160">Plaintext .env files are the weakest link in every codebase. And AI tools are making it worse.</p>
</div>
<div class="problem__stats">
<div class="stat-card glass" data-reveal>
<div class="stat-card__num stat-card__num--danger" data-count="23.8" data-suffix="M" data-decimal="true">0</div>
<div class="stat-card__text">
Secrets leaked on public GitHub in 2024. 70% remain active today.
<span class="stat-card__src">— GitGuardian 2024 Report</span>
</div>
</div>
<div class="stat-card glass" data-reveal="120">
<div class="stat-card__num stat-card__num--warn" data-count="85" data-suffix="%">0</div>
<div class="stat-card__text">
Of organizations have plaintext secrets committed in their repositories.
<span class="stat-card__src">— 2025 State of Cloud Security</span>
</div>
</div>
<div class="stat-card glass" data-reveal="240">
<div class="stat-card__num stat-card__num--danger" data-count="40" data-prefix="+" data-suffix="%">0</div>
<div class="stat-card__text">
Increase in leak rates from AI coding tools. Agents run <code style="color:var(--cyan)">cat .env</code> freely.
<span class="stat-card__src">— AI Security Research, 2025</span>
</div>
</div>
</div>
</div>
</section>
<!-- ========== BEFORE / AFTER ========== -->
<section class="transform" id="transform">
<div class="orbs" aria-hidden="true">
<div class="orb orb--gold" style="top:-30%;left:30%;width:400px;height:400px;opacity:0.5"></div>
</div>
<div class="wrap">
<div class="transform__head">
<div class="label" data-reveal>The Fix</div>
<h2 class="h2" data-reveal="80">One command. <span class="gt--warm">Total encryption.</span></h2>
<p class="subtitle" data-reveal="160">Your secret values become encrypted at rest. Key names stay readable for easy management.</p>
</div>
<div class="transform__grid" data-reveal="200">
<div class="code-panel">
<div class="code-panel__top">
<span class="code-panel__name">.env</span>
<span class="code-panel__tag code-panel__tag--danger">Exposed</span>
</div>
<div class="code-panel__body">
<span class="ck">DATABASE_URL</span><span class="ceq">=</span><span class="cv">postgres://admin:s3cret@db:5432/app</span><br>
<span class="ck">API_KEY</span><span class="ceq">=</span><span class="cv">sk-live-a1b2c3d4e5f6g7h8i9j0</span><br>
<span class="ck">JWT_SECRET</span><span class="ceq">=</span><span class="cv">my-super-secret-jwt-key-2024</span><br>
<span class="ck">STRIPE_KEY</span><span class="ceq">=</span><span class="cv">sk_test_EXAMPLE_DO_NOT_USE_1234</span><br>
<span class="ck">AWS_SECRET</span><span class="ceq">=</span><span class="cv">wJalrXUtnFEMI/K7MDENG/bPxRfi</span>
</div>
</div>
<div class="transform__arrow">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</div>
<div class="code-panel">
<div class="code-panel__top">
<span class="code-panel__name">dev.vault</span>
<span class="code-panel__tag code-panel__tag--safe">Encrypted</span>
</div>
<div class="code-panel__body">
<span class="ck">DATABASE_URL</span><span class="ceq">=</span><span class="ce">ENC[AES256:p3x8Kv...mDf2w=]</span><br>
<span class="ck">API_KEY</span><span class="ceq">=</span><span class="ce">ENC[AES256:mN7vRq...kQ9sE=]</span><br>
<span class="ck">JWT_SECRET</span><span class="ceq">=</span><span class="ce">ENC[AES256:hB4tYn...wL6nA=]</span><br>
<span class="ck">STRIPE_KEY</span><span class="ceq">=</span><span class="ce">ENC[AES256:jR2mXp...cV8bK=]</span><br>
<span class="ck">AWS_SECRET</span><span class="ceq">=</span><span class="ce">ENC[AES256:qW5eZs...yT3gN=]</span>
</div>
</div>
</div>
</div>
</section>
<!-- ========== BENTO FEATURES ========== -->
<section class="features" id="features">
<div class="wrap">
<div class="features__head">
<div class="label" data-reveal>Features</div>
<h2 class="h2" data-reveal="80">Everything you need.<br><span class="gt">Nothing you don't.</span></h2>
<p class="subtitle" data-reveal="160">A complete secrets lifecycle in a single binary. No accounts, no servers, no subscriptions.</p>
</div>
<div class="bento">
<!-- LARGE: Encryption -->
<div class="glass glass--glow bento__item bento__item--tall" data-reveal>
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
</div>
<div class="bento__title">AES-256-GCM Encryption</div>
<div class="bento__desc">Each secret encrypted individually with a unique key derived via HKDF-SHA256 and a random 12-byte nonce. Military-grade authenticated encryption.</div>
<div class="bento__code">
<span style="color:var(--text-3)">// Per-secret key derivation</span><br>
master_key = <span style="color:var(--gold)">Argon2id</span>(password, salt)<br>
secret_key = <span style="color:var(--cyan)">HKDF</span>(master_key, name)<br>
ciphertext = <span style="color:var(--green)">AES-GCM</span>(secret_key, value)
</div>
</div>
<!-- Auth Methods -->
<div class="glass glass--glow bento__item" data-reveal="100">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
</div>
<div class="bento__title">Triple Auth Methods</div>
<div class="bento__desc">Password, keyfile two-factor, or OS keyring auto-unlock. Use one or combine them for layered security.</div>
</div>
<!-- Zero Infra -->
<div class="glass glass--glow bento__item" data-reveal="200">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12H2"/><path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/></svg>
</div>
<div class="bento__title">Zero Infrastructure</div>
<div class="bento__desc">No server, no cloud, no Docker. A single binary that works fully offline. Forever.</div>
</div>
<!-- WIDE: Per-environment -->
<div class="glass glass--glow bento__item bento__item--wide" data-reveal="100">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<div class="bento__title">Per-Environment Vaults</div>
<div class="bento__desc">Separate encrypted vault files for dev, staging, and prod. Clone environments, diff between them, and manage each independently with its own password.</div>
<div class="bento__code">
<span style="color:var(--gold)">$</span> envvault -e staging set API_KEY<br>
<span style="color:var(--gold)">$</span> envvault diff staging <span style="color:var(--text-3)"> # compare dev vs staging</span><br>
<span style="color:var(--gold)">$</span> envvault env clone prod <span style="color:var(--text-3)"> # clone to new environment</span>
</div>
</div>
<!-- Audit -->
<div class="glass glass--glow bento__item" data-reveal>
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<div class="bento__title">SQLite Audit Trail</div>
<div class="bento__desc">Every vault mutation logged with timestamps. Query with <code style="color:var(--cyan)">--last</code> or <code style="color:var(--cyan)">--since</code> for compliance.</div>
</div>
<!-- Key Rotation -->
<div class="glass glass--glow bento__item" data-reveal="100">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
</div>
<div class="bento__title">Key Rotation</div>
<div class="bento__desc">Rotate your master password atomically. All secrets re-encrypted in a single operation.</div>
</div>
<!-- Import/Export -->
<div class="glass glass--glow bento__item" data-reveal="200">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
</div>
<div class="bento__title">Import & Export</div>
<div class="bento__desc">Import from .env or JSON. Export to any format. Migrate in seconds. No lock-in.</div>
</div>
<!-- Diff -->
<div class="glass glass--glow bento__item" data-reveal>
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 22v-6"/><path d="M21 3l-9 9"/><path d="M3 3l9 9"/></svg>
</div>
<div class="bento__title">Diff & Compare</div>
<div class="bento__desc">Side-by-side comparison between environments. See what's added, removed, or changed.</div>
</div>
<!-- Cross Platform -->
<div class="glass glass--glow bento__item bento__item--wide" data-reveal="100">
<div class="bento__icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<div class="bento__title">Cross-Platform</div>
<div class="bento__desc">Linux, macOS, Windows. x86_64 and ARM64. Pre-built binaries for every major platform.</div>
</div>
</div>
</div>
</section>
<!-- ========== HOW IT WORKS ========== -->
<section class="how" id="how">
<div class="wrap">
<div style="text-align:center">
<div class="label" data-reveal>How It Works</div>
<h2 class="h2" data-reveal="80">Productive in <span class="gt">60 seconds</span>.</h2>
<p class="subtitle subtitle--center" data-reveal="160">Four commands cover your entire workflow.</p>
</div>
<div class="how__grid">
<div class="how-step" data-reveal>
<div class="how-step__num">1</div>
<span class="how-step__cmd">envvault init</span>
<div class="how-step__title">Initialize</div>
<p class="how-step__desc">Creates an encrypted vault. Auto-imports .env files if found.</p>
</div>
<div class="how-step" data-reveal="120">
<div class="how-step__num">2</div>
<span class="how-step__cmd">envvault set KEY</span>
<div class="how-step__title">Store</div>
<p class="how-step__desc">Interactive prompt hides input. Each secret gets a unique encryption key.</p>
</div>
<div class="how-step" data-reveal="240">
<div class="how-step__num">3</div>
<span class="how-step__cmd">envvault get KEY</span>
<div class="how-step__title">Retrieve</div>
<p class="how-step__desc">Decrypt and display. HMAC integrity check runs automatically.</p>
</div>
<div class="how-step" data-reveal="360">
<div class="how-step__num">4</div>
<span class="how-step__cmd">envvault run -- cmd</span>
<div class="how-step__title">Inject & Run</div>
<p class="how-step__desc">Inject all secrets as env vars into any command. Never touch disk.</p>
</div>
</div>
</div>
</section>
<!-- ========== COMPARISON ========== -->
<section class="compare" id="compare">
<div class="wrap">
<div class="compare__head">
<div class="label" data-reveal>Comparison</div>
<h2 class="h2" data-reveal="80">More than file tools.<br>Simpler than <span class="gt">platforms</span>.</h2>
<p class="subtitle" data-reveal="160">The security of Vault. The simplicity of dotenv. The price of open source.</p>
</div>
<div class="table-wrap" data-reveal="200">
<table>
<thead>
<tr>
<th>Feature</th>
<th>.env</th>
<th>SOPS</th>
<th>dotenvx</th>
<th>Infisical</th>
<th>Doppler</th>
<th>EnvVault</th>
</tr>
</thead>
<tbody>
<tr>
<td>Encryption at rest</td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Works fully offline</td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-mid">Partial</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Audit trail</td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Multiple auth</td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-mid">GPG/KMS</span></td>
<td><span class="ck-mid">Keypair</span></td>
<td><span class="ck-mid">SSO</span></td>
<td><span class="ck-mid">SSO</span></td>
<td><span class="ck-yes">3 methods</span></td>
</tr>
<tr>
<td>Per-env vaults</td>
<td><span class="ck-mid">Manual</span></td>
<td><span class="ck-mid">Manual</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Key rotation</td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-mid">Manual</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Diff environments</td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
<td><span class="ck-yes">✓</span></td>
</tr>
<tr>
<td>Infrastructure</td>
<td>None</td>
<td><span class="ck-mid">KMS opt.</span></td>
<td>None</td>
<td>Server</td>
<td>Cloud</td>
<td><strong style="color:var(--gold)">None</strong></td>
</tr>
<tr>
<td>Price</td>
<td>Free</td>
<td>Free</td>
<td>Free</td>
<td>$72/mo</td>
<td>$230/mo</td>
<td><strong style="color:var(--gold)">Free forever</strong></td>
</tr>
<tr>
<td>Open source</td>
<td><span class="ck-no">N/A</span></td>
<td><span class="ck-yes">MPL</span></td>
<td><span class="ck-yes">BSD</span></td>
<td><span class="ck-yes">MIT</span></td>
<td><span class="ck-no">✗</span></td>
<td><span class="ck-yes">MIT/Apache</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ========== INSTALL ========== -->
<section class="install" id="install">
<div class="wrap">
<div class="install__head">
<div class="label" data-reveal>Installation</div>
<h2 class="h2" data-reveal="80">Install in <span class="gt">10 seconds</span>.</h2>
<p class="subtitle" data-reveal="160">Choose your method. All install the same <code style="color:var(--cyan)">envvault</code> binary.</p>
</div>
<div data-reveal="200">
<div class="tabs" data-tabs="inst">
<button class="tab on" data-tab="cargo">Cargo</button>
<button class="tab" data-tab="brew">Homebrew</button>
<button class="tab" data-tab="curl">curl</button>
<button class="tab" data-tab="binary">Binary</button>
</div>
<div class="panels" data-panels="inst">
<div class="panel on" data-panel="cargo">
<div class="code-box">
<button class="copy-btn" data-copy-text="cargo install envvault-cli">Copy</button>
<code><span class="cmt"># Install from crates.io</span>
cargo install envvault-cli
<span class="cmt"># With optional features</span>
cargo install envvault-cli --features keyring-store,version-check</code>
</div>
</div>
<div class="panel" data-panel="brew">
<div class="code-box">
<button class="copy-btn" data-copy-text="brew install whynaidu/tap/envvault">Copy</button>
<code><span class="cmt"># Add the tap and install</span>
brew install whynaidu/tap/envvault</code>
</div>
</div>
<div class="panel" data-panel="curl">
<div class="code-box">
<button class="copy-btn" data-copy-text="curl -fsSL https://raw.githubusercontent.com/whynaidu/envvault/main/install.sh | sh">Copy</button>
<code><span class="cmt"># Auto-detects platform, verifies SHA256</span>
curl -fsSL https://raw.githubusercontent.com/whynaidu/envvault/main/install.sh | sh</code>
</div>
</div>
<div class="panel" data-panel="binary">
<div class="code-box">
<code><span class="cmt"># Download pre-built binaries for your platform</span>
<span style="color:var(--text-2)">Linux x86_64 · Linux ARM64 · macOS x86_64 · macOS ARM64 · Windows x86_64</span>
<a href="https://github.com/whynaidu/envvault/releases" style="color:var(--gold)">→ github.com/whynaidu/envvault/releases</a></code>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== GUIDE ========== -->
<section class="guide" id="guide">
<div class="wrap">
<div class="guide__head">
<div class="label" data-reveal>Quick Start</div>
<h2 class="h2" data-reveal="80">Zero to encrypted in <span class="gt--warm">5 minutes</span>.</h2>
</div>
<div class="guide__list">
<div class="guide-item" data-reveal data-step="1">
<div class="guide-item__text">
<h3>Initialize your vault</h3>
<p>Run <code style="color:var(--cyan)">envvault init</code> in your project. Existing .env files are auto-detected and imported.</p>
</div>
<div class="guide-item__code">
<span style="color:var(--gold)">$</span> envvault init<br>
<span style="color:var(--green)">✓</span> <span style="color:var(--text-2)">Vault initialized at .envvault/dev.vault</span><br>
<span style="color:var(--cyan)">i</span> <span style="color:var(--text-2)">Detected .env — imported 4 secrets</span>
</div>
</div>
<div class="guide-item" data-reveal data-step="2">
<div class="guide-item__text">
<h3>Add secrets securely</h3>
<p>Interactive prompt hides input by default. Nothing in your terminal or shell history.</p>
</div>
<div class="guide-item__code">
<span style="color:var(--gold)">$</span> envvault set DATABASE_URL<br>
<span style="color:var(--text-2)">Enter value: ••••••••••••</span><br>
<span style="color:var(--green)">✓</span> <span style="color:var(--text-2)">Stored (AES-256-GCM encrypted)</span>
</div>
</div>
<div class="guide-item" data-reveal data-step="3">
<div class="guide-item__text">
<h3>Run with injected secrets</h3>
<p>Secrets decrypt in memory and inject as env vars. They never touch disk as plaintext.</p>
</div>
<div class="guide-item__code">
<span style="color:var(--gold)">$</span> envvault run -- node server.js<br>
<span style="color:var(--cyan)">i</span> <span style="color:var(--text-2)">Injecting 5 secrets...</span><br>
<span style="color:var(--text-2)">Server running on :3000</span>
</div>
</div>
<div class="guide-item" data-reveal data-step="4">
<div class="guide-item__text">
<h3>Manage environments</h3>
<p>Use <code style="color:var(--cyan)">-e</code> for different environments. Clone, diff, and switch freely.</p>
</div>
<div class="guide-item__code">
<span style="color:var(--gold)">$</span> envvault -e staging set API_KEY<br>
<span style="color:var(--gold)">$</span> envvault diff staging<br>
<span style="color:var(--gold)">$</span> envvault env clone prod
</div>
</div>
<div class="guide-item" data-reveal data-step="5">
<div class="guide-item__text">
<h3>Audit & rotate</h3>
<p>View the audit log. Rotate your master password — all secrets re-encrypt atomically.</p>
</div>
<div class="guide-item__code">
<span style="color:var(--gold)">$</span> envvault audit --last 10<br>
<span style="color:var(--gold)">$</span> envvault rotate-key<br>
<span style="color:var(--green)">✓</span> <span style="color:var(--text-2)">Key rotated, 5 secrets re-encrypted</span>
</div>
</div>
</div>
</div>
</section>
<!-- ========== SECURITY ========== -->
<section class="security" id="security">
<div class="wrap">
<div class="security__head">
<div class="label" data-reveal>Security</div>
<h2 class="h2" data-reveal="80">Built on <span class="gt">proven primitives</span>.</h2>
<p class="subtitle subtitle--center" data-reveal="160">Zero unsafe code. Every decision prioritizes security over convenience.</p>
</div>
<div class="security__grid">
<div class="glass sec-card" data-reveal>
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
<div class="sec-card__title">AES-256-GCM</div>
<div class="sec-card__desc">Authenticated encryption with random 12-byte nonces. Per-secret keys via HKDF-SHA256 for defense in depth.</div>
</div>
<div class="glass sec-card" data-reveal="100">
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
<div class="sec-card__title">Argon2id KDF</div>
<div class="sec-card__desc">Memory-hard key derivation (64 MB, 3 iterations, 4 lanes). GPU-resistant by design. Prevents brute-force.</div>
</div>
<div class="glass sec-card" data-reveal="200">
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
<div class="sec-card__title">HMAC-SHA256 Integrity</div>
<div class="sec-card__desc">Full vault integrity check detects tampering. Constant-time comparison prevents timing side-channels.</div>
</div>
<div class="glass sec-card" data-reveal>
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
<div class="sec-card__title">Memory Safety</div>
<div class="sec-card__desc">All keys zeroized after use. Zero unsafe blocks. Written in Rust with full memory safety guarantees.</div>
</div>
<div class="glass sec-card" data-reveal="100">
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
<div class="sec-card__title">Atomic Writes</div>
<div class="sec-card__desc">Temp file + rename pattern. Your vault is never in a partially-written state, even on crash.</div>
</div>
<div class="glass sec-card" data-reveal="200">
<div class="sec-card__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></div>
<div class="sec-card__title">Git Hook Scanning</div>
<div class="sec-card__desc">Pre-commit hook detects leaked secrets before they reach your repository. Defense at the source.</div>
</div>
</div>
</div>
</section>
<!-- ========== CTA ========== -->
<section class="cta">
<div class="orbs" aria-hidden="true">
<div class="orb orb--gold" style="width:500px;height:500px;top:-10%;left:20%"></div>
<div class="orb orb--cyan" style="width:400px;height:400px;bottom:-10%;right:25%"></div>
</div>
<div class="wrap">
<h2 class="cta__h2" data-reveal>
Stop leaking secrets.<br>
<span class="gt">Start encrypting today.</span>
</h2>
<p class="cta__sub" data-reveal="100">
One install. One command. Zero infrastructure. Your .env files deserve better.
</p>
<div class="cta__actions" data-reveal="200">
<a href="#install" class="btn btn--gold btn--lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Install EnvVault
</a>
<a href="https://github.com/whynaidu/envvault" class="btn btn--outline btn--lg" target="_blank" rel="noopener">
<svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
Star on GitHub
</a>
<a href="roadmap.html" class="btn btn--outline btn--lg">
View Roadmap
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</section>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="wrap footer__in">
<div class="footer__l">
<span class="footer__brand">EnvVault</span>
<span class="footer__copy">MIT / Apache-2.0 — Built with Rust</span>
</div>
<ul class="footer__links">
<li><a href="https://github.com/whynaidu/envvault" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="https://crates.io/crates/envvault-cli" target="_blank" rel="noopener">Crates.io</a></li>
<li><a href="roadmap.html">Roadmap</a></li>
<li><a href="https://github.com/whynaidu/envvault/blob/main/CHANGELOG.md" target="_blank" rel="noopener">Changelog</a></li>
</ul>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>