onOpen(item)} style={{ flex: "0 0 168px", scrollSnapAlign: "start", cursor: "pointer", transition: "transform 320ms var(--ease-cinematic)" }} onMouseEnter={e => e.currentTarget.style.transform = "translateY(-5px)"} onMouseLeave={e => e.currentTarget.style.transform = "none"}>

{item.poster && ( {item.title}

)} {item.date} {!item.poster && ( )} {item.mlabel}{yr}

{item.title}

{item.by &&

{item.by}

}

{item.rating === "repeat" ? on repeat : item.rating != null ? : logged}

); } const REVIEW_LIMIT = 260; function clampReview(text, limit = REVIEW_LIMIT) { if (!text) return { text: "", truncated: false }; if (text.length <= limit) return { text, truncated: false }; let cut = text.slice(0, limit); const lastSpace = cut.lastIndexOf(" "); if (lastSpace > limit * 0.6) cut = cut.slice(0, lastSpace); return { text: cut.replace(/[\s,.;:!?\-–—]+$/, "") + "…", truncated: true }; } function ReviewModal({ item, onClose }) { if (!item) return null; const showReadMore = item.medium !== "music"; const clamped = clampReview(item.review); return (

e.stopPropagation()} style={{ background: "var(--paper-bright)", width: "min(720px, 96vw)", maxHeight: "calc(100dvh - 48px)", overflow: "hidden", display: "grid", gridTemplateColumns: "minmax(0,0.8fr) minmax(0,1fr)", boxShadow: "0 30px 80px rgba(20,18,15,0.4)" }}>

{item.poster ? <> {item.title}

: }

Review · {item.mlabel}

{item.reviewTitle}

{[item.by, item.year, item.date].filter(Boolean).join(" · ")}

{item.rating === "repeat" ? on repeat : item.rating != null ? : Logged · {item.date}}

{item.review ?

{clamped.text}{clamped.truncated && continued on Letterboxd}

Logged without a written note.

} {showReadMore && (

{clamped.truncated ? "Read the full review on Letterboxd" : "Read more on Letterboxd"}

)}

); } function ScrobbleFeed() { const rows = [ ["Alex G", "Runner", "14:02 · today"], ["Blood Orange", "Charcoal Baby", "13:48 · today"], ["Sade", "Cherish the Day", "13:20 · today"], ["Frank Ocean", "Ivy", "12:55 · today"], ["Nilüfer Yanya", "Stabilise", "23:10 · 28 May"], ]; const Row = ([a, t, w], i) => (

{a} — {t} {w}

); return (

{rows.map(Row)}{rows.map(Row)}

); } function LiveRail() { return ( ); } function Archive() { const [sel, setSel] = React.useState(null); const [items, setItems] = React.useState(ARCHIVE_ITEMS); const reelRef = React.useRef(null); React.useEffect(() => { let alive = true; fetch("data/letterboxd.json") .then(r => (r.ok ? r.json() : Promise.reject(r.status))) .then(d => { if (alive && d && Array.isArray(d.items) && d.items.length) setItems(d.items); }) .catch(() => {}); return () => { alive = false; }; }, []); React.useEffect(() => { if (!sel) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [sel]); const nudge = (dir) => { const el = reelRef.current; if (el) el.scrollBy({ left: dir * 340, behavior: "smooth" }); }; const arrow = { width: 30, height: 30, lineHeight: 1, fontSize: 14, background: "transparent", border: "1px solid var(--rule-on-ink)", color: "var(--paper-on-ink)", cursor: "pointer", transition: "border-color 260ms var(--ease-soft), color 260ms var(--ease-soft)", }; return (

— Recently rated, from Letterboxd