/* global React, Common */
const { Eyebrow, SectionTitle, SectionLead, Keycap } = Common;
const { useEffect: useSpE, useState: useSpS, useRef: useSpR } = React;
// Speed demo: type race vs Dimmy
function SpeedSection() {
const [run, setRun] = useSpS(0);
const [typing, setTyping] = useSpS("");
const [dimmy, setDimmy] = useSpS("");
const [tTime, setTTime] = useSpS(0);
const [dTime, setDTime] = useSpS(0);
const [phase, setPhase] = useSpS("idle"); // idle | running | done
const sentence = "Hey team, I think we should ship the new pricing page on Friday.";
const start = () => {
setTyping(""); setDimmy(""); setTTime(0); setDTime(0); setPhase("running");
const startedAt = performance.now();
// typing simulation: ~60 wpm = ~5 chars/sec → ~16 chars/sec for fast typist
let ti = 0;
const tId = setInterval(() => {
ti++;
setTyping(sentence.slice(0, ti));
setTTime(performance.now() - startedAt);
if (ti >= sentence.length) {
clearInterval(tId);
}
}, 55);
// dimmy simulation: 380ms thinking, then full paste
setTimeout(() => {
setDimmy(sentence);
setDTime(performance.now() - startedAt);
}, 380);
setTimeout(() => setPhase("done"), 4500);
};
// auto-loop
useSpE(() => {
if (phase !== "idle") return;
const id = setTimeout(start, 600);
return () => clearTimeout(id);
}, [phase]);
useSpE(() => {
if (phase === "done") {
const id = setTimeout(() => setPhase("idle"), 2400);
return () => clearTimeout(id);
}
}, [phase]);
const fmt = (ms) => `${(ms / 1000).toFixed(2)}s`;
return (
speed
Faster than typing{" "}
you.
You speak at ~150 words per minute.
You type at ~40.
Dimmy closes that gap with sub-second latency, so the bottleneck is your thinking, not your fingers.
{[
["~380ms", "median round-trip on M1, fully offline"],
["~120ms", "transcription with whisper-large-v3-turbo"],
["~60 fps", "pill animation on a 2018 ThinkPad"],
["~12 MB", "installer size · ~78 MB whisper model"],
].map(([k, v]) => (
{k}{v}
))}
live race
{/* Typing lane */}
K}
/>
{/* Dimmy lane */}
D
}
/>
⚡
Dimmy finished in {fmt(dTime || 380)}.
Typing is still going at {fmt(tTime)}.
);
}
function Lane({ label, sub, color, text, ghost, time, done, icon }) {
return (