component
Shape Safe Text Kit
By Awaad

Details
- AwaadAuthor
- componentType
- $12.00Price
- 2026-09-11Published
- 2026-09-11Updated
- 2026-09-11Added
- TextCategories
Summary
keeps Arabic/Cursive joined.
Description
Five text-animation tools built on one idea: never damage the text to move it. REVEAL - letter, word or whole-line reveals, with five sweep directions and softness control. A mask moves across text that was never split, so cursive joining survives. MOTION - words or whole lines fade, slide on either axis, tilt, blur or scale. Entry and exit run on separate scroll ranges, so a headline can play in on load and scrub out as the reader passes it. ASSEMBLE - letters fly in individually and join on landing. Instead of rendering isolated letterforms, which are different glyphs and often wider, each moving piece is a crop of the fully shaped text. So لـ stays لـ, the line does not reflow. TYPEWRITER - grows a single string rather than appending character spans, so Arabic letters visibly connect to each other as they arrive. The caret sits on the correct side automatically. Loop through multiple phrases or scrub with the scroll. COUNTER - counts up with locale-aware numerals. Use Arabic ٠ ١ ٢ ٣, Persian ۰ ۱ ۲ ۳ or Latin digits, with selectable grouping and decimal separators. The usual per-character animation technique wraps letters in separate elements. For Arabic, that breaks cursive joining and turns connected words into isolated letterforms. It can also decompose Latin ligatures and split emoji sequences into their parts. • Direction detected from content, or set it yourself • Scroll, scrub, load and hover triggers, with named scroll ranges and full anchor control • Reading, visual or random stagger • Respects prefers-reduced-motion • Prevents the finished state from flashing before the animation starts. Tested across fourteen scripts - Arabic, Persian, Urdu, Syriac, Adlam, Hebrew, Devanagari, Thai, plus emoji sequences and ligature-heavy Latin - in Chrome, Firefox and Safari, on desktop and mobile. One note on tight leading: very small line heights can clip deep descenders during a reveal. Raise line height slightly if you see it.
Introduction
keeps Arabic/Cursive joined.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #2335