Speeding Text

Text that stretches and smears as it races past the viewport

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-