// Shared primitives: placeholders, stickers, decorative SVGs const Placeholder = ({ label = "image", w = "100%", h = 280, tone = "pink", style = {} }) => { const bg = tone === "pink" ? "var(--pink)" : tone === "ink" ? "var(--ink)" : "var(--grey-soft)"; const fg = tone === "ink" ? "var(--paper)" : "var(--ink)"; return (
{label}
); }; // Onomatopoeia burst (POW! ZAP! etc.) const Burst = ({ text = "POW!", color = "var(--accent)", size = 140, rotate = -8, style = {} }) => (
{text}
); // A draggable sticker — stays anchored to the page (scrolls with content) const Sticker = ({ children, initialX = 0, initialY = 0, rotate = 0, zIndex = 5 }) => { const [pos, setPos] = React.useState({ x: initialX, y: initialY }); const [drag, setDrag] = React.useState(null); const [peeled, setPeeled] = React.useState(false); React.useEffect(() => { if (!drag) return; const onMove = (e) => { // Track in document coords so position survives scrolling setPos({ x: e.clientX + window.scrollX - drag.dx, y: e.clientY + window.scrollY - drag.dy, }); }; const onUp = () => setDrag(null); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; }, [drag]); const onDown = (e) => { e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); // Offset of the mousedown point within the sticker (viewport coords) const dx = e.clientX - rect.left; const dy = e.clientY - rect.top; setDrag({ dx, dy }); // Snap initial position to document coords setPos({ x: rect.left + window.scrollX, y: rect.top + window.scrollY }); setPeeled(true); }; if (peeled) { // Portal onto so `position:absolute` is relative to the document, // not a parent section — sticker scrolls with the page instead of floating fixed. return ReactDOM.createPortal(
{children}
, document.body ); } return (
{children}
); }; // Star sticker const Star = ({ size = 60, fill = "var(--accent)", stroke = "var(--ink)" }) => ( ); // Heart const Heart = ({ size = 50, fill = "var(--accent)" }) => ( ); // Section header — magazine style const SectionHead = ({ kicker, title, italic, num }) => (
{kicker}

{title} {italic && {italic}}

{num && (
SECTION №{num}
──────────
)}
); Object.assign(window, { Placeholder, Burst, Sticker, Star, Heart, SectionHead });