// graphics.jsx — decorative editorial elements. // All low-key, type-and-line based. No stock illustrations. /* -------------------- MARQUEE -------------------- */ function Marquee({ items, speed = 60, separator = '✦' }) { // items: array of strings; rendered twice for seamless loop const seq = [...items, ...items]; return (
{seq.map((it, i) => ( {it} {separator} ))}
); } /* -------------------- BIG SECTION NUMERAL -------------------- */ function BigNumeral({ children, side = 'right', top = 0 }) { // Huge faded numeral behind section heading. return ( ); } /* -------------------- STAMP / SEAL -------------------- */ /* -------------------- TICK RULER -------------------- */ function TickRuler({ count = 24, labels = [] }) { return (
{Array.from({ length: count }, (_, i) => { const big = i % 4 === 0; return (
{big && labels[i / 4] && ( {labels[i / 4]} )}
); })}
); } /* -------------------- CROSSHAIR -------------------- */ function Crosshair({ size = 14 }) { return ( ); } /* -------------------- BIG QUOTE -------------------- */ function BigQuote({ children, attribution }) { return (
{children}
{attribution && (
— {attribution}
)}
); } /* -------------------- ITEM GLYPHS -------------------- */ const ItemGlyph = ({ name, size = 36 }) => { // Clean rounded icon set (route / audio / chapters / cafes / phone / music). // Self-contained palette: sage badge, deep-green stroke, accent fills. const box = size * 1.5; const bodies = { route: ( <> ), story: ( <> ), chapter: ( <> ), cafe: ( <> ), phone: ( <> ), music: ( <> ), forever: ( <> ), }; return ( {bodies[name] || null} ); }; /* -------------------- PAPER GRAIN OVERLAY -------------------- */ function PaperGrain() { // Subtle fixed grain overlay using SVG turbulence. const svg = ` `; const url = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`; return (