RTL Number Counter
An animated stat inside a Hebrew sentence with correct bidi isolation
Create an RTL number counter with correct bidi handling. A bold Hebrew sentence (dir="rtl") with a live animated number embedded in the middle, e.g. 'יותר מ־1,250 קומפוננטות'. The number counts up from 0 to its target with an eased approach (each tick adds a fraction of the remaining distance plus a small constant, ~30ms per tick) so it starts fast and lands softly. The entire point is the bidi handling: the number lives in its own span with dir="ltr" and unicode-bidi: isolate, so digits and their thousands separators render left-to-right and never scramble the surrounding Hebrew: without isolation, a number with separators or a following % sign can shatter the sentence. Style that span in the accent color with a monospace face and font-variant-numeric: tabular-nums so the width stays steady while the digits roll and the sentence doesn't jitter. Use a hyphen-minus or maqaf correctly ('מ־' prefix) rather than relying on bidi luck, and format with toLocaleString for the separators. Trigger the count when the sentence scrolls into view (IntersectionObserver), and let it replay on demand. Accessibility: give the sentence an aria-label with the final value so screen readers hear one finished sentence, not a stream of intermediate numbers (aria-hidden on the live digits during the animation). If prefers-reduced-motion is set, render the final number immediately. 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.