arabic-motion-typography

Topics in the source

• Arabic Motion Typography
• 1. Hard rules (break these and the text breaks)
• 2. Fonts that animate well
• 3. Remotion recipe: word-by-word reveal, RTL
• Mask reveal from the right (RTL wipe)
• Speech-synced (karaoke) highlight
• 4. HTML / GSAP
• 5. Direction of motion

Most motion tools and tutorials assume Latin text. Applied to Arabic, the usual tricks break letter joining and reading order. Follow these rules, and use motion-design / remotion-motion-graphics for general motion taste (easing, timing). 1. Animate words, never letters. Splitting Arabic into characters (split(''), GSAP SplitText chars) breaks the joined shapes. Split by spaces only. 2. No letter-spacing on Arabic. It disconnects letters. For stretching, use kashida (ـ) deliberately, or scale the word. 3. Set direction. Containers get direction: rtl (CSS) / dir="rtl" (HTML). In flex rows, direction: rtl makes word 1 sit on the right. 4. Isolate mixed text, and keep English runs together. English words and numbers inside Arabic: wrap in or unicode-bidi: isolate so they don't reorder the line. Never animate consecutive English words as separate items: in an RTL row each item is placed right-to-left, so «Claude Code» renders as «Code Claude». Merge runs of non-Arabic words into one token first (tokenize() below). 5. Leave room for marks. Arabic has tall ascenders and diacritics. Use line-height ≥ 1.5, and add vertical padding to any overflow: hidden / mask (≥ 0.25em) or dots and marks

This is an excerpt. Refer to the complete source and its current requirements.