), this track — wider than its wrap via // `width:max-content` — right-aligns itself in normal flow instead of // left-aligning (the whole reason RTL boxes overflow to the left instead // of the right), so its untransformed left edge sits at a large NEGATIVE // offset, not 0. The old `wrap.clientWidth/2 - card.offsetLeft` formula // assumed a zero baseline, which is only true in LTR — in Arabic it threw // every card thousands of pixels off-screen, which is why the whole strip // was reported as "missing" there. Reading the track's actual on-screen // rect and subtracting whatever transform is already applied recovers // the real (direction-agnostic) baseline, same fix already used in // MobileShowcaseCinema's animateTrackTo for the identical reason. const centerCard = (idx, animate) => { const track = trackRef.current, wrap = wrapRef.current; const card = track && track.children[idx]; if (!track || !wrap || !card) return; const fromX = currentTrackX(); const cardCenterInTrack = card.offsetLeft + card.offsetWidth / 2; const trackRect = track.getBoundingClientRect(); const trackLeftUntransformed = trackRect.left - fromX; const cardCenterUntransformedX = trackLeftUntransformed + cardCenterInTrack; const wrapRect = wrap.getBoundingClientRect(); const targetX = wrapRect.left + wrapRect.width / 2 - cardCenterUntransformedX; track.style.transition = animate ? "transform 620ms cubic-bezier(0.22,1,0.36,1)" : "none"; track.style.transform = `translateX(${targetX}px)`; }; React.useLayoutEffect(() => { centerCard(trackIndex, true); }, [trackIndex]); // Toggling language does NOT remount this component (App.jsx keys the // page by route, not by lang), so switching en<->ar flips the ancestor's // `dir` attribute — and therefore this RTL-sensitive centering math's // whole baseline — without `trackIndex` changing. Without this, the // transform computed while still in English stayed applied verbatim // until the next autoplay tick (up to ~2.2s later) recalculated it, // which is exactly the window where the strip appeared to "vanish" right // after switching to Arabic. Re-snapping instantly (no transition) here // closes that window instead of just narrowing it. React.useLayoutEffect(() => { centerCard(trackIndex, false); }, [ar]); // trackIndex (an index into the tripled array, so it can keep climbing // past either real edge without ever hitting one) is this component's // own source of truth; the plain 0..n-1 index the parent needs (to seed // the cinema overlay at the right spot) just follows it. React.useEffect(() => { setActiveIndex(((trackIndex % n) + n) % n); }, [trackIndex, n, setActiveIndex]); const recenter = (idx) => { if (idx < Math.floor(n / 2)) return idx + n; if (idx >= n + Math.ceil(n / 2)) return idx - n; return idx; }; // Auto-advance — a plain setInterval (not rAF: this only ever needs to // fire once every few seconds, an rAF loop would just burn a frame // budget for nothing) — paused while reduced motion is requested, while // the cinema overlay is open above it, or while a card is mid-press. const [holding, setHolding] = React.useState(false); React.useEffect(() => { if (reduced || paused || holding) return; const id = setInterval(() => setTrackIndex((i) => recenter(i + 1)), 2200); return () => clearInterval(id); // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduced, paused, holding, n]); const goTo = (idx) => setTrackIndex(recenter(idx)); const activeItem = list[((trackIndex % n) + n) % n]; return (

setHolding(true)} onPointerUp={() => setHolding(false)} onPointerCancel={() => setHolding(false)} style={{ position: "relative", overflow: "hidden" }} >

