Shape-Safe Reveal

Most text-animation components works the same way: it replaces your text with one <span> per character, then animates each span.

That destroys Arabic. Letters are cursive - they change shape depending on their neighbours - and wrapping each one in its own element breaks the join. A headline that reads نص عربي متصل comes out as disconnected letterforms. It is not a styling problem and there is no CSS that fixes it.

The same splitting quietly damages Latin too. Display faces lose their fi and ffl ligatures. Emoji sequences fall apart into their component parts - a family becomes four separate people, a flag becomes two letters.

This component never splits your text. It measures where each letter landed after the font shaped the whole line, then animates a CSS mask across the intact text. The shaping you see is the shaping the browser produced.

Because the text stays one node, screen readers read one string instead of forty spans, and the markup stays clean for crawlers.

• Direction detected from your content - paste Arabic, it flips

• Letter-by-letter reveal, without letter-by-letter markup

• Scroll, load or hover triggers

• Respects prefers-reduced-motion

• No dependencies, nothing added to your page weight

Need word and line reveals, a typewriter that re-shapes as it types, or a counter with Arabic-Indic numerals? Those are in Shape-Safe Text Kit.