// Hero — giant type, real screenshot floating w/ parallax, scroll-out reveal. function Hero() { const shotRef = React.useRef(null); const heroRef = React.useRef(null); const [scrollY, setScrollY] = React.useState(0); const [mouse, setMouse] = React.useState({ x: 0, y: 0 }); React.useEffect(() => { const h = () => setScrollY(window.scrollY); window.addEventListener('scroll', h, { passive: true }); return () => window.removeEventListener('scroll', h); }, []); // Subtle 3D tilt toward mouse React.useEffect(() => { const h = (e) => { if (!heroRef.current) return; const r = heroRef.current.getBoundingClientRect(); const x = (e.clientX - r.left - r.width / 2) / r.width; const y = (e.clientY - r.top - r.height / 2) / r.height; setMouse({ x, y }); }; window.addEventListener('mousemove', h); return () => window.removeEventListener('mousemove', h); }, []); const parallax = Math.min(scrollY * 0.25, 200); const heroFade = Math.max(0, 1 - scrollY / 600); return (
{/* grain texture */}
{/* subtle top grid */}
{/* badge */}
✦ v1.0 · now on the Mac App Store
{/* headline */}

Your keys. Your Mac.
Zero  compromise .

A native macOS vault built entirely with Swift and Apple's CryptoKit.
No Rust, no Electron, no third-party servers. Runs lean and fully sandboxed.

{/* CTAs */}
Download for macOS Watch demo →
$19.99 · once · Swift 5.9 · SwiftUI · macOS 14+
{/* product shot with parallax + mouse tilt */}
{/* soft bloom under shot */}
CypherKeep — API Keys
{/* floating annotations */}
); } function Annotation({ x, y, side, lineLen=70, kicker, label, sub, dot }) { const [show, setShow] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setShow(true), 900); return () => clearTimeout(t); }, []); const isLeft = side === 'left'; return (
{/* text block */}
{kicker}
{label}
{sub && (
{sub}
)}
{/* connector: line + dot */}
); } function MagneticButton({ children, primary }) { const ref = React.useRef(null); const [off, setOff] = React.useState({ x:0, y:0 }); const onMove = (e) => { const r = ref.current.getBoundingClientRect(); const x = (e.clientX - r.left - r.width / 2) * 0.2; const y = (e.clientY - r.top - r.height / 2) * 0.3; setOff({ x, y }); }; const onLeave = () => setOff({ x:0, y:0 }); return ( ); } Object.assign(window, { Hero });