// ─── TranslateBook ─────────────────────────────────────────────────────── // Better product experience: Iris doesn't try to paint English onto the // Arabic letterforms (like a consumer AR app). It gives you ONE calm glass // card sitting over the book with the full passage translated — same // treatment as every other scene. The book stays the book; Iris stays a // quiet lens. // // Timing: // 0.00 – 0.10 book alone, chip says "Arabic · detected" // 0.10 – 0.22 chip swings to "Translating", card scales up & fades in // 0.22 – 0.90 card holds, reading time // 0.90 – 1.00 card and chip fade out, book alone again function TranslateBook() { const [t, setT] = React.useState(0); const raf = React.useRef(null); const startRef = React.useRef(null); const DURATION = 9.0; React.useEffect(() => { const tick = (ts) => { if (startRef.current === null) startRef.current = ts; const elapsed = ((ts - startRef.current) / 1000) % DURATION; setT(elapsed); raf.current = requestAnimationFrame(tick); }; raf.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf.current); }, []); const u = t / DURATION; const chipOp = interp(u, [0.02, 0.10, 0.95, 1.00], [0, 1, 1, 0]); // Card: fade + lift in, hold, fade out. const cardOp = interp(u, [0.12, 0.22, 0.88, 0.96], [0, 1, 1, 0]); const cardLift = interp(u, [0.12, 0.22], [8, 0]); return ( <> {/* Very subtle vignette so the glass card has presence */}
); } // ─── The translation card ─────────────────────────────────────────────── // One dark-glass card, centered over the open book. Same visual language // as HUDGlass: rgba(20,14,10,0.52), warm-white text, amber accent, blur. // A small Instrument-Serif pull-quote anchors the top; body text runs in // Instrument Sans. Feels like Iris surfacing the meaning, not OCR paint. function TranslationCard({ opacity, lift }) { if (opacity <= 0.01) return null; return (
{/* Eyebrow: page reference — matches HUDGlass eyebrow style */}
Page 112–113 · translated
{/* Pull quote — the one line Iris thinks matters most */}
"The joy we searched for was inside us all along."
{/* Body — full passage, quietly typeset */}

There are moments when we realize we've been running after shadows, chasing people, dreams, and goals, thinking they hold the key to our happiness. When we finally reach them, we find the joy was inside us all along.

There will always be challenges, days when nothing goes as planned. But these moments are not the end. They are the journey, shaping us, preparing us for something greater.

{/* Meta footer — thin rule + small tech detail */}
Arabic → English Look away to dismiss
); } // ─── Chip ──────────────────────────────────────────────────────────────── function TranslateChip({ opacity, state }) { if (opacity <= 0.01) return null; const label = state === "idle" ? "Arabic · detected" : state === "translating" ? "Translating" : "Arabic → English"; return (
ar → en {label}
); } function BrandCorner() { return (
Iris
); } function chipState(u){ if (u < 0.12) return "idle"; if (u < 0.30) return "translating"; return "done"; } function interp(t, xs, ys){ if (t <= xs[0]) return ys[0]; for (let i = 0; i < xs.length - 1; i++){ if (t >= xs[i] && t <= xs[i+1]){ const p = (t - xs[i]) / (xs[i+1] - xs[i]); return ys[i] + p * (ys[i+1] - ys[i]); } } return ys[ys.length - 1]; } window.TranslateBook = TranslateBook;