// Shared primitives: cipher-scramble text, copy button, key icon, etc.
// Text that animates in as a cipher scramble. Triggers once when in view.
function CipherText({ text, className, style, delay = 0, duration = 900, charset }) {
const ref = React.useRef(null);
const [display, setDisplay] = React.useState(text);
const [started, setStarted] = React.useState(false);
const chars = charset || 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789/+=*#$%@';
React.useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting && !started) setStarted(true);
}, { threshold: 0.4 });
io.observe(ref.current);
return () => io.disconnect();
}, [started]);
React.useEffect(() => {
if (!started) return;
let raf, start;
const tick = (t) => {
if (!start) start = t + delay;
const p = Math.max(0, Math.min(1, (t - start) / duration));
const revealed = Math.floor(p * text.length);
let out = '';
for (let i = 0; i < text.length; i++) {
if (i < revealed) out += text[i];
else if (text[i] === ' ') out += ' ';
else out += chars[Math.floor(Math.random() * chars.length)];
}
setDisplay(out);
if (p < 1) raf = requestAnimationFrame(tick);
else setDisplay(text);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [started, text, delay, duration]);
return {display};
}
// Small copy-to-clipboard button with flash feedback
function CopyBtn({ value, tone = 'dark' }) {
const [copied, setCopied] = React.useState(false);
const onClick = (e) => {
e.stopPropagation();
try {
navigator.clipboard.writeText(value);
setCopied(true);
setTimeout(() => setCopied(false), 1100);
} catch (e) {}
};
const dark = tone === 'dark';
return (
);
}
function EyeBtn({ shown, onClick, tone = 'dark' }) {
const dark = tone === 'dark';
return (
);
}
// Mask: show first N, then ••••, last M. Hover-reveal via shown prop.
function MaskedValue({ value, shown, head = 3, tail = 6, tone = 'dark' }) {
if (shown) return {value};
const start = value.slice(0, head);
const end = value.slice(-tail);
return {start}••••••••{end};
}
// Shield / key logo — authoritative brand mark
// The shield path is a closed geometric form with a negative-space "corner" cut;
// fill is a fixed purple→indigo gradient to stay consistent across surfaces.
// `accent` prop is retained for backwards compat (affects the glow halo only).
function ShieldLogo({ size = 44, accent = '#8b7cff', glow = true }) {
const gid = `shield-grad-${String(accent).slice(1)}-${Math.round(size)}`;
return (
);
}
// Wordmark — distinctive mixed typography for "CypherKeep".
// Uses Instrument Serif (already loaded for the hero) for "Cypher" and
// Geist for "Keep", giving the brand a two-tone editorial / utility feel
// without adding font weight to the page. Size scales from a single prop.
function Wordmark({ size = 22, color = 'inherit' }) {
return (
CypherKeep
);
}
// Apple-logo for download CTA (generic glyph, not an Apple trademark recreation)
function DownloadMark({ size = 14, color = 'currentColor' }) {
return (
);
}
// Key glyph for app icons
function KeyGlyph({ size = 14, color = 'currentColor' }) {
return (
);
}
// Seed-phrase word pill
function SeedChip({ n, word, tone = 'dark' }) {
const dark = tone === 'dark';
return (