arabify.iocalligraphy studio

Video generator

مُولِّد الفيديو

WebM keeps transparency and full quality. GIF is downscaled for sharing. MP4 export is on the way.

Guide

Animating Arabic calligraphy for social and video

Motion changes how a phrase is read — a line that writes itself right-to-left carries a completely different weight from one that zooms in. Here is how each effect behaves, how long to make the clip, and which format to export for where it is going.

The four effects, and when each one fits

Rewrite — the stroke travels right to left

The line reveals itself in the direction Arabic is actually written, which makes it the only effect here that is genuinely native to the script. It reads as a hand moving across the page, so it suits Qur’anic verses, du’a, poetry and anything where the act of writing is part of the meaning.

It is also the effect most sensitive to text length. A short phrase rewrites in two seconds and feels crisp; a long verse at the same duration flies past too fast to follow. Match the duration to the amount of text — roughly a second per short word is a good starting point — and preview the loop before exporting.

Fade — a soft rise from nothing

The most neutral option, and the safest when the calligraphy will sit over other footage or under a voiceover. It does not compete for attention, it never distorts the letterforms, and it works at any text length because the whole line resolves at once. If you are producing a batch of clips and want them to feel like a set, Fade is the one that stays out of the way.

Rise — moves up into place while fading in

Fade with a direction. The upward drift gives the phrase a sense of arrival that reads as confident and calm, which is why it works well for greetings, announcements and title cards — Eid Mubarak, Ramadan Kareem, a name reveal. It shares Fade’s tolerance for long text and adds just enough movement to hold a viewer for the first half second.

Zoom — eases up from a gentle scale

The most forceful of the four. Because the whole line scales, it commands the frame — good for a logo sting, an opening title, or a single powerful word. It is the worst choice for long text, since a full verse scaling up crosses the frame edges and the eye cannot settle. Keep Zoom for two or three words at a large size.

Getting the duration right

The duration slider runs from 1 to 8 seconds. Most clips that work land in a narrow band:

  • 1–2s — a logo sting or a single word. Fast enough to sit at the head of a longer edit without delaying it.
  • 2–3s — the sweet spot for a standalone social post. The phrase resolves, holds briefly, and loops before attention drifts.
  • 4–6s — a full verse in Rewrite, or a clip that has to sit under narration. Only go here when the text genuinely needs the time.
  • 7–8s — rarely right for a single static phrase. If you need this much time, you probably want several shorter clips cut together instead.

Every export holds on the settled frame after the animation completes, so the phrase is readable at the end of the clip rather than cutting the instant it lands. That hold is what makes the loop feel deliberate instead of jumpy.

WebM and GIF are not the same tool

The two export formats differ far more than the file extension suggests, and picking the wrong one is the most common source of disappointment.

  • WebM records at 30fps at the canvas’s full dimensions and preserves the alpha channel. If your background is transparent, the exported WebM is genuinely transparent — drop it over video in an editor and only the calligraphy shows. This is the file to keep.
  • GIF runs at 18fps, is downscaled to 640px wide, and is limited to a 256-colour palette. Smooth gradients band into visible steps and the motion is noticeably choppier. It exists for places that cannot play video at all.

A useful rule: export WebM as your master every time, then produce a GIF only if a specific destination demands it. Going the other way — trying to recover quality from a GIF — is not possible.

Designing for a transparent background

Transparency is the reason to use this studio rather than screen recording an animation. A few things to plan for:

  • Ink colour has to work against unknown footage. If you do not yet know what the clip will sit over, near-white or near-black ink is safer than a mid-tone, which can disappear against a background of similar luminance.
  • Shadows help enormously here. A soft shadow gives the calligraphy an edge against busy footage without needing a solid plate behind it.
  • Choose GIF and the transparency is effectively gone. GIF only supports one fully transparent colour, with no partial alpha, so antialiased edges pick up a visible fringe. For anything compositing over footage, WebM is not optional.

Sizing for each platform

The canvas presets carry over from the text studio, and the same placement logic applies to motion — with one addition. Vertical clips for Reels, Stories and TikTok have interface chrome over the top and bottom of the frame, and in motion that matters more than in a still: an animation that starts off-frame and rises into the safe area reads well, while one that settles under a caption bar is simply lost. Preview the loop before exporting and check where the phrase comes to rest, not just where it starts.

Before you export

Play the loop through at least twice. Watch for text that overflows mid-animation in Zoom, a Rewrite that finishes too early and leaves dead time, and diacritics that flicker as they resolve. All three are fixed on the canvas rather than in the encode — if it is wrong in the preview, it will be wrong in the file.

If you want the underlying phrase set perfectly before animating it, compose it in the text studio first, where the sizing and harakat controls are easier to judge in a still. For ideas on what to animate and how these clips perform, see our guide to animated Arabic calligraphy for social media.

Frequently asked questions

WebM or GIF — which should I export?

WebM for quality and for transparency: it records at 30fps at the canvas's full size and is the only format here that keeps an alpha channel, so the calligraphy can sit over other footage. GIF for compatibility: it is capped at 18fps and downscaled to 640px wide, and it is limited to 256 colours, so gradients band visibly. Use GIF only where a real video file will not play — chat apps, some email clients, older forums.

Why does my exported file look different from the preview?

The most common cause is switching browser tabs during the export. Recording runs off the live canvas in real time, so a backgrounded tab gets throttled by the browser and frames are dropped or duplicated. Start the export, leave the tab in the foreground, and wait for it to finish. A GIF will also look different by design — it is downscaled and colour-reduced.

Can I get an MP4?

Not directly yet — MP4 export is on the roadmap. For now, export the WebM and convert it, which most editors and free online converters do in seconds. If you are dropping the clip into a video editor anyway, import the WebM directly: Premiere, DaVinci Resolve, CapCut and Final Cut all read it, and going in via WebM preserves the transparency that an MP4 conversion would throw away.

Why is there no audio?

The studio records a canvas, not a timeline — there is no audio track at any point in the pipeline. Add music in your editor after export. This is usually what you want anyway, since the track you choose depends on the platform's licensing and on the rest of your edit.

Does the animation respect reduced-motion settings?

The site's own interface does — if your system requests reduced motion, Arabify's page transitions and hover effects stand down. The exported clip is a file you are deliberately creating, so it always animates as configured. If your audience may include people sensitive to motion, favour Fade over Zoom and keep the duration at the longer end.

How long should the clip be?

Between 2 and 3 seconds for a social post — long enough to read the phrase, short enough to loop cleanly. Push to 4–6 seconds only for long text in the Rewrite effect, where the stroke genuinely needs the time to travel. Anything past 6 seconds of a single static phrase will lose the viewer before it settles.