// Hero — supports 2 variants ("spotlight" = big animated logo center, "terminal" = split with terminal pane). // Both share: scramble headline, mono meta strip, blueprint frame, drift motif. function HeroFrame({ children, dark }) { // Blueprint-style corner ticks + side labels around the hero canvas. const tick = (placement) => { const base = { position: "absolute", width: 18, height: 18, pointerEvents: "none" }; const c = dark ? "rgba(245,243,238,0.35)" : "rgba(10,10,10,0.35)"; const lines = { tl: { left: 24, top: 24, borderLeft: `1px solid ${c}`, borderTop: `1px solid ${c}` }, tr: { right: 24, top: 24, borderRight: `1px solid ${c}`, borderTop: `1px solid ${c}` }, bl: { left: 24, bottom: 24, borderLeft: `1px solid ${c}`, borderBottom: `1px solid ${c}` }, br: { right: 24, bottom: 24, borderRight: `1px solid ${c}`, borderBottom: `1px solid ${c}` }, }; return ; }; return ( <> {tick("tl")}{tick("tr")}{tick("bl")}{tick("br")} {/* Side mono labels */} PROMEFY · BUILD 2026.05 PROMEFY_SOLUTIONS · BUILD 2026.05 {children} ); } function HeroSpotlight({ dark, intensity }) { return (

{intensity > 1 && } {/* Subtle drifting wireframe motif */} {intensity > 0 && (

)} {intensity > 2 && (

)}

{/* Top mono strip */}

● EST 2025 · SOFTWARE STUDIO

{/* Static logo, subtle reveal */}

{/* Scramble headline */}

