Text Animation

Zenora UI

Get Started

Text Animation·Typography

Rendering calligraphy...

npx zenora-ui-registry@latest add text-animation

Typography

117 views•102 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add text-animation

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A dynamic signature-style calligraphy text animation that draws glyph outlines in real-time using vector font parsing and stroke-dasharray SVG masking.

KEY FEATURES

·Dynamic opentype.js vector path extraction from TrueType and OpenType fonts
·Layered stroke-dasharray reveal masks with sequential stagger delays
·Fully customizable font size, animation duration, colors, and interactive replay

Props

7 properties

textstringZenora UI

Text string to render and animate.

descriptionstringDynamic calligrap…

Small tagline or description beneath the animated heading.

colorcolor#ffffff

Stroke and fill color of the text.

fontSizenumber54

Font size in pixels.

durationnumber1.6

Stroke drawing duration.

delaynumber0.1

Initial animation delay.

oncebooleanfalse

Whether to animate only once when in view.