Signature

SVG text traced from an OpenType font with stroke reveal animation and optional in-view trigger.

Assinatura vectorial gerada a partir de uma fonte OpenType (opentype.js): traço animado com pathLength, máscara de revelação e preenchimento. Por defeito tenta carregar LastoriaBoldRegular.otf a partir de /LastoriaBoldRegular.otf (coloca o ficheiro em public na app Next), caminhos relativos ou URL pública; podes forçar com fontUrl.

Respeita prefers-reduced-motion (assinatura sem animação longa). O componente está em @zexon/ui/components/signature e usa motion/react.

Importação

import {
	Signature,
	type SignatureProps,
} from "@zexon/ui/components/signature";

Uso

Exemplo

Só animar em vista

Com inView

Props

Prop	Tipo	Predefinição	Notas
`text`	`string`	`"Signature"`	Conteúdo textual desenhado como traço
`color`	`string`	`currentColor`	Cor do traço e do preenchimento
`fontSize`	`number`	`32`	Escala dos glifos em px
`duration`	`number`	`1.5`	Duração da animação por segmento (s)
`delay`	`number`	`0`	Atraso inicial (s)
`inView`	`boolean`	`false`	Se `true`, anima ao entrar na vista
`once`	`boolean`	`true`	Com `inView`: anima só uma vez
`fontUrl`	`string`	—	URL da fonte; se omitido, usa lista de caminhos predefinidos

Demais props repassam-se ao motion.svg (className, style, etc.).

Sheet

Sidebar