{/* Scroll indicator */} SCROLL

); } // ---- LiveTerminal — typing animation + matrix rain backdrop --------------- function useMatrixRain(canvasRef, { color = "var(--site-accent, #00FF66)", density = 1, speed = 1 } = {}) { React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let raf, drops, fontSize = 14, columns = 0, w = 0, h = 0; // Resolve CSS var for the accent into a real color value at runtime. const probe = document.createElement("span"); probe.style.color = color; document.body.appendChild(probe); const resolved = getComputedStyle(probe).color || "#00FF66"; document.body.removeChild(probe); const glyphs = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホ0123456789{}[]<>/\\|=+-*&%$#@!?".split(""); const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); const r = canvas.getBoundingClientRect(); w = r.width; h = r.height; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); columns = Math.floor(w / fontSize); drops = new Array(columns).fill(0).map(() => Math.random() * -h / fontSize); // Fill once so the first frame isn't pure black flash ctx.fillStyle = "rgba(10, 10, 10, 1)"; ctx.fillRect(0, 0, w, h); }; resize(); const ro = new ResizeObserver(resize); ro.observe(canvas); const tick = () => { // While the page-transition overlay is covering/wiping, this canvas is // hidden behind it — skip the per-frame work so the wipe transform keeps // the main thread and stays smooth. Keep the rAF scheduled so it resumes. if (window.__omPtAnimating) { raf = requestAnimationFrame(tick); return; } // Translucent black overlay leaves a fading trail ctx.fillStyle = "rgba(10, 10, 10, 0.10)"; ctx.fillRect(0, 0, w, h); ctx.font = `${fontSize}px var(--font-mono, ui-monospace, monospace)`; ctx.fillStyle = resolved; ctx.globalAlpha = 0.55; for (let i = 0; i < columns; i++) { if (Math.random() > density * 0.6) continue; const ch = glyphs[(Math.random() * glyphs.length) | 0]; const x = i * fontSize; const y = drops[i] * fontSize; // Brighter head ctx.globalAlpha = 0.9; ctx.fillText(ch, x, y); // Trail one above with lower alpha ctx.globalAlpha = 0.35; ctx.fillText(glyphs[(Math.random() * glyphs.length) | 0], x, y - fontSize); if (y > h && Math.random() > 0.975) drops[i] = 0; drops[i] += 0.6 * speed; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, [color, density, speed]); } // Each block is a "question" the visitor "asks" and one or more response lines // the terminal "prints back". Plain English, no command-line jargon. const TERM_BLOCKS = [ { cmd: "whoami", lines: [ "→ A software studio for traditional firms.", "→ Engineers, designers, ML researchers.", "→ Founded 2025.", ], }, { cmd: "ls ./services", lines: [ "→ New websites and brand kits for traditional firms.", "→ Custom web apps built around how you work.", "→ AI that reads drawings, scans and PDFs.", "→ Old databases turned into something you can search.", ], }, { cmd: "cat clients.txt", lines: [ "→ Architects, engineers, lawyers, accountants.", "→ Firms run on email, spreadsheets, PDFs.", "→ Partners who'd rather not.", ], }, { cmd: "./process.sh", lines: [ "→ 30-min intro call. Free, no pitch deck.", "→ We scope it. You decide if it's worth it.", "→ 4–12 weeks of building. Then we ship.", "→ Code and data are yours.", ], }, { cmd: "status --availability", lines: [ "→ 12 projects live in production.", "→ 2 intake slots open this quarter.", "→ Last shipped: 2 hours ago.", ], }, { cmd: "why-not-an-agency", lines: [ "→ We don't subcontract. Same team start to finish.", "→ No SaaS lock-in. The keys are yours.", "→ Working software by week four, not a slide deck.", ], }, { cmd: "./start.sh", lines: [ "→ Scroll down. Send us a brief.", "→ Or email sales@promefy.com.", "→ Reply within 2 business days.", ], }, ]; function LiveTerminal() { const canvasRef = React.useRef(null); const scrollerRef = React.useRef(null); useMatrixRain(canvasRef, { density: 0.8, speed: 1.05 }); // Animation state: a flat queue of printed lines, plus the current // partially-typed line + char index. const [printed, setPrinted] = React.useState([]); // [{ kind: 'cmd' | 'out', text: string }] const [typing, setTyping] = React.useState({ blockIdx: 0, lineIdx: -1, charIdx: 0 }); // lineIdx=-1 means the command itself const [clock, setClock] = React.useState(() => new Date()); // Tick the clock once a second React.useEffect(() => { const i = setInterval(() => setClock(new Date()), 1000); return () => clearInterval(i); }, []); // Typewriter loop React.useEffect(() => { const block = TERM_BLOCKS[typing.blockIdx]; const currentText = typing.lineIdx === -1 ? block.cmd : block.lines[typing.lineIdx]; // Done with this block? if (typing.lineIdx >= block.lines.length) { const t = setTimeout(() => { // Trim history so it doesn't grow forever setPrinted((p) => p.slice(-40)); setTyping({ blockIdx: (typing.blockIdx + 1) % TERM_BLOCKS.length, lineIdx: -1, charIdx: 0 }); }, 1400); return () => clearTimeout(t); } // Still typing chars of current line? if (typing.charIdx < currentText.length) { const delay = typing.lineIdx === -1 ? 32 : 18; // commands type slower const t = setTimeout(() => { setTyping((s) => ({ ...s, charIdx: s.charIdx + 1 })); }, delay + Math.random() * 30); return () => clearTimeout(t); } // Finished a line — push it to the log and advance const t = setTimeout(() => { setPrinted((p) => [...p, { kind: typing.lineIdx === -1 ? "cmd" : "out", text: currentText, }]); setTyping((s) => ({ ...s, lineIdx: s.lineIdx + 1, charIdx: 0 })); }, typing.lineIdx === -1 ? 220 : 80); return () => clearTimeout(t); }, [typing]); // Keep newest line visible React.useEffect(() => { const el = scrollerRef.current; if (el) el.scrollTop = el.scrollHeight; }, [printed, typing]); const block = TERM_BLOCKS[typing.blockIdx]; const currentText = typing.lineIdx === -1 ? block.cmd : (block.lines[typing.lineIdx] ?? ""); const partial = currentText.slice(0, typing.charIdx); const fmt2 = (n) => String(n).padStart(2, "0"); const timeStr = `${fmt2(clock.getHours())}:${fmt2(clock.getMinutes())}:${fmt2(clock.getSeconds())}`; return ( {/* Matrix rain canvas — fills the whole thing */}