{tripled.map((item, i) => { const diff = Math.abs(i - trackIndex); const isActive = diff === 0; const width = isActive ? cardW : neighborW; return (

(isActive ? onExplore(e.currentTarget.getBoundingClientRect()) : goTo(i))} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); isActive ? onExplore(e.currentTarget.getBoundingClientRect()) : goTo(i); } }} style={{ flex: `0 0 ${width}px`, position: "relative", cursor: "pointer", opacity: isActive ? 1 : 0.5, transform: `scale(${isActive ? 1 : 0.92})`, transition: "opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)", }} > {/* video only for cards actually on/near screen (diff<=1 — this component always shows exactly 3 at once) and never under reduced motion, so the other ~69 offscreen copies in the tripled track never mount a

); })}

{activeItem.title}

{ar ? "تصفّح" : "Swipe to browse"}

); } function MobileShowcaseCinema({ list, initialIndex, onClose, ar, reduced, setPage, originRect }) { const n = list.length; const tripled = React.useMemo(() => [...list, ...list, ...list], [list]); const [activeIndex, setActiveIndex] = React.useState(n + initialIndex); const [vw, setVw] = React.useState(() => window.innerWidth); const wrapRef = React.useRef(null); const trackRef = React.useRef(null); const dragRef = React.useRef(null); const leftPullRef = React.useRef(null); const rightPullRef = React.useRef(null); const leftHandPathRef = React.useRef(null); const rightHandPathRef = React.useRef(null); // Outer wrapper for each hand's whole entrance (opacity + descend), and // for Zone C's title/counter — distinct from the pull refs above, which // only ever carry the live puppet-spring transform. See the entrance // effect below for why these get written to directly instead of only // through the `entered` state that also drives their JSX style. const leftHandZoneRef = React.useRef(null); const rightHandZoneRef = React.useRef(null); const chromeZoneRef = React.useRef(null); // A fixed shared duration the track's own rAF animation and the hand // puppet's nav-pulse release both read, so the card settling and the // hands relaxing back to idle always land in the same frame instead of // drifting apart (one was a CSS-transition on the browser's own clock, // the other a physics spring on requestAnimationFrame — close but never // exactly co-timed, which is what could read as the hands "snapping" // slightly after the card had already stopped). const TRACK_ANIM_MS = 320; // The exact same puppet-spring rig PortfolioShowcase's desktop cinema // uses (applyHandFrame/ensurePuppetLoop/setPuppetTarget/triggerNavPulse, // and the same buildHandPath/fingerSweepValue/CARD_TRANSITION_MS module // constants it reads from) — ported rather than reinvented, per this // round's explicit instruction. Previously this component had its own // much simpler direct setHandPull(side, v) with no settle-back on a tap // (only drag ever moved it), which is exactly why tapping a neighboring // card left the hands completely frozen while the carousel changed // underneath them. The spring model fixes that for all three navigation // paths (drag, tap-right-neighbor, tap-left-neighbor) at once, since all // three now funnel through the same goTo() -> triggerNavPulse() call. const puppetRef = React.useRef({ left: { pull: 0, vel: 0, target: 0, fingerPulseStart: null, fingerPulseSign: 0, fingerSettled: true }, right: { pull: 0, vel: 0, target: 0, fingerPulseStart: null, fingerPulseSign: 0, fingerSettled: true }, raf: null, lastT: 0, }); const navPulseTimeoutRef = React.useRef(null); const applyHandFrame = (side, tMs) => { const st = puppetRef.current[side]; const wrap = (side === "left" ? leftPullRef : rightPullRef).current; if (!wrap) return; const dir = side === "left" ? 1 : -1; const p = st.pull; wrap.style.transform = `translate(${(dir * p * 20).toFixed(2)}px, ${(-Math.abs(p) * 9).toFixed(2)}px) rotate(${(dir * p * -8).toFixed(2)}deg) scale(${(1 + p * 0.05).toFixed(3)})`; wrap.style.setProperty("--hand-curl", `${(p * -24).toFixed(2)}deg`); const pathEl = (side === "left" ? leftHandPathRef : rightHandPathRef).current; if (pathEl) { const elapsed = st.fingerPulseStart == null ? Infinity : tMs - st.fingerPulseStart; if (elapsed <= FINGER_SWEEP_MS + MAX_FINGER_DELAY_MS) { const sign = st.fingerPulseSign; const index = sign * fingerSweepValue(elapsed) * 26; const middle = sign * fingerSweepValue(elapsed - 25) * 19; const ring = sign * fingerSweepValue(elapsed - 55) * 13; const pinky = sign * fingerSweepValue(elapsed - MAX_FINGER_DELAY_MS) * 8; pathEl.setAttribute("d", buildHandPath({ index, middle, ring, pinky })); st.fingerSettled = false; } else if (!st.fingerSettled) { pathEl.setAttribute("d", INK_HAND_PATH); st.fingerSettled = true; } } }; const ensurePuppetLoop = () => { if (reduced) return; const st = puppetRef.current; if (st.raf) return; const SPRING_K = 170, SPRING_DAMPING = 15; st.lastT = performance.now(); const tick = (t) => { const dt = Math.min(0.05, (t - st.lastT) / 1000); st.lastT = t; ["left", "right"].forEach((side) => { const s = st[side]; const accel = -SPRING_K * (s.pull - s.target) - SPRING_DAMPING * s.vel; s.vel += accel * dt; s.pull += s.vel * dt; applyHandFrame(side, t); }); st.raf = requestAnimationFrame(tick); }; st.raf = requestAnimationFrame(tick); }; const setPuppetTarget = (side, target) => { puppetRef.current[side].target = target; ensurePuppetLoop(); }; const triggerNavPulse = (dominantSide) => { if (reduced) return; const counterSide = dominantSide === "left" ? "right" : "left"; setPuppetTarget(dominantSide, 1); setPuppetTarget(counterSide, -0.32); const fst = puppetRef.current[dominantSide]; fst.fingerPulseStart = performance.now(); fst.fingerPulseSign = -1; if (navPulseTimeoutRef.current) window.clearTimeout(navPulseTimeoutRef.current); navPulseTimeoutRef.current = window.setTimeout(() => { setPuppetTarget(dominantSide, 0); setPuppetTarget(counterSide, 0); navPulseTimeoutRef.current = null; }, TRACK_ANIM_MS); }; React.useEffect(() => { ensurePuppetLoop(); }, [reduced]); React.useEffect(() => { return () => { if (puppetRef.current.raf) cancelAnimationFrame(puppetRef.current.raf); if (navPulseTimeoutRef.current) window.clearTimeout(navPulseTimeoutRef.current); }; }, []); React.useEffect(() => { const onResize = () => setVw(window.innerWidth); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); // Lock page scroll while the cinema is open — this is a full-screen // takeover, not content sitting inline in the normal page flow. React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, []); const cardW = Math.round(Math.min(300, vw * 0.66)); const neighborW = Math.round(cardW * 0.62); const gap = 18; const step = cardW + gap; const currentTrackX = () => { if (!trackRef.current) return 0; const t = getComputedStyle(trackRef.current).transform; if (t === "none") return 0; return new DOMMatrixReadOnly(t).m41; }; // ---- rAF-driven track settle, replacing the old CSS-transition-based // centerCard ----------------------------------------------------------- // All of this animation's geometry reads (offsetLeft/getBoundingClientRect, // still needed for the same RTL-safety reason the old centerCard's own // comment explained below) happen exactly ONCE, right when a new // animation starts — never per frame, and never during a drag — so the // frame loop itself is pure writes (transform only). Driving this on the // SAME requestAnimationFrame clock as the hand puppet spring above (both // now use performance.now()-based elapsed time against TRACK_ANIM_MS) // is what keeps "the card settles" and "the hands finish relaxing" // landing on the same frame, addressed by this task's "keep the hands // and carousel synchronized to ONE transition progress value." const trackAnimRef = React.useRef(null); const stopTrackAnim = () => { if (trackAnimRef.current) { cancelAnimationFrame(trackAnimRef.current); trackAnimRef.current = null; } }; const animateTrackTo = (idx, animate) => { const track = trackRef.current, wrap = wrapRef.current; const card = track && track.children[idx]; if (!track || !wrap || !card) return; stopTrackAnim(); // offsetLeft is always a physical (LTR) measurement even under // dir="rtl" (this whole cinema renders inside

in // Arabic), so it has to be combined with the track's own current // ON-SCREEN left edge (its rect minus whatever translateX is already // applied) rather than assumed to start flush with the wrap — the same // absolute-coordinate approach the desktop showcase's centerCard uses // for the identical reason. Using wrap.clientWidth/2 directly (ignoring // the track's real screen position) landed thousands of pixels off in // RTL specifically, since a plain block child's rendered position // relative to its container isn't guaranteed to be the untransformed // left edge once cross-browser RTL box alignment is in play. const fromX = currentTrackX(); const cardCenterInTrack = card.offsetLeft + card.offsetWidth / 2; const trackRect = track.getBoundingClientRect(); const trackLeftUntransformed = trackRect.left - fromX; const cardCenterUntransformedX = trackLeftUntransformed + cardCenterInTrack; const wrapRect = wrap.getBoundingClientRect(); const toX = wrapRect.left + wrapRect.width / 2 - cardCenterUntransformedX; track.style.transition = "none"; if (!animate || reduced || Math.abs(toX - fromX) < 0.5) { track.style.transform = `translateX(${toX}px)`; return; } // Plain cubic ease-out (decelerate only, no overshoot) — a fixed- // duration bounce-free curve is what actually reads as "fast and // responsive" rather than "abrupt snap" once it settles. const start = performance.now(); const ease = (t) => 1 - Math.pow(1 - t, 3); const tick = (now) => { const t = Math.min(1, (now - start) / TRACK_ANIM_MS); track.style.transform = `translateX(${fromX + (toX - fromX) * ease(t)}px)`; trackAnimRef.current = t < 1 ? requestAnimationFrame(tick) : null; }; trackAnimRef.current = requestAnimationFrame(tick); }; // Snaps to position with no animation on the very first mount (the // cinematic ENTER transition below owns that motion instead, via the // active card's own FLIP transform — animating the whole track's // translateX at the same time would fight it); every real navigation // afterward animates normally. const mountedTrackRef = React.useRef(false); React.useLayoutEffect(() => { animateTrackTo(activeIndex, mountedTrackRef.current); mountedTrackRef.current = true; }, [activeIndex]); React.useEffect(() => () => stopTrackAnim(), []); const recenter = (idx) => { if (idx < Math.floor(n / 2)) return idx + n; if (idx >= n + Math.ceil(n / 2)) return idx - n; return idx; }; // Mirrors PortfolioShowcase's own desktop goTo exactly: figure out which // physical screen direction the card is actually leaving toward (flipped // under RTL, same as desktop) and fire the nav pulse BEFORE the index // changes, so the same hand response fires whether this came from a // drag release, a tap on the right neighbor, or a tap on the left one — // all three call this one function. const goTo = (idx) => { const logicalSign = Math.sign(idx - activeIndex); if (logicalSign !== 0) { const dir = ar ? -logicalSign : logicalSign; triggerNavPulse(dir === 1 ? "right" : "left"); } setActiveIndex(recenter(idx)); }; const DRAG_THRESHOLD_PX = 6; // Pointermove can fire faster than the display actually refreshes on // some devices; writing straight to the DOM on every single event (the // previous implementation) means the main thread can be asked to lay // out/paint more often than it can actually show anything new. Only the // LATEST dx before the next paint matters, so a pending rAF just gets // its target dx replaced rather than a fresh write firing per event. const dragFrameRef = React.useRef(null); const onPointerDown = (e) => { stopTrackAnim(); dragRef.current = { startX: e.clientX, dx: 0, baseX: currentTrackX(), dragging: false, pointerId: e.pointerId }; }; const applyDragFrame = () => { dragFrameRef.current = null; const d = dragRef.current; if (!d || !d.dragging || !trackRef.current) return; trackRef.current.style.transition = "none"; trackRef.current.style.transform = `translateX(${d.baseX + d.dx}px)`; const dragIntent = ar ? d.dx : -d.dx; const t = Math.max(-1, Math.min(1, dragIntent / 160)); setPuppetTarget("right", t >= 0 ? Math.abs(t) : -Math.abs(t) * 0.32); setPuppetTarget("left", t >= 0 ? -Math.abs(t) * 0.32 : Math.abs(t)); }; const onPointerMove = (e) => { const d = dragRef.current; if (!d) return; d.dx = e.clientX - d.startX; if (!d.dragging) { if (Math.abs(d.dx) < DRAG_THRESHOLD_PX) return; d.dragging = true; if (wrapRef.current) wrapRef.current.setPointerCapture && wrapRef.current.setPointerCapture(d.pointerId); } if (dragFrameRef.current == null) dragFrameRef.current = requestAnimationFrame(applyDragFrame); }; const endDrag = () => { if (dragFrameRef.current != null) { cancelAnimationFrame(dragFrameRef.current); dragFrameRef.current = null; } if (!reduced) { setPuppetTarget("left", 0); setPuppetTarget("right", 0); } const d = dragRef.current; dragRef.current = null; if (!d) return; if (!d.dragging) return; const rawSteps = (ar ? d.dx : -d.dx) / step; const stepDelta = Math.round(rawSteps); if (stepDelta !== 0) goTo(activeIndex + stepDelta); else animateTrackTo(activeIndex, true); }; const openWork = () => setPage("Work"); const active = list[((activeIndex % n) + n) % n]; // ---- Cinematic ENTER / EXIT choreography ----------------------------- // `entered` starts true when there's nothing to animate FROM (reduced // motion, or this cinema opened without a captured origin card) — the // dialog just appears with its existing plain fade, exactly as before. // Otherwise it flips true once the origin-card FLIP transform (below) // has been armed, which is what reveals the hands/title stagger. const [entered, setEntered] = React.useState(!originRect || reduced); const [closing, setClosing] = React.useState(false); const closeTimeoutRef = React.useRef(null); React.useLayoutEffect(() => { if (reduced || !originRect) return; const card = trackRef.current && trackRef.current.children[activeIndex]; if (!card) { setEntered(true); return; } // By this point the mount-time animateTrackTo(activeIndex, false) two // effects up has already snapped the track to its resting, centered // position (effects fire in declaration order within one commit), so // this card's rect IS its true final on-screen position — the FLIP // "first/last" measurement needs nothing more than this one read. const finalRect = card.getBoundingClientRect(); const dx = (originRect.left + originRect.width / 2) - (finalRect.left + finalRect.width / 2); const dy = (originRect.top + originRect.height / 2) - (finalRect.top + finalRect.height / 2); const scale = Math.max(0.12, Math.min(1, originRect.width / Math.max(1, finalRect.width))); card.style.transition = "none"; card.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`; card.style.opacity = "0.7"; // Reading layout back here forces the browser to commit the origin // pose as its own frame before the transition-to-rest is requested — // without it, both style writes can coalesce into a single frame and // the animation never plays at all. void card.getBoundingClientRect(); requestAnimationFrame(() => { card.style.transition = "transform 620ms cubic-bezier(0.16,1,0.3,1), opacity 420ms ease"; card.style.transform = "translate(0px, 0px) scale(1)"; card.style.opacity = "1"; // Write the hands'/title's own "shown" styles straight to the DOM // here too, in the SAME frame as the card's transition-to-rest, // rather than relying solely on the `setEntered(true)` below. That // state update's DOM effect only lands once React re-renders and // commits — and on a first mount this heavy (a freshly-mounted // dialog with its ~80-item tripled carousel track) competing with // the transition just kicked off above, that commit could lag a // frame or more behind. That lag is what read as the scene // freezing and the hands then suddenly popping in rather than // descending smoothly: the card would already be mid-flight while // the hands were still sitting at their pre-entrance (hidden) // style, waiting on a render that hadn't landed yet. Setting the // same target styles directly means the hands start moving in this // exact frame regardless of how long React then takes to catch up // — its later re-render (once `entered` flips) just reaffirms the // identical values, so there's nothing for it to visibly change. const handTransitionNow = "opacity 380ms ease 160ms, transform 420ms cubic-bezier(0.22,1,0.36,1) 160ms"; const chromeTransitionNow = "opacity 380ms ease 260ms, transform 380ms cubic-bezier(0.22,1,0.36,1) 260ms"; if (leftHandZoneRef.current) { leftHandZoneRef.current.style.transition = handTransitionNow; leftHandZoneRef.current.style.opacity = "1"; leftHandZoneRef.current.style.transform = "translateY(0px) scale(0.72) rotate(-13deg)"; } if (rightHandZoneRef.current) { rightHandZoneRef.current.style.transition = handTransitionNow; rightHandZoneRef.current.style.opacity = "1"; rightHandZoneRef.current.style.transform = "translateY(0px) scale(0.72) rotate(13deg)"; } if (chromeZoneRef.current) { chromeZoneRef.current.style.transition = chromeTransitionNow; chromeZoneRef.current.style.opacity = "1"; chromeZoneRef.current.style.transform = "translateY(0px)"; } setEntered(true); }); // Deliberately mount-only: this is a one-shot entrance, never re-armed // by a later activeIndex change. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Closing plays the reverse beat (hands retreat, title fades, the active // card eases back down) before actually telling the parent to unmount — // so scroll-lock cleanup (the effect above) still only ever fires once // the dialog is truly gone, never mid-animation. const requestClose = () => { if (reduced) { onClose(); return; } setClosing(true); closeTimeoutRef.current = window.setTimeout(onClose, 520); }; React.useEffect(() => () => { if (closeTimeoutRef.current) window.clearTimeout(closeTimeoutRef.current); }, []); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") requestClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const showChrome = entered && !closing; const handTransition = reduced ? "none" : closing ? "opacity 280ms ease, transform 320ms cubic-bezier(0.3,0,0.6,1)" : "opacity 380ms ease 160ms, transform 420ms cubic-bezier(0.22,1,0.36,1) 160ms"; const chromeTransition = reduced ? "none" : closing ? "opacity 240ms ease, transform 280ms ease" : "opacity 380ms ease 260ms, transform 380ms cubic-bezier(0.22,1,0.36,1) 260ms"; return (