// Non-hero sections for Ninja Typer const { useState: useState2, useEffect: useEffect2 } = React; // ———————————————————————————————————————————————————————————— // Logo bar — placeholder Mac apps where it works // ———————————————————————————————————————————————————————————— const APPS = [ { name: "Messages", kind: "messages" }, { name: "Mail", kind: "mail" }, { name: "Slack", kind: "slack" }, { name: "Notes", kind: "notes" }, { name: "VS Code", kind: "vscode" }, { name: "Notion", kind: "notion" }, { name: "Figma", kind: "figma" }, { name: "Chrome", kind: "chrome" }, { name: "Terminal", kind: "terminal" }, { name: "Linear", kind: "linear" }, { name: "Discord", kind: "discord" }, { name: "Safari", kind: "safari" }, ]; function LogoBar() { return (
Works in every text field on your Mac
{[...APPS, ...APPS].map((a, i) => (
{a.name}
))}
); } // ———————————————————————————————————————————————————————————— // How it works — 3 steps with animated illustration // ———————————————————————————————————————————————————————————— function HowItWorks() { const [active, setActive] = useState2(0); const [paused, setPaused] = useState2(false); useEffect2(() => { if (paused) return; const id = setInterval(() => setActive(a => (a + 1) % 3), 4000); return () => clearInterval(id); }, [paused]); const steps = [ { num: "01", title: "Hold fn", desc: "Press and hold fn, or rebind it to whatever your thumb likes. No window opens, nothing interrupts. The ninja is simply listening.", }, { num: "02", title: "Speak your mind", desc: "Ramble, backtrack, pause to sip coffee. The mic only listens while the key is down, and the ninja never rushes you.", }, { num: "03", title: "Release. It's typed.", desc: "Lift your finger and the clean version lands wherever your cursor is. Email, code review, search bar, spicy group chat.", }, ]; return (
How it works

You do three things. Barely.

The engine up top does the heavy lifting. This is your entire share of the work.

setPaused(false)}> {steps.map((s, i) => (
{ setActive(i); setPaused(true); }} >
{s.num}

{s.title}

{s.desc}

{active === i && !paused &&
}
))}
); } function StepIllustration({ index, active }) { if (index === 0) { // Hand holding fn key return ( {/* keyboard grid */} {Array.from({ length: 5 }).map((_, col) => ( Array.from({ length: 3 }).map((_, row) => ( )) ))} {/* fn key pressed */} fn {/* pulse */} {active && ( )} ); } if (index === 1) { // Waveform into speech bubble return ( {/* head silhouette */} {/* waves */} {[0,1,2,3,4].map(i => ( ))} {/* bubble */} ); } // step 3: shuriken flying into text field return ( {/* text field */} Got it, sending now. {/* shuriken trail */} ); } // ———————————————————————————————————————————————————————————— // Stylized app icons — original geometric drawings in our house style // all share: bold 1.5px ink stroke, flat fills, slight ninja flair // ———————————————————————————————————————————————————————————— function AppIcon({ kind }) { const S = 48; const common = { width: S, height: S, viewBox: "0 0 48 48", "aria-hidden": true }; switch (kind) { case "mail": return ( ); case "messages": return ( ); case "slack": return ( ); case "vscode": return ( </> ); case "notion": return ( ); case "figma": return ( ); case "linear": return ( ); case "terminal": return ( ); case "safari": return ( ); case "discord": return ( ); case "spotlight": return ( ); case "chatgpt": return ( ); case "notes": return ( ); case "chrome": return ( ); default: return null; } } // ———————————————————————————————————————————————————————————— // Integrations — two sliding marquee rows, opposite directions // ———————————————————————————————————————————————————————————— function Integrations() { const rowA = [ { name: "Mail", kind: "mail" }, { name: "Messages", kind: "messages" }, { name: "Slack", kind: "slack" }, { name: "VS Code", kind: "vscode" }, { name: "Notion", kind: "notion" }, { name: "Figma", kind: "figma" }, { name: "Linear", kind: "linear" }, ]; const rowB = [ { name: "Terminal", kind: "terminal" }, { name: "Safari", kind: "safari" }, { name: "Discord", kind: "discord" }, { name: "Spotlight", kind: "spotlight" }, { name: "ChatGPT", kind: "chatgpt" }, { name: "Notes", kind: "notes" }, { name: "Chrome", kind: "chrome" }, ]; const renderTile = (a, i) => (
{a.name}
); return (
Works everywhere

Any text field. No plugins.

Ninja Typer works at the OS level on macOS, so it types into anything with a cursor. Native apps, web apps, search bars, command palettes. If you can click into it, the ninja can type into it.

{[...rowA, ...rowA, ...rowA].map(renderTile)}
{[...rowB, ...rowB, ...rowB].map(renderTile)}
+ every other app on your Mac
if it accepts keystrokes, we type into it
); } // ———————————————————————————————————————————————————————————— // Pricing // ———————————————————————————————————————————————————————————— function Pricing() { return (
Pricing

Zero dollars. For now.

Ninja Typer is free during early access. You bring your own Groq API key (which has a free tier), plug it in during setup, and the ninja gets to work. Paid plans will arrive one day; early users will be treated kindly. No trial countdown, no "talk to sales".

$ 0 /early access the ninja has no use for money (yet)
Download for Mac
macOS 14+ · setup takes about five minutes, most of it spent admiring the onboarding
BYOK
bring your own key
Grab a free Groq API key, paste it once during setup,
and your dictation runs on your own account. Your key, your data.
  • 57 languages, custom dictionary
  • Writing styles: professional, casual, technical
  • Local mode: on-device models, fully offline
  • Every macOS app, every text field
); } // ———————————————————————————————————————————————————————————— // Footer CTA // ———————————————————————————————————————————————————————————— function FooterCTA() { return (
{/* big shuriken */}

Ready to retire
your keyboard?

Free during early access. Your fingers will send a thank-you note. Probably dictated.

Download for Mac
early access · bring your own Groq key
{/* giant wordmark, clipped at the fold — the last thing you see */}
ninja typer
); } Object.assign(window, { LogoBar, HowItWorks, Integrations, Pricing, FooterCTA });