= 1 ? 1 : 0} />;
case "kv2":
return (
{ln.k}
{typed}{typed?.length < (ln.v || "").length && }
);
case "menu": {
const fullyTyped = typed >= 1;
return (
{ln.items.map(it => {
const isSel = it.n === ln.sel;
return (
{isSel ? "▶" : " "}
[{it.n}]
{fullyTyped ? it.c : ""}{!fullyTyped && }
);
})}
{ln.cols.map((c, i) => {c})}
);
case "picker-row": {
const fullyTyped = typed >= 1;
return (
{ln.sel ? "▶" : " "}
{ln.cols.map((c, i) => (
{fullyTyped ? c : ""}{!fullyTyped && i === 0 && }
))}
);
}
case "raw":
return {ln.c}
;
case "warn":
return {typed}{typed?.length < (ln.c || "").length && }
;
case "prompt2":
return ▸ {typed}{typed?.length < (ln.c || "").length && }
;
case "confirm2": {
return (
{ln.selYes ? "▶" : " "}
{ln.yes}
{!ln.selYes ? "▶" : " "}
{ln.no}
);
}
case "log":
return {typed}{typed?.length < (ln.c || "").length && }
;
case "ok":
return {typed}{typed?.length < (ln.c || "").length && }
;
case "hint":
return {typed}
;
case "spinner":
return (
⠹
{typed}{typed?.length < (ln.c || "").length && }
);
case "progress2":
return (
{String(ln.pct).padStart(3, " ")}%
{ln.label}
{ln.elapsed}
{ln.done && ✓}
);
case "done":
return ✓ {typed}{typed?.length < (ln.c || "").length && }
;
default:
return null;
}
}
// --------------------------------------------------------------------
// Demo runner
// --------------------------------------------------------------------
function TerminalDemo() {
const [sceneIdx, setSceneIdx] = useState(0);
const [typed, setTyped] = useState({});
const sceneRef = useRef(0);
const timeoutsRef = useRef([]);
useEffect(() => {
sceneRef.current = sceneIdx;
setTyped({});
timeoutsRef.current.forEach(clearTimeout);
timeoutsRef.current = [];
const scene = SCENES[sceneIdx];
let acc = 100;
scene.lines.forEach((ln, i) => {
// Instant lines (no typed content): mark typed=1 after small delay.
const instantTypes = new Set([
"logo", "version", "divider", "spacer", "steps", "menu",
"picker-head", "picker-row", "raw", "confirm2", "progress2",
]);
if (instantTypes.has(ln.t)) {
const tid = setTimeout(() => {
if (sceneRef.current !== sceneIdx) return;
setTyped(prev => ({ ...prev, [i]: 1 }));
}, acc);
timeoutsRef.current.push(tid);
acc += ln.t === "logo" ? 200 : 40;
return;
}
const target = (ln.c || ln.v || "").length;
if (target === 0) {
const tid = setTimeout(() => {
if (sceneRef.current !== sceneIdx) return;
setTyped(prev => ({ ...prev, [i]: 0 }));
}, acc);
timeoutsRef.current.push(tid);
acc += 30;
return;
}
const charDelay = target > 60 ? 4 : target > 30 ? 8 : 14;
for (let k = 1; k <= target; k++) {
const tid = setTimeout(() => {
if (sceneRef.current !== sceneIdx) return;
setTyped(prev => ({ ...prev, [i]: k }));
}, acc + k * charDelay);
timeoutsRef.current.push(tid);
}
acc += target * charDelay + 40;
});
const advance = setTimeout(() => {
setSceneIdx(s => (s + 1) % SCENES.length);
}, acc + scene.hold);
timeoutsRef.current.push(advance);
return () => {
timeoutsRef.current.forEach(clearTimeout);
timeoutsRef.current = [];
};
}, [sceneIdx]);
const scene = SCENES[sceneIdx];
return (
{scene.title}
zsh · bootstick.sh
{scene.lines.map((ln, i) => {
const txt = ln.c || ln.v || "";
const n = typed[i];
// For instant types n is 1 once "shown"; for typing types n is char count.
const typedSlice = typeof n === "number" && txt ? txt.slice(0, n) : (n ? 1 : 0);
return (
);
})}
{SCENES.map((_, i) => (
))}
);
}
window.TerminalDemo = TerminalDemo;