// solid-variant-art.jsx // "Solid" tone, refined to an editorial / premium feel. // Palette: ink + ivory + madder + brass hairline. // Replaces the previous SolidVariant by re-assigning window.SolidVariant // (load this AFTER variants.jsx). // // Key moves vs the original: // • Hairline-only borders (no filled cards) → editorial gravity // • Cormorant Garamond Italic + Noto Serif JP for the headline pair // • Vertical (tategaki) small labels at section heads // • Brass (#b08850) used only as a thin accent line / number color // • Generous padding and letter-spacing; no rounded corners anywhere // • Inputs are underline-only (no boxes); buttons are outline-only const { useState: useStateS } = React; // ─── Animation hooks & components ───────────────────────────── // useInView — fires when element enters viewport. Robust: // • synchronous visibility check on mount (in-viewport content fires immediately) // • threshold:0 + no rootMargin (any pixel visible counts) // • safety timeout so content can never stay hidden indefinitely function useInView(opts = {}) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; // sync check: if already on-screen, trigger now const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; const vw = window.innerWidth || document.documentElement.clientWidth; if (r.bottom > 0 && r.top < vh && r.right > 0 && r.left < vw) { setSeen(true); return; } let safety; let io; try { io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io && io.disconnect(); clearTimeout(safety); } }, { threshold: 0, ...opts }); io.observe(el); } catch {} // safety: never leave content invisible past 1.5s even if observer fails safety = setTimeout(() => { setSeen(true); io && io.disconnect(); }, 1500); return () => { io && io.disconnect(); clearTimeout(safety); }; }, []); return [ref, seen]; } // — scroll-triggered fade-up. stagger=true cascades children. function Reveal({ children, stagger, as = 'div', style, className = '' }) { const [ref, inView] = useInView(); const cls = `${stagger ? 'clh-rv-stagger' : 'clh-rv'} ${inView ? 'is-in' : ''} ${className}`.trim(); return React.createElement(as, { ref, className: cls, style }, children); } // — number ticks up to target when in view. Supports integer or comma-grouped. function CountUp({ to, duration = 900, prefix = '', suffix = '', style, className = '' }) { const [ref, inView] = useInView({ threshold: 0.3 }); const [val, setVal] = React.useState(0); React.useEffect(() => { if (!inView) return; setVal(0); // explicit reset so the tick visibly starts from 0 const start = performance.now(); const target = parseFloat(String(to).replace(/,/g, '')); let raf; const tick = (t) => { const k = Math.max(0, Math.min(1, (t - start) / duration)); const eased = 1 - Math.pow(1 - k, 3); setVal(target * eased); if (k < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, to, duration]); const display = Math.round(Math.max(0, val)).toLocaleString(); return {prefix}{display}{suffix}; } // — endless horizontal loop, double the children to seam function Marquee({ children, gap = 56, speed = 42, style }) { return (
{children}
); } // — magnetic: button shifts toward cursor within a small radius function MagButton({ as: As = 'button', strength = 16, style, className = '', children, ...rest }) { const ref = React.useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2, cy = r.top + r.height / 2; const dx = (e.clientX - cx) / (r.width / 2) * strength; const dy = (e.clientY - cy) / (r.height / 2) * strength; el.style.transform = `translate(${dx}px, ${dy}px)`; }; const onLeave = () => { if (ref.current) ref.current.style.transform = ''; }; return ( {children} ); } // — splits Japanese/Latin text into spans and fades each in function CharReveal({ text, delay = 0, step = 0.035, style }) { const chars = Array.from(text); return ( {chars.map((c, i) => ( {c} ))} ); } // PageCurtain — animates a thin ink sweep on page change. Skips first mount. function PageCurtain({ trigger }) { const ref = React.useRef(null); const first = React.useRef(true); React.useEffect(() => { if (first.current) { first.current = false; return; } if (trigger == null) return; const el = ref.current; if (!el) return; el.classList.remove('is-running'); void el.offsetWidth; // force reflow to restart anim el.classList.add('is-running'); }, [trigger]); return