// primitives.jsx — Reusable building blocks for the cinema site. // StillPlaceholder, GrainOverlay, RevealOnScroll, CustomCursor, Marquee, FilmFrame. // ── Still / image placeholders ───────────────────────────────────────────── // All imagery is placeholder — subtly-striped frames with monospace caption. function StillPlaceholder({ ratio = "2.35", label = "still", tone = "warm", src, objectPosition = "center", className = "", style = {} }) { const aspect = ratio === "1.0" ? "1 / 1" : ratio === "2.35" ? "2.35 / 1" : ratio === "2.39" ? "2.39 / 1" : ratio === "1.66" ? "1.66 / 1" : ratio === "16/9" ? "16 / 9" : ratio; const stripes = tone === "cool" ? "repeating-linear-gradient(135deg, rgba(26,34,48,.85) 0 28px, rgba(46,75,107,.7) 28px 56px)" : tone === "dark" ? "repeating-linear-gradient(135deg, rgba(14,13,10,.9) 0 28px, rgba(44,39,33,.7) 28px 56px)" : "repeating-linear-gradient(135deg, rgba(44,39,33,.9) 0 28px, rgba(138,107,74,.55) 28px 56px)"; return (
{src ? ( {label} ) : (<>
◎ img {ratio}
{label}
)}
); } // ── Video clip placeholder (BTS clips etc) ───────────────────────────────── function ClipPlaceholder({ label, duration, tone = "warm" }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", cursor: "none" }} >
{duration}
); } // ── Grain / film texture overlay ─────────────────────────────────────────── function GrainOverlay({ intensity = 0.12 }) { // Animated grain via CSS; SVG turbulence driven by a keyframe return ( <>
")', backgroundSize: "240px 240px", animation: "grain 1.2s steps(6) infinite", }} /> ); } // ── Fade / slide in on scroll ────────────────────────────────────────────── function RevealOnScroll({ children, delay = 0, y = 24, as: Tag = "div", ...rest }) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } }, { threshold: 0.12, rootMargin: "0px 0px -50px 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } // ── Custom cinema cursor ─────────────────────────────────────────────────── function CustomCursor() { const hoverCapable = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover)").matches; if (!hoverCapable) return null; const dotRef = React.useRef(null); const ringRef = React.useRef(null); const [label, setLabel] = React.useState(""); const [hover, setHover] = React.useState(false); React.useEffect(() => { let rx = 0, ry = 0, dx = 0, dy = 0, raf; const onMove = (e) => { dx = e.clientX; dy = e.clientY; const t = e.target.closest("[data-cursor]"); if (t) { setHover(true); setLabel(t.getAttribute("data-cursor") || ""); } else { setHover(false); setLabel(""); } }; const tick = () => { rx += (dx - rx) * 0.18; ry += (dy - ry) * 0.18; if (dotRef.current) dotRef.current.style.transform = `translate(${dx}px,${dy}px)`; if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px,${ry}px)`; raf = requestAnimationFrame(tick); }; window.addEventListener("mousemove", onMove); raf = requestAnimationFrame(tick); return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); }; }, []); return ( <>
{hover ? label : ""}
); } // ── Marquee strip (for festival names etc) ───────────────────────────────── function Marquee({ items, speed = 60 }) { const content = [...items, ...items, ...items]; return (
{content.map((t, i) => ( {t} ✦ ))}
); } // ── Section kicker (eyebrow label) ───────────────────────────────────────── function Kicker({ index, label, style = {} }) { return (
{index && [{index}]} {label}
); } Object.assign(window, { StillPlaceholder, ClipPlaceholder, GrainOverlay, RevealOnScroll, CustomCursor, Marquee, Kicker, });