Handwriting replay
A caligrafia que abre o site, reproduzida traço a traço.
Como funciona
Cada letra de “Aly” é um path SVG extraído da fonte Pacifico com
opentype.js. A fonte nunca é carregada como webfont: só os contornos
viajam no HTML.
O componente anima duas propriedades por glyph com Motion
(motion/react): pathLength desenha o contorno de 0 a 1 e, um pouco
depois, fillOpacity preenche a letra. Um atraso fixo entre as letras dá o
ritmo de escrita.
Por que contorno e não traço central
O efeito traça o contorno das letras, não uma linha central como o “hello” da Apple. Uma caligrafia de traço único precisaria de um SVG desenhado à mão, letra por letra. O contorno com preenchimento chega perto sem sair do código.