/* ─────────────────────────────────────────────────────────────
LADIDIÉR — Ornaments (heraldic illustration vocabulary)
───────────────────────────────────────────────────────────── */
const { useState, useEffect, useRef } = React;
/* A pair of mirrored laurel sprigs — matches the crest's laurels.
Drawn as a continuous gold line illustration. */
function Laurel({ width = 260, color = "var(--gold)", animate = true, opacity = 1 }) {
return (
);
}
/* A horizontal flourish — section divider with central diamond + tapered lines. */
function Flourish({ width = 240, color = "currentColor", opacity = .55 }) {
return (
);
}
/* Art-deco corner — used inside magazine cover frames. */
function DecoCorner({ size = 64, color = "var(--gold)", rotate = 0 }) {
return (
);
}
/* LD monogram — usable at large size as a "watermark" behind hero content. */
function Monogram({ size = 480, color = "var(--gold)", opacity = .07 }) {
return (
);
}
/* A single vertical accent — used as a margin ornament on hero. */
function VerticalRule({ height = 220, color = "var(--gold)" }) {
return (
);
}
/* Stagger-revealed display text — splits children into spans. */
function extractText(children) {
if (children == null) return "";
if (typeof children === "string") return children;
if (typeof children === "number") return String(children);
if (Array.isArray(children)) return children.map(extractText).join("");
if (typeof children === "object" && children.props) return extractText(children.props.children);
return "";
}
function Stagger({ children, as: Tag = "span", base = 0, step = 60, className = "", style }) {
const text = extractText(children);
const words = text.split(/(\s+)/);
return (
{words.map((w, i) =>
/\s+/.test(w) ? {w} :
{w}
)}
);
}
/* Cursor-following gold glow inside a container. */
function Spotlight({ size = 540, intensity = .35 }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const parent = el.parentElement;
const onMove = (e) => {
const r = parent.getBoundingClientRect();
el.style.setProperty("--mx", `${e.clientX - r.left}px`);
el.style.setProperty("--my", `${e.clientY - r.top}px`);
};
parent.addEventListener("mousemove", onMove);
return () => parent.removeEventListener("mousemove", onMove);
}, []);
return (
);
}
/* Animated count-up numeral. */
function CountUp({ to = 11, suffix = "", duration = 1400, format = (v) => v }) {
const [n, setN] = useState(0);
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
let started = false;
const io = new IntersectionObserver((entries) => {
entries.forEach(en => {
if (en.isIntersecting && !started) {
started = true;
const start = performance.now();
const tick = (t) => {
const k = Math.min(1, (t - start) / duration);
const ease = 1 - Math.pow(1 - k, 3);
setN(Math.round(ease * to));
if (k < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
io.disconnect();
}
});
}, { threshold: .4 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
return {format(n)}{suffix};
}
/* Roman numeral counter that ticks through values on view */
function RomanReveal({ value = "MMXXI" }) {
const ref = useRef(null);
const [shown, setShown] = useState("");
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(es => {
es.forEach(en => {
if (en.isIntersecting) {
let i = 0;
const id = setInterval(() => {
i++;
setShown(value.slice(0, i));
if (i >= value.length) clearInterval(id);
}, 90);
io.disconnect();
}
});
}, { threshold: .5 });
io.observe(el);
return () => io.disconnect();
}, [value]);
return {shown || "\u00A0"};
}
Object.assign(window, { Laurel, Flourish, DecoCorner, Monogram, VerticalRule, Stagger, Spotlight, CountUp, RomanReveal });