RTL Text Reveal

Create an RTL staggered text reveal for a Hebrew headline. A large bold Hebrew headline inside a dir="rtl" container. Wrap each word in an overflow-hidden span; the inner word starts at translateY(110%) and rises to 0 over 0.6s with cubic-bezier(.22,1,.36,1). Stagger the words 0.12s apart in DOM order: with dir="rtl" this makes the reveal march from right to left, following the reading direction. Set the final (emphasized) word in the accent color, and after the words land, draw an accent underline bar beneath it: scaleX from 0 with transform-origin on the right edge (transform-origin: right), 0.45s. Below, a small monospace caption fades in last (0.3s) as a quieter second read. Keep it generic: accept any text and split it on spaces at runtime; never hardcode word widths. Trigger on mount or when scrolled into view (IntersectionObserver, threshold 0.4), and offer a replay. Accessibility: keep the full headline readable as one string for screen readers (aria-label on the container, aria-hidden on the split spans). If prefers-reduced-motion is set, show the headline and underline instantly. 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.