// Security section — sticky-scroll encryption flow with cipher text animations. function Security() { const sectionRef = React.useRef(null); const [progress, setProgress] = React.useState(0); React.useEffect(() => { const onScroll = () => { if (!sectionRef.current) return; const r = sectionRef.current.getBoundingClientRect(); const total = r.height - window.innerHeight; const p = Math.max(0, Math.min(1, -r.top / total)); setProgress(p); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const steps = [ { t:'You type a secret', d:'Plaintext lives only in memory during editing. When the vault locks, the master key is cleared from RAM — credentials remain as encrypted blobs only.', code:'input → ephemeral buffer' }, { t:'Your password → a key', d:'PBKDF2-HMAC-SHA256 (150,000 iterations) derives a 256-bit AES key from your master password. The derived key is never stored — computed fresh on each unlock.', code:'PBKDF2-HMAC-SHA256 · 150k' }, { t:'AES-256-GCM encrypts', d:'AES-256-GCM via Apple CryptoKit. Each record gets a unique nonce from the OS CSPRNG. The authentication tag prevents silent tampering.', code:'AES-256-GCM · nonce₉₆' }, { t:'Written to one file', d:'Data stored in a sandboxed SQLite database at ~/Library/Application Support/com.cypherkeep.CypherKeep/cypherkeep_clean.db — only encrypted blobs, never plaintext.', code:'cypherkeep_clean.db · ciphertext' }, ]; const activeIdx = Math.min(steps.length - 1, Math.floor(progress * steps.length)); return (
{/* sticky stage */}
{/* ambient pulse */}
{/* subtle grid */}
{/* left: intro + step list (narrower) */}
02 — HOW IT KEEPS QUIET

Zero-knowledge,
by design.

No account, no email, no server to compromise. Your master password never leaves your Mac.

{steps.map((s,i)=>( ))}
{/* right: stage that breathes */}
{/* step chip bottom-left */}
STEP {String(activeIdx+1).padStart(2,'0')} / {String(steps.length).padStart(2,'0')}
{/* progress bar */}
); } function CipherStage({ step, idx }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { setTick(t => t + 1); }, [idx]); const scenes = [StepType, StepKDF, StepAES, StepDisk]; const Scene = scenes[idx]; return (
); } // STEP 1 — typing into RAM function StepType({ step }) { const [typed, setTyped] = React.useState(''); const full = 'sk-proj-abc123XYZ789'; React.useEffect(() => { let i = 0; const id = setInterval(() => { i++; setTyped(full.slice(0, i)); if (i >= full.length) clearInterval(id); }, 65); return () => clearInterval(id); }, []); return (
{/* ephemeral ring */}
{/* input card */}
API KEY · NEW
{typed}▎
{['RAM only', 'cleared on blur'].map(t => ( {t} ))}
); } // STEP 2 — PBKDF2 KDF function StepKDF() { // simulate iteration bars const [n, setN] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setN(x => (x+1) % 3), 400); return () => clearInterval(id); }, []); return (
{/* password side */}
MASTER PASSWORD
****
+ 128-bit salt
{/* KDF machine */}
PBKDF2-SHA256
{/* memory bars */}
{[...Array(8)].map((_,i)=>(
))}
150,000 iters
{/* pulse ring */}
{/* key side */}
DERIVED KEY
6E9A
· 256 bits
); } // STEP 3 — AES-GCM encrypt function StepAES() { const [phase, setPhase] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setPhase(p => (p+1) % 2), 1400); return () => clearInterval(id); }, []); const plaintext = 'sk-proj-abc123XYZ789'; const cipher = '8A1F·3C·9E7D·2B64·FF03·A91C·4E7B·BA02'; return (
{/* plaintext row */} {/* encryptor bar */}
⟶ AES-256-GCM ⟶
{/* ciphertext row */}
); } // STEP 4 — disk function StepDisk() { return (
{/* file illustration */}
{/* file body */}
{/* folded corner */}
{/* content lines */}
CYPHERKEEP_CLEAN.DB
{[...Array(8)].map((_,i) => (
))}
· · · ciphertext · · ·
{/* lock badge — larger, fully within stage */}
🔒
); } // helpers const sceneWrap = { position:'absolute', inset:0, display:'flex', flexDirection:'column', padding:'44px 44px 32px', gap:24, }; function SceneHead({ step }) { // Split title into head + italic tail if it contains the right shape; // otherwise show whole thing. Stylized: first word(s) plain, last word in serif italic. const parts = splitStylizedTitle(step.t); return (
{parts.head} {parts.tail && ( {parts.head ? ' ' : ''}{parts.tail} )}
{step.d}
); } function splitStylizedTitle(t) { // Heuristic: last meaningful word in italic serif. // Map specific titles for best effect. const map = { 'You type a secret': { head:'You type a', tail:'secret' }, 'Argon2id': { head:'Password → a', tail:'key' }, 'AES-256-GCM': { head:'AES-256-GCM', tail:'encrypts' }, 'One file.': { head:'One', tail:'file.' }, }; return map[t] || { head:t, tail:'' }; } function SceneFoot({ right }) { return (
→ {right}
); } function Lane({ label, value, color, mono }) { return (
{label} {value}
); } Object.assign(window, { Security });