/* Interactive figures for blog posts. Each is configured from JSON in the post source
(content/blog/posts/*.html) so later comparisons reuse them with their own facts.
Product-UI fragments (IlCard, IlPill, IlIcon, IlNum, CAvatar, ilFont, Icon) come from mocks.jsx.
Wrapped in an IIFE because every text/babel script shares one global scope. */
(() => {
const { useState, useEffect, useRef, useLayoutEffect } = React;
const prefersReduced = () => !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
/* Runs only while the figure is on screen */
function useInView(ref, margin = "0px") {
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || !("IntersectionObserver" in window)) { setSeen(true); return; }
const io = new IntersectionObserver(([e]) => setSeen(e.isIntersecting), { rootMargin: margin, threshold: 0.2 });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return seen;
}
/* A step counter that loops while visible; with reduced motion it rests on the final state */
function useLoop(steps, ms, active, rest) {
const [t, setT] = useState(rest);
useEffect(() => {
if (prefersReduced()) { setT(rest); return; }
if (!active) return;
const id = setInterval(() => setT(x => (x + 1) % steps), ms);
return () => clearInterval(id);
}, [active, steps, ms]);
return t;
}
/* Lays a fixed-size drawing out at any width by scaling it */
function Stage({ w, h, children }) {
const ref = useRef(null);
const [s, setS] = useState(1);
useLayoutEffect(() => {
const el = ref.current;
const fit = () => setS(el.getBoundingClientRect().width / w);
fit();
const ro = new ResizeObserver(fit);
ro.observe(el);
return () => ro.disconnect();
}, [w]);
return
{children}
;
}
const curve = (x1, y1, x2, y2) => { const mx = (x1 + x2) / 2; return `M${x1} ${y1} C${mx} ${y1} ${mx} ${y2} ${x2} ${y2}`; };
const SEND_BLUE = "#0948B6";
/* ---------------------------------------------------------------------------
1. TwoModels: the competitor's working model beside Duologue's, animated.
--------------------------------------------------------------------------- */
function StatusPill({ sent }) {
return {sent ? "Sent" : "Queued"}
;
}
function WideModel({ steps, leads, pill }) {
const ref = useRef(null);
const on = useInView(ref);
const n = leads.length;
const t = useLoop(n + 4, 480, on, n);
const sent = Math.min(t, n);
const rowY = i => 26 + i * 56;
return
Sequence{steps.length} steps
{steps.map(([icon, label], i) =>
{label}
)}
{leads.map((name, i) => {name})}
{pill}
;
}
/* An email client's model: a split inbox, each email sorted, answered or cleared in turn */
const INBOX_ACTIONS = {
done: ["check", "Done", "var(--green-50)", "var(--green-700)"],
reply: ["zap", "Instant Reply", "var(--blue-50)", "var(--blue-700)"],
remind: ["alarm-clock", "Remind me", "var(--amber-50)", "var(--amber-700)"],
archive: ["archive", "Auto archived", "var(--n-75)", "var(--text-secondary)"]
};
function InboxModel({ tabs, emails, pill }) {
const ref = useRef(null);
const on = useInView(ref);
const n = emails.length;
const t = useLoop(n + 4, 700, on, n);
const done = Math.min(t, n);
return
: }{side.name}