// LanDocs landing page — mini feature demos.
// Each renders an SVG scene scaled to fill its container, with a small
// cursor-driven animation that loops continuously.
// ─── Loop hook ───────────────────────────────────────────────────────────
function useLoopTime(duration) {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf;
let start = null;
const step = (now) => {
if (start == null) start = now;
setT(((now - start) / 1000) % duration);
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [duration]);
return t;
}
const _lerp = (a, b, t) => a + (b - a) * t;
const _easeInOut = (t) => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;
const _easeOut = (t) => 1 - Math.pow(1 - t, 3);
// Interpolate a cursor through keyframes [{t,x,y}, ...].
function _interp(kfs, t) {
if (t <= kfs[0].t) return { x: kfs[0].x, y: kfs[0].y };
for (let i = 0; i < kfs.length - 1; i++) {
const a = kfs[i], b = kfs[i+1];
if (t >= a.t && t <= b.t) {
const e = _easeInOut(Math.min(1, Math.max(0, (t - a.t) / (b.t - a.t))));
return { x: _lerp(a.x, b.x, e), y: _lerp(a.y, b.y, e) };
}
}
const last = kfs[kfs.length-1];
return { x: last.x, y: last.y };
}
function _isClicking(events, t) {
for (const e of events) if (t >= e.t && t < e.t + e.dur) return true;
return false;
}
// A small inline cursor SVG (renders at viewBox coords).
function MiniCursor({ x, y, clicking }) {
return (
);
}
// ─── Mini-demo frame wrapper ─────────────────────────────────────────────
function MiniFrame({ children, label }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 1. Drag & drop
// ─────────────────────────────────────────────────────────────────────────
function DemoDragDrop() {
const T = 5.0;
const t = useLoopTime(T);
const cardX = 60, cardY = 110;
const dropX = 360, dropY = 170;
const cursor = _interp([
{ t: 0.0, x: 400, y: 230 }, // rest
{ t: 0.6, x: cardX, y: cardY }, // approach card
{ t: 0.95, x: cardX, y: cardY },// hover/press
{ t: 2.20, x: dropX, y: dropY },// drag to canvas
{ t: 2.50, x: dropX, y: dropY },// release
{ t: 4.50, x: dropX, y: dropY },// hold
{ t: 5.00, x: 400, y: 230 },
], t);
const clicking = _isClicking([{ t: 0.95, dur: 0.18 }], t);
const dragging = t > 0.95 && t < 2.50;
const dropped = t > 2.40;
// Card "hot" state
const cardHot = t > 0.55 && t < 0.95;
// Toolbox card pressed
const cardPressed = t > 0.95 && t < 1.15;
// Device placed
const dt = t - 2.40;
const devOp = dropped ? Math.min(1, dt / 0.4) : 0;
const devScale = dropped ? 0.92 + 0.08 * _easeOut(Math.min(1, dt / 0.4)) : 0.92;
// Card stays hidden while being "carried" (it becomes the drag ghost)
const cardCarried = t > 0.95 && t < 2.50;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 2. Connect ports
// ─────────────────────────────────────────────────────────────────────────
function DemoConnect() {
const T = 4.5;
const t = useLoopTime(T);
const sw = { x: 300, y: 90, w: 200, h: 70 }; // switch top
const pc = { x: 340, y: 260, w: 120, h: 80 }; // pc bottom
// Port positions
const swPortX = sw.x + sw.w / 2;
const swPortY = sw.y + sw.h;
const pcPortX = pc.x + pc.w / 2;
const pcPortY = pc.y;
const cursor = _interp([
{ t: 0.0, x: 500, y: 200 },
{ t: 0.7, x: swPortX, y: swPortY }, // approach switch port
{ t: 1.00, x: swPortX, y: swPortY }, // click
{ t: 1.70, x: pcPortX, y: pcPortY }, // move to pc port
{ t: 2.00, x: pcPortX, y: pcPortY }, // click → draws cable
{ t: 4.00, x: pcPortX, y: pcPortY }, // hold
{ t: 4.50, x: 500, y: 200 },
], t);
const clicking = _isClicking([
{ t: 1.00, dur: 0.20 },
{ t: 2.00, dur: 0.20 },
], t);
// Cable progress (drawStart 2.0 → drawEnd 2.6)
let cableP = 0;
if (t >= 2.00 && t < 2.60) cableP = _easeInOut((t - 2.00) / 0.60);
else if (t >= 2.60 && t < 4.20) cableP = 1;
else if (t >= 4.20) cableP = 1 - _easeInOut(Math.min(1, (t - 4.20) / 0.30));
// Port glow when clicked
const swPortGlow = t > 1.00 && t < 1.50;
const pcPortGlow = t > 2.00 && t < 2.50;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 3. Configure properties
// ─────────────────────────────────────────────────────────────────────────
function DemoConfigure() {
const T = 6.6;
const t = useLoopTime(T);
// Layout: canvas left (with selected device), props panel right
const panelX = 360, panelW = 230;
const ipFieldY = 175;
const nameFieldY = 115;
const cursor = _interp([
{ t: 0.00, x: 220, y: 200 },
{ t: 0.45, x: 220, y: 200 }, // hover device
{ t: 0.65, x: 220, y: 200 }, // click selects
{ t: 1.20, x: panelX + 110, y: nameFieldY }, // move to name field
{ t: 1.40, x: panelX + 110, y: nameFieldY }, // click
{ t: 2.80, x: panelX + 110, y: nameFieldY }, // typing happens
{ t: 3.20, x: panelX + 110, y: ipFieldY }, // move to ip field
{ t: 3.35, x: panelX + 110, y: ipFieldY }, // click
{ t: 4.80, x: panelX + 110, y: ipFieldY }, // typing happens
{ t: 5.60, x: 220, y: 200 }, // back to canvas
{ t: 6.60, x: 220, y: 200 }, // hold reset state
], t);
const clicking = _isClicking([
{ t: 0.65, dur: 0.20 },
{ t: 1.40, dur: 0.18 },
{ t: 3.35, dur: 0.18 },
], t);
// Typing: name then IP. After 5.30, erase back to empty so the loop wraps cleanly.
const typed = (text, start, end) => {
if (t < start) return '';
if (t >= end) return text;
return text.slice(0, Math.floor(text.length * (t - start) / (end - start)));
};
// Erase from full back to empty between (start, end).
const erased = (text, start, end) => {
if (t < start) return text;
if (t >= end) return '';
const p = (t - start) / (end - start);
return text.slice(0, Math.ceil(text.length * (1 - p)));
};
let nameValue, ipValue;
if (t < 5.30) {
nameValue = typed('core-sw-01', 1.50, 2.50);
ipValue = typed('192.168.1.10', 3.45, 4.65);
} else if (t < 5.80) {
// Erase both quickly
nameValue = erased('core-sw-01', 5.30, 5.65);
ipValue = erased('192.168.1.10', 5.35, 5.75);
} else {
nameValue = '';
ipValue = '';
}
const nameFocused = t >= 1.40 && t < 3.35;
const ipFocused = t >= 3.35 && t < 5.30;
const showCaret = (t % 0.9) < 0.45;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 4. AI Prompt
// ─────────────────────────────────────────────────────────────────────────
function DemoAIPrompt() {
const T = 5.0;
const t = useLoopTime(T);
// Topbar AI button position
const aiBtnX = 540, aiBtnY = 25;
// Modal copy button position
const copyX = 410, copyY = 290;
const cursor = _interp([
{ t: 0.00, x: 300, y: 180 },
{ t: 0.60, x: aiBtnX, y: aiBtnY }, // approach AI button
{ t: 0.85, x: aiBtnX, y: aiBtnY }, // click
{ t: 2.30, x: aiBtnX, y: aiBtnY }, // hold while modal open
{ t: 2.80, x: copyX, y: copyY }, // move to Copy
{ t: 3.00, x: copyX, y: copyY }, // click Copy
{ t: 4.20, x: copyX, y: copyY }, // hold "Copied!"
{ t: 5.00, x: 300, y: 180 },
], t);
const clicking = _isClicking([
{ t: 0.85, dur: 0.20 },
{ t: 3.00, dur: 0.20 },
], t);
const aiBtnPressed = t > 0.85 && t < 1.05;
const modalOpen = t > 1.05 && t < 4.50;
const copyClicked = t > 3.00 && t < 4.50;
const copyPressed = t > 3.00 && t < 3.20;
const modalT = Math.max(0, t - 1.05);
const modalFadeIn = Math.min(1, modalT / 0.25);
const modalFadeOut = t > 4.30 ? Math.max(0, 1 - (t - 4.30) / 0.20) : 1;
const modalOp = modalFadeIn * modalFadeOut;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 5. Export
// ─────────────────────────────────────────────────────────────────────────
function DemoExport() {
const T = 6.6;
const t = useLoopTime(T);
const saveBtn = { x: 160, y: 25, w: 50 };
const pngBtn = { x: 290, y: 25, w: 50 };
const txtBtn = { x: 375, y: 25, w: 50 };
const cursor = _interp([
{ t: 0.00, x: 400, y: 200 },
{ t: 0.55, x: saveBtn.x, y: saveBtn.y },
{ t: 0.75, x: saveBtn.x, y: saveBtn.y },
{ t: 1.70, x: saveBtn.x, y: saveBtn.y }, // hold while toast
{ t: 2.10, x: pngBtn.x, y: pngBtn.y },
{ t: 2.30, x: pngBtn.x, y: pngBtn.y },
{ t: 3.40, x: pngBtn.x, y: pngBtn.y }, // hold while toast
{ t: 3.75, x: txtBtn.x, y: txtBtn.y },
{ t: 3.95, x: txtBtn.x, y: txtBtn.y },
{ t: 5.30, x: txtBtn.x, y: txtBtn.y }, // hold while toast
{ t: 6.00, x: 400, y: 200 },
], t);
const clicking = _isClicking([
{ t: 0.75, dur: 0.20 },
{ t: 2.30, dur: 0.20 },
{ t: 3.95, dur: 0.20 },
], t);
const saveHot = t > 0.55 && t < 0.75;
const savePressed = t > 0.75 && t < 0.95;
const pngHot = t > 2.10 && t < 2.30;
const pngPressed = t > 2.30 && t < 2.50;
const txtHot = t > 3.75 && t < 3.95;
const txtPressed = t > 3.95 && t < 4.15;
const saveToast = t > 0.85 && t < 1.85;
const pngToast = t > 2.40 && t < 3.40;
const txtToast = t > 4.05 && t < 5.30;
const toast = (label, file, show, start, end) => {
if (!show) return null;
const dt = t - start;
const op = Math.min(1, dt * 4) * Math.min(1, (end - t) * 3);
const slide = Math.max(0, (1 - Math.min(1, dt * 5))) * 16;
return { label, file, op: Math.max(0, op), slide };
};
const tst = toast('Saved', 'network-layout.json', saveToast, 0.85, 1.85) ||
toast('Exported', 'network-diagram.png', pngToast, 2.40, 3.40) ||
toast('Exported', 'network-topology.txt', txtToast, 4.05, 5.30);
return (
);
}
Object.assign(window, {
DemoDragDrop, DemoConnect, DemoConfigure, DemoAIPrompt, DemoExport,
});