Introduction Installation

Text based

Reveal Text Scramble Text Distort Text Squash Text Bouncing Text

Scroll based

Mouse Wave Text Reveal on Scroll Stagger on Scroll

Button

Text Fall Button Spring Button

Other

Draw Line Text Tilt Card Profile Peek

Flip Reveal Liquid Cursor

Components Blocks

Docs
Draw Line Text

Draw Line Text

A smooth text effect that draws characters as strokes and fills them in—perfect for headers and highlights.

Loading...

Installation

Examples

At once

Set oneByOne to false to animate all characters together without any stagger.

Loading...

Your Text

Loading...

Props

DrawLineText

Prop	Type	Default
text	string	-
afterFill	boolean	true
oneByOne	boolean	true
fontSize	number	40
wordSpacing	number	10
strokeWidth	number	1
letterSpacing	number	0
color	string	-

Previous

Spring Button

Next

Tilt Card

On this page

At once
Your Text

DrawLineText

Contribute

The source code is available on GitHub.