// Generative SVG visuals for MandateWorks
// Each card visual is a small generative diagram using brand tokens.
const Mark = ({size = 28}) => (
);
// ───── GLYPH SWAP — S02 — volt headline word cycles through meanings ─────
const GlyphSwap = ({words, interval = 2400}) => {
const [i, setI] = React.useState(0);
const [prev, setPrev] = React.useState(null);
React.useEffect(() => {
const t = setInterval(() => {
setPrev(i);
setI((x) => (x + 1) % words.length);
setTimeout(() => setPrev(null), 600);
}, interval);
return () => clearInterval(t);
}, [i, words.length, interval]);
// anchor sized to longest word so layout doesn't jump
const longest = words.reduce((a, b) => (b.length > a.length ? b : a), "");
return (
{longest}
{prev !== null && (
{words[prev]}
)}
{words[i]}
);
};
// ───── HERO CANVAS — persona constellation w/ live ping ─────
const HeroCanvas = () => {
const dots = React.useMemo(() => {
const arr = [];
const seed = (i) => Math.sin(i * 12.9898) * 43758.5453;
const rand = (i) => seed(i) - Math.floor(seed(i));
for (let i = 0; i < 130; i++) {
arr.push({
cx: 60 + rand(i + 1) * 460,
cy: 60 + rand(i + 11) * 460,
r: 1 + Math.floor(rand(i + 23) * 3),
v: rand(i + 41) > 0.85,
});
}
return arr;
}, []);
return (
);
};
// ───── PLATFORM VISUALS ─────
const VisForecast = () => (
);
const VisCadre = () => (
);
const VisSentinel = () => {
// S07 — Threat radar: rotating sweep + intermittent blips
const [blips, setBlips] = React.useState([]);
const sweepRef = React.useRef(null);
React.useEffect(() => {
let id = 0;
const t = setInterval(() => {
const a = Math.random() * Math.PI * 2;
const r = 12 + Math.random() * 56;
const cx = 140 + Math.cos(a) * r;
const cy = 70 + Math.sin(a) * r * 0.85;
const isAlert = Math.random() > 0.72;
const myId = ++id;
setBlips((b) => [...b, {id: myId, cx, cy, alert: isAlert}]);
setTimeout(() => setBlips((b) => b.filter((x) => x.id !== myId)), 1600);
}, 850);
return () => clearInterval(t);
}, []);
return (
);
};
const VisCounter = () => {
// Continuous scrape → flag → assign rebuttal
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setTick((x) => x + 1), 1800);
return () => clearInterval(t);
}, []);
const flagged = tick % 4 === 0;
return (
);
};
const VisMandateOne = () => (
);
const VisResolve = () => {
// S09 — SLA race: bars fill against clock with staggered start
const [racing, setRacing] = React.useState(false);
React.useEffect(() => {
const start = () => {
setRacing(false);
setTimeout(() => setRacing(true), 80);
};
start();
const t = setInterval(start, 6500);
return () => clearInterval(t);
}, []);
const rows = [
{id: "T-0421", w: 32, color: "#00C281", label: "02h ✓"},
{id: "T-0422", w: 48, color: "#00C281", label: "06h ✓"},
{id: "T-0423", w: 78, color: "#FFB020", label: "36h ⚠"},
{id: "T-0424", w: 96, color: "#FF5A36", label: "71h ▲"},
{id: "T-0425", w: 22, color: "#00C281", label: "01h ✓"},
];
return (
);
};
// ───── EXPORTS ─────
Object.assign(window, {
Mark,
HeroCanvas,
GlyphSwap,
VisForecast, VisCadre, VisSentinel, VisCounter, VisMandateOne, VisResolve,
});