// Hero variants for Ninja Typer
const { useState, useEffect, useRef } = React;
// ————————————————————————————————————————————————————————————
// Live typing demo — shared across hero variants
// ————————————————————————————————————————————————————————————
const DEMO_SCRIPTS = {
professional: {
raw: "um so i wanted to like follow up on the proposal from uh last week and get it over the line by friday",
clean: "I wanted to follow up on the proposal from last week and get it over the line by Friday.",
app: "Gmail",
appHint: "To: sam@acme.co",
},
casual: {
raw: "hey um can you grab milk on the way home uh the oat one not the regular",
clean: "Hey, can you grab milk on the way home? The oat one, not the regular.",
app: "iMessage",
appHint: "Alex",
},
code: {
raw: "um fix the race condition in the uh audio service where the mic like stays open after you release the key",
clean: "Fix the race condition in AudioService where the mic stays open after you release the key.",
app: "VS Code",
appHint: "commit message",
},
};
// Words the engine slices out of the transcript
const FILLER_WORDS = new Set(["um", "uh", "like", "basically", "maybe", "so", "kinda", "actually"]);
// Vertical scatter for flying word chips (deterministic, no Math.random)
const VF_OFFSETS = [-22, 8, -8, 18, -16, 2, 12, -2];
// raw speech -> chips: fillers fly solo (they get sliced), real words fly
// in short phrases so each chip is readable on its way to the engine
function tokenizeSpeech(raw) {
const words = raw.split(/\s+/);
const chips = [];
let buf = [];
const flush = () => { if (buf.length) { chips.push({ text: buf.join(" "), filler: false }); buf = []; } };
words.forEach(w => {
const bare = w.toLowerCase().replace(/[^a-z']/g, "");
if (FILLER_WORDS.has(bare)) {
flush();
chips.push({ text: w, filler: true });
} else {
buf.push(w);
if (buf.length === 3) flush();
}
});
flush();
return chips;
}
function LiveDemo({ compact = false, toneKey = "professional" }) {
const [phase, setPhase] = useState("speaking"); // speaking | done
const [chips, setChips] = useState([]);
const [typed, setTyped] = useState("");
const [pulse, setPulse] = useState(0);
const [pillPhase, setPillPhase] = useState(0);
const [micLevel, setMicLevel] = useState(0.03);
const timers = useRef([]);
const script = DEMO_SCRIPTS[toneKey] || DEMO_SCRIPTS.professional;
// the mascot's animation clock: same 60ms / +0.25 tick as the app,
// plus a simulated mic level in the range the real AudioService reports
useEffect(() => {
if (phase !== "speaking") return;
const id = setInterval(() => {
setPillPhase(p => p + 0.25);
const t = performance.now() / 1000;
setMicLevel(Math.abs(Math.sin(t * 2.1) * Math.sin(t * 3.7)) * 0.05 + 0.02);
}, 60);
return () => clearInterval(id);
}, [phase]);
const clear = () => {
timers.current.forEach(clearTimeout);
timers.current = [];
};
const later = (fn, ms) => timers.current.push(setTimeout(fn, ms));
const run = () => {
clear();
setChips([]);
setTyped("");
setPulse(0);
setPhase("speaking");
const defs = tokenizeSpeech(script.raw);
const EMIT = 460; // ms between chips leaving the mouth (slow enough to read)
const FLIGHT = 1400; // ms chip travel time to the engine (matches .vf-fly CSS)
const TYPE_MS = 22; // ms per output character
// Output text is revealed in sync with chip arrivals: a real chip gets
// absorbed, the engine pulses, and the corresponding slice of clean text
// types out. Fillers get sliced and add nothing. Cause, then effect.
const clean = script.clean;
const totalReal = defs.filter(d => !d.filler).length;
let realSeen = 0;
let typedPos = 0;
defs.forEach((c, i) => {
const id = i;
later(() => {
setChips(prev => [...prev, { ...c, id, state: "fly", lane: i % VF_OFFSETS.length }]);
}, i * EMIT);
if (c.filler) {
later(() => {
// the engine slices it: strike through, drop, vanish
setChips(prev => prev.map(ch => ch.id === id ? { ...ch, state: "slice" } : ch));
later(() => setChips(prev => prev.filter(ch => ch.id !== id)), 800);
}, i * EMIT + FLIGHT);
} else {
realSeen += 1;
const from = typedPos;
const to = Math.round(clean.length * (realSeen / totalReal));
typedPos = to;
later(() => {
// absorbed: chip gone, engine pulses, its words type out
setChips(prev => prev.filter(ch => ch.id !== id));
setPulse(p => p + 1);
for (let k = from; k < to; k++) {
later(() => setTyped(clean.slice(0, k + 1)), (k - from) * TYPE_MS);
}
}, i * EMIT + FLIGHT);
}
});
const lastChunk = Math.ceil(clean.length / Math.max(totalReal, 1));
const doneAt = defs.length * EMIT + FLIGHT + lastChunk * TYPE_MS + 300;
later(() => setPhase("done"), doneAt);
later(run, doneAt + 3000); // loop the story
};
// autoplay on mount + restart on tone change
useEffect(() => {
const t = setTimeout(run, 400);
return () => { clearTimeout(t); clear(); };
// eslint-disable-next-line
}, [toneKey]);
const speaking = phase === "speaking";
return (
{/* fake app chrome */}
{script.app}{script.appHint}
fnhold
{/* voice -> engine -> text pipeline */}
{/* you, talking */}
you, talking
{/* flight lane for word chips */}
{chips.map(c => (
{c.text}
))}
{/* the ninja: the app's actual floating indicator, listening */}
{speaking ? "the ninja, listening" : "the ninja, satisfied"}
{/* what lands in your app */}
{typed}
{phase !== "done" && }
{phase === "done" && (
inserted. no um survived.
)}
cleaned, typed into {script.app}
hold fn · speak · release
);
}
// ————————————————————————————————————————————————————————————
// Shuriken mark
// ————————————————————————————————————————————————————————————
function Shuriken({ size = 40, spin = true, color = "var(--accent)" }) {
return (
);
}
// Stylized mask illustration built from flat shapes
function NinjaMaskIllustration({ tone = "orange" }) {
const bg = tone === "orange" ? "var(--accent-soft)" : tone === "green" ? "var(--accent-2-soft)" : "var(--paper-2)";
return (
{/* speed lines */}
{/* shuriken floaters */}
{/* the mask — geometric */}
{/* speech scroll */}
silent. fast. precise.
);
}
// ————————————————————————————————————————————————————————————
// Hero variants
// ————————————————————————————————————————————————————————————
const COPY = {
bold: {
eyebrow: "Voice in, clean text out",
title: ["Type at the speed", "of thought."],
sub: "Ninja Typer turns your voice into clean text in any Mac app. Hold fn, speak your mind, release. Done. The um's never make it out alive.",
cta: "Download for Mac",
ctaSub: "free during early access",
},
playful: {
eyebrow: "The silent keyboard assassin",
title: ["Stop typing.", "Start whispering."],
sub: "Hold fn, mumble something, and watch Ninja Typer strike. Clean sentences land in any text field on your Mac. Your wrists will write you a thank-you note.",
cta: "Unleash the ninja",
ctaSub: "early access · no card required",
},
precise: {
eyebrow: "Dictation for macOS",
title: ["Speak it faster than", "you could type it."],
sub: "Press fn, speak naturally, release. Ninja Typer transcribes your speech and tidies it up: fillers gone, punctuation fixed, your words untouched.",
cta: "Get Ninja Typer",
ctaSub: "free for now",
},
};
function HeroCentered({ tone, copyKey, toneKey }) {
const c = COPY[copyKey] || COPY.bold;
return (