A font-to-motion experiment
Arabic fonts, stroke by stroke.
Pick a font. Follow the ink. Inspect the paths behind the animation.
- Google Fonts families
- 57
- Font & axis cases
- —
- Glyph checks
- —
These paths are inferred from font outlines, not recorded pen strokes. A complete ink mask is a mechanical check, not proof of correct calligraphy.
Selected typeface
Amiri
Loading font data…
Coverage, diagnostics & source data
The approach
Do the hard work once.
Play the result anywhere.
HarfBuzz shapes the text. A shared topology algorithm infers connected strokes, loops and pen lifts from the outlines. The compiler stores when each ink pixel should appear.
The player changes a progress value. It does not parse fonts or rebuild paths on every frame. React, Solid, Svelte, Vue and vanilla JavaScript all use the same renderer.
Try the working integrations →- 01
Shape
Contextual forms, positioning, bidi runs and ligatures.
- 02
Infer
One geometry-based algorithm. No hand-authored font profiles.
- 03
Compile
Small metadata + a reveal-time texture. Separate optional debug paths.
- 04
Play
A shared WebGL2 scene batches simultaneous instances.
Measure, don’t assume
Many instances. One canvas.
Run an eight-second test in this browser. The same asset is shared across a non-overlapping grid.
Results depend on display refresh rate, GPU, DPR and visible pixel area. Small grid cells are not equivalent to thousands of overlapping full-size headings. This is not a physical low-end device certification.
What to look for
A sentence is not a complete form test.
The connected specimen shows real shaping. The joining-form sheets separately force every applicable isolated, initial, medial and final form of the 28 core letters, plus hamza and alif variants. Non-joining letters do not have four forms. Marks, lam-alif and selected extended letters have their own specimen.
Some things cannot be read from an outline.
Pen order is not stored in a font. Decorative branches, filled counters, unusual ligatures and overlapping strokes can confuse the inference. Color fonts use their single-color base outlines here. Missing glyphs and blank outlines are reported, not silently replaced.
Zoom is an inspection tool, not extra resolution.
The original outline and centerlines are vectors. The animated ink is a compiled raster field. At large zoom you will see its pixel grid. Compile at a higher resolution for a larger final display.