/* global React, Common, DimmyTray */
const { Eyebrow, SectionTitle, SectionLead } = Common;
const { useState: useInS, useEffect: useInE, useRef: useInR } = React;
// Hide the pill: side-by-side comparison. Windows tray strip (icon + dot + VU)
// vs macOS menu bar (icon REPLACED by status dot during recording).
function InvisibleSection() {
const [phase, setPhase] = useInS("idle"); // idle | recording | transcribing | done
const [level, setLevel] = useInS(0.3);
const [paused, setPaused] = useInS(false);
const sectionRef = useInR(null);
const inViewRef = useInR(true);
useInE(() => {
const el = sectionRef.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
inViewRef.current = !!(e && e.isIntersecting);
}, { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, []);
useInE(() => {
if (paused) return;
let timers = [];
let levelInterval;
let cancelled = false;
const wait = (ms) => new Promise((r) => timers.push(setTimeout(r, ms)));
const cycle = async () => {
while (!cancelled) {
if (!inViewRef.current) { await wait(800); continue; }
await wait(900);
if (cancelled) return;
setPhase("recording");
let target = 0.5;
levelInterval = setInterval(() => {
target = Math.max(0.15, Math.min(0.95, target + (Math.random() - 0.5) * 0.4));
setLevel((l) => l + (target - l) * 0.35);
}, 80);
await wait(3000);
clearInterval(levelInterval);
setLevel(0);
if (cancelled) return;
setPhase("transcribing");
await wait(1500);
if (cancelled) return;
setPhase("done");
await wait(700);
if (cancelled) return;
setPhase("idle");
}
};
cycle();
return () => {
cancelled = true;
timers.forEach(clearTimeout);
if (levelInterval) clearInterval(levelInterval);
};
}, [paused]);
const states = ["idle", "recording", "transcribing", "done"];
const stateMeta = {
idle: { label: "Idle", desc: "ready · nothing on screen", color: "#34D399" },
recording: { label: "Recording", desc: "Win bar tracks volume · Mac icon is the dot", color: "#EF4444" },
transcribing: { label: "Transcribing", desc: "Win sweeps blue · Mac dot stays blue", color: "#38BDF8" },
done: { label: "Done", desc: "green flash · text was inserted", color: "#34D399" },
};
const meta = stateMeta[phase];
const Tray = (typeof DimmyTray !== "undefined" ? DimmyTray : window.DimmyTray) || {};
const { WinTaskbarIcon, MacMenuBarIcon } = Tray;
return (
no pill, no problem
Hide the pill. The tray icon takes over.
You're presenting on a Zoom call. You're recording a Loom. Or you just don't want a colored pill floating at the edge of your screen all day. Toggle it off. The tray icon does everything the pill did, quietly.
{/* Pinned-app stubs around the live Dimmy taskbar icon */}
{/* The live Dimmy taskbar icon, same zone as the other pinned apps */}
{WinTaskbarIcon && (
)}
{/* RIGHT: macOS menu bar strip */}
{/* Decorative menubar glyphs */}
{/* The live Dimmy menu bar icon (becomes the dot during rec) */}
{MacMenuBarIcon && }
Fri 1 May 14:32
{/* State chips */}
{states.map((s) => {
const m = stateMeta[s];
const a = phase === s;
return (
);
})}
{paused ? "click chips to compare · double-click to resume · " : "auto-cycling · "}
{meta.desc}
{/* Three benefits */}
{[
{ t: "Screenshare-safe", s: "Nothing floats over your slides. Recording is invisible to viewers, but the tray tells you it's on." },
{ t: "Fullscreen-friendly", s: "Games, video editors, presentations. Apps that hate floating overlays still get dictation." },
{ t: "Distraction-free", s: "Some users just don't want a pill in their peripheral vision. The tray icon is enough." },
].map((f, i) => (
{f.t}
{f.s}
))}
);
}
function Caption({ text }) {
return (
{text}
);
}
function SmallStub({ children }) {
return (
{children}
);
}
function PinnedStub({ children }) {
// Same footprint as WinTaskbarIcon (without the volume bar) so the row reads as one taskbar
return (
{children}
);
}
const STK = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
function GlyphWinLogo() { return ; }
function GlyphSearch() { return ; }
function GlyphChrome() { return ; }
function GlyphExplorer() { return ; }
function GlyphStore() { return ; }
function GlyphBatteryMac() { return ; }
function GlyphWifiMac() { return ; }
function GlyphSpotlightMac() { return ; }
window.InvisibleSection = InvisibleSection;