Handwriting replay
The handwriting that opens the site, replayed stroke by stroke.
How it works
Every letter of “Aly” is an SVG path extracted from the Pacifico font
with opentype.js. The font is never loaded as a webfont: only the
outlines ship in the HTML.
The component animates two properties per glyph with Motion
(motion/react): pathLength draws the outline from 0 to 1 and, a moment
later, fillOpacity fills the letter in. A fixed delay between letters
sets the writing rhythm.
Why outlines and not a centerline
The effect traces the outline of each letter, not a centerline like Apple’s “hello”. A true single-stroke handwriting would need a hand-drawn SVG, letter by letter. Outline plus fill gets close without leaving code.