Speeding Text

Numbers or words that change with a speed blur

speeding-text-tw

,

Customize

Value

20000

Duration

2200

Blur Strength

1.00

Max Blur

Decimals

Font Size

Font Weight

700

Word Interval

1400

Swap Duration

520

Travel

Prefix

Suffix

Text

Background

ItalicShow SeparatorLoopPaused

Props

Name	Type	Default	Description
`value`	number	`20000`	Number the counter travels to.
`from`	number	`0`	Value the counter starts from.
`words`	string[]	`-`	Words cycled in place instead of counting.
`duration`	number	`2200`	Milliseconds the counter takes to reach the value.
`interval`	number	`1400`	Milliseconds each word is held before the next swap.
`swapDuration`	number	`520`	Milliseconds a word swap takes.
`travel`	number	`90`	Horizontal distance a swapping word travels, in pixels.
`decimals`	number	`0`	Decimal places kept on the counter.
`locale`	string	`"en-US"`	Locale used for digit grouping.
`prefix`	string	`""`	Text placed before the value.
`suffix`	string	`""`	Text placed after the value.
`blurStrength`	number	`1`	Multiplier on how readily speed turns into blur.
`maxBlur`	number	`14`	Upper bound on the blur radius in pixels.
`showSeparator`	boolean	`true`	Fade the group separators in as digits arrive.
`fontSize`	number	`96`	Font size in pixels.
`fontWeight`	number	`700`	Font weight.
`italic`	boolean	`true`	Slant the glyphs.
`textColor`	string	`"#0a0a0a"`	Colour of the glyphs.
`backgroundColor`	string	`"transparent"`	Colour behind the glyphs.
`align`	"left" \| "center" \| "right"	`"center"`	Horizontal placement inside the box.
`startOnView`	boolean	`true`	Hold the run until the element scrolls into view.
`loop`	boolean	`false`	Restart once the run finishes.
`loopDelay`	number	`900`	Milliseconds to wait before a looped restart.
`paused`	boolean	`false`	Freeze the animation.
`width`	string \| number	`"100%"`	Width of the container.
`height`	string \| number	`"100%"`	Height of the container.
`className`	string	`-`	Extra classes for the container.
`style`	CSSProperties	`-`	Inline styles for the container.

valuenumber

Number the counter travels to.

Default20000

fromnumber

Value the counter starts from.

Default0

wordsstring[]

Words cycled in place instead of counting.

Default-

durationnumber

Milliseconds the counter takes to reach the value.

Default2200

intervalnumber

Milliseconds each word is held before the next swap.

Default1400

swapDurationnumber

Milliseconds a word swap takes.

Default520

travelnumber

Horizontal distance a swapping word travels, in pixels.

Default90

decimalsnumber

Decimal places kept on the counter.

Default0

localestring

Locale used for digit grouping.

Default"en-US"

prefixstring

Text placed before the value.

Default""

suffixstring

Text placed after the value.

Default""

blurStrengthnumber

Multiplier on how readily speed turns into blur.

Default1

maxBlurnumber

Upper bound on the blur radius in pixels.

Default14

showSeparatorboolean

Fade the group separators in as digits arrive.

Defaulttrue

fontSizenumber

Font size in pixels.

Default96

fontWeightnumber

Font weight.

Default700

italicboolean

Slant the glyphs.

Defaulttrue

textColorstring

Colour of the glyphs.

Default"#0a0a0a"

backgroundColorstring

Colour behind the glyphs.

Default"transparent"

align"left" | "center" | "right"

Horizontal placement inside the box.

Default"center"

startOnViewboolean

Hold the run until the element scrolls into view.

Defaulttrue

loopboolean

Restart once the run finishes.

Defaultfalse

loopDelaynumber

Milliseconds to wait before a looped restart.

Default900

pausedboolean

Freeze the animation.

Defaultfalse

widthstring | number

Width of the container.

Default"100%"

heightstring | number

Height of the container.

Default"100%"

classNamestring

Extra classes for the container.

Default-

styleCSSProperties

Inline styles for the container.

Default-

Name

Type

Default

Description

value

number

20000

Number the counter travels to.

from

number

0

Value the counter starts from.

words

string[]

-

Words cycled in place instead of counting.

duration

number

2200

Milliseconds the counter takes to reach the value.

interval

number

1400

Milliseconds each word is held before the next swap.

swapDuration

number

520

Milliseconds a word swap takes.

travel

number

90

Horizontal distance a swapping word travels, in pixels.

decimals

number

0

Decimal places kept on the counter.

locale

string

"en-US"

Locale used for digit grouping.

prefix

string

""

Text placed before the value.

suffix

string

""

Text placed after the value.

blurStrength

number

1

Multiplier on how readily speed turns into blur.

maxBlur

number

14

Upper bound on the blur radius in pixels.

showSeparator

boolean

true

Fade the group separators in as digits arrive.

fontSize

number

96

Font size in pixels.

fontWeight

number

700

Font weight.

italic

boolean

true

Slant the glyphs.

textColor

string

"#0a0a0a"

Colour of the glyphs.

backgroundColor

string

"transparent"

Colour behind the glyphs.

align

"left" | "center" | "right"

"center"

Horizontal placement inside the box.

startOnView

boolean

true

Hold the run until the element scrolls into view.

loop

boolean

false

Restart once the run finishes.

loopDelay

number

900

Milliseconds to wait before a looped restart.

paused

boolean

false

Freeze the animation.

width

string | number

"100%"

Width of the container.

height

string | number

"100%"

Height of the container.

className

string

-

Extra classes for the container.

style

CSSProperties

-

Inline styles for the container.