← Harakah Arabic MotionCONTENT HISTORY

Update to Harakah Arabic Motion

Snapshot Nov 5, 2026 · 01:19 UTC · version 0.5.1

Collection source: downloaded plugin package.

WHAT CHANGED

First saved snapshot

No earlier snapshot is available to establish a change.

Save Harakah Arabic Motion and check future changes in Following.

Up to 10 plugins free · no card required.

Compare saved observations

Download comparison JSON
Full technical diff · 0 changed fields
Full snapshot data
{
  "description": "Check and fix Arabic text in motion-graphics code (Remotion .tsx/.jsx, HyperFrames/GSAP/HTML, canvas, three.js) with the check_arabic and fix_arabic tools. Use when creating or editing a composition or animation that contains Arabic text, and before rendering one. Catches split letters, wrong direction, Latin-only fonts, letter spacing and mixed digits.",
  "included_files": [
    {
      "relative_path": "references/arabic-motion.md",
      "size_in_bytes": 6524
    }
  ],
  "name": "harakah",
  "skill_md_contents": "---\nname: harakah\ndescription: Check and fix Arabic text in motion-graphics code (Remotion .tsx/.jsx, HyperFrames/GSAP/HTML, canvas, three.js) with the check_arabic and fix_arabic tools. Use when creating or editing a composition or animation that contains Arabic text, and before rendering one. Catches split letters, wrong direction, Latin-only fonts, letter spacing and mixed digits.\nlicense: MIT\nmetadata:\n  homepage: https://harakah.si\n  package: harakah-fixer\n---\n\n# Harakah: Arabic motion fixer · حركة\n\nArabic letters join. Animation code that splits text into per-letter boxes (`text.split(\"\")`,\n`Array.from(text)`, SplitText `chars`, `inline-block` spans), forgets `dir=\"rtl\"`, uses Latin\nfonts, tracks letters apart, mixes digit styles or draws letters one by one on a canvas\n**renders as disconnected, backwards Arabic**. Harakah finds these and fixes them safely, and\nkeeps the per-letter animation.\n\n## Tools\n\n- `check_arabic { code, kind?, digits? }`: lists the Arabic problems in one file's code, with line numbers. Changes nothing.\n- `fix_arabic { code, kind?, digits?, split? }`: returns the repaired code plus a list of changes and anything left to fix by hand.\n\nSend the code of **one file** per call (an HTML/GSAP/HyperFrames page or one Remotion component, up to 200,000\ncharacters). `kind` is `html` or `remotion` and is detected when omitted. `digits` is `eastern` (default), `western` or `keep`.\n`split` is `zwj` (default, keeps letter boxes joined) or `word` (animate whole words).\nThe tools only see the code you send. Don't send files that hold secrets or personal data, and don't send code that has no Arabic in it.\n\n## Workflow\n\n1. **After writing or editing** a composition that contains Arabic, call `check_arabic` on that file's code.\n2. **If it reports problems,** call `fix_arabic` with the same code and give the user the fixed code (or apply it to the\n   file when you can edit files). The fix adds `harakah:` comments at every change. Keep them, since they explain the change.\n   - For Remotion, the fixed code may import `./harakah-arabic` (`splitArabic`, `formatDigits`, `ArabicText`). Tell the user to\n     get it from the `@harakah/remotion-arabic` package or by running `npx -y -p harakah-fixer@0.5.0 harakah-fix fix <project> --write`.\n   - Items under `remaining` weren't changed automatically. Edit them yourself following the message.\n3. **Check again** with `check_arabic` on the fixed code. Don't call a composition done, or tell the user it's safe to render,\n   while it still reports errors or warnings (`ok` is false).\n4. **Projects:** check the files that contain Arabic one at a time. On a computer with Node.js 22.12+, the user can check a whole\n   project and render before/after proof locally with `npx -y -p harakah-fixer@0.5.0 harakah-fix gate <project>` and\n   `harakah-fix compare <project>`.\n\nIf a tool call fails or returns an error, say so and don't claim the Arabic was checked.\n\n## Writing new Arabic compositions (do this from the start)\n\nRead [references/arabic-motion.md](references/arabic-motion.md) before writing Arabic motion: splitting, direction, letters in motion, sizes and timing, fonts, digits. The essentials:\n\n- Animate per letter with `splitArabic(text)` (keeps joining with ZWJ) or per **word**. Never use `text.split(\"\")` or `Array.from(text)`.\n- In Remotion, prefer `<ArabicText text=\"…\" by=\"letter|word\" />` from `harakah-arabic`.\n- `dir=\"rtl\"` and `lang=\"ar\"` on the Arabic container. Mixed Arabic+Latin lines: wrap Latin in `<bdi>`.\n- Motion follows reading order: staggers start on the right, reveals and entrances run right to left.\n- Canvas: one `fillText` per word with `ctx.direction = \"rtl\"`. three.js: troika-three-text / drei `<Text>` with an Arabic `.ttf` as `font`, never `TextGeometry` / `<Text3D>`.\n- Fonts (OFL): **Alexandria** for display, **IBM Plex Sans Arabic** for text. Don't use Latin-only fonts for Arabic.\n- No `letter-spacing`, `text-transform` or italics on Arabic. No `text-align: left`.\n- Digits: Eastern by default (`١٬٢٥٠٬٠٠٠`, using ٬ and ٫ separators). Don't mix Eastern and Western digits on one line.\n\nDocs and source: https://harakah.si.\n"
}

SHA-256 of public snapshot: 6118531a950f66567bb5616df91392bf12e7916050818c5b5b66f76794c38a1e