Loading the live preview…

More like this

Qalam Ink Hero

The real calligraphy font is drawn with its thick and thin intact, and uncovered through a mask that follows a reed pen. The pen strokes are worked out from the letters themselves: the phrase is rendered offscreen, split into connected pieces, thinned to a skeleton and walked the way a calligrapher writes, so any phrase a visitor types is written correctly: right to left, word by word, letter bodies first and then their dots, shadda and tanween. Ink goes down wet and glossy and dries behind the pen; a sheen crosses the gold when the phrase is done. Gold-on-night and black-ink-on-paper themes, phrase chips and a live input. Everything sits in one SVG viewBox, so resizing never moves a stroke off its letter; narrow stages write on two lines. One animation loop, only while writing; reduced motion shows the finished phrase. Uses the Aref Ruqaa font (SIL Open Font License).

Heroes
interaction
dark

Copy promptDownload source code

Get the prompt and source code

Buy this componentThis component and every future version of it.$19
Get all accessBest valueEvery component in the catalog, including new ones.$149

One-time payment · lifetime access

Checkout opens soon. Until then, every live preview is yours to try.

Details+

Identifier: qalam-ink-hero
Version: 1.0.0
License: Commercial license

Read the license