RTL Page Transition

Create a right-to-left page transition (for Hebrew or Arabic interfaces). Demo frame: a mini app window with dir="rtl": a header with a 3-tab nav (in RTL the first tab sits on the right) and a content area below. The active tab is marked by a 2px accent underline that slides between tabs with a spring (use a shared layout animation, stiffness 420, damping 32). Navigation animates in the reading direction: the outgoing page slides out to the right (+28px) while fading, and the incoming page enters from the left (-28px to 0) with a 0.32s cubic-bezier(.22,1,.36,1) ease: the mirror image of an LTR transition, so forward motion follows the RTL reading flow. Inside the incoming page, the heading, an accent chip, and the text lines stagger in 0.05s apart with a 6px rise. Important: never hardcode left/right margins or offsets in the page layout: use logical properties (margin-inline-start, inset-inline-end, padding-inline) so everything flips correctly with dir. Accessibility: the nav uses aria-current="page" on the active tab, and page changes are announced through a visually-hidden aria-live="polite" region. If prefers-reduced-motion is set, swap pages with a plain 0.15s crossfade and no slide. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.