Glyph Lottery

Letters that spin like slot reels and lock into a headline

glyph-lottery-tw

Customize

Text

Accent

Font Size

80px

Spin Speed

Duration

0.50s

Stagger

0.060s

Bounce

0.45

Blur

0.60

Fade

0.70

Flash

0.60

Interval

4.0s

Cycle WordsLoopFlickableClick To SpinSpin On Hover

Props

Name	Type	Default	Description
`text`	string	`"Your lucky number"`	The headline. Changing it rolls the reels to the new words, so it works as a rotating headline.
`as`	"span" \| "div" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	`"span"`	Element to render. Screen readers get the plain text.
`fontSize`	number \| string	`"clamp(2.75rem, 8vw, 6.5rem)"`	Font size. Numbers are pixels; strings accept any CSS length.
`fontWeight`	number	`700`	Font weight. The font family is inherited from the page.
`letterSpacing`	string	`"-0.03em"`	Letter spacing as a CSS length.
`lineHeight`	number	`1.1`	Line height, which is also the height of each reel's window.
`align`	"left" \| "center" \| "right"	`"center"`	Text alignment.
`color`	string	`inherited`	Text colour. Leave unset to inherit from the page.
`accentColor`	string	`"#B15CFF"`	Colour each letter flashes as its reel locks in, fading back to the text colour.
`charset`	string	`"auto"`	Glyphs on the reels. "auto" matches each letter: capitals spin through capitals, lowercase through lowercase, digits through digits, all picked to the same width. Any other string is used as-is.
`trigger`	"view" \| "mount" \| "manual"	`"view"`	When the first spin plays: as the headline scrolls into view, as soon as it mounts, or only through the ref.
`direction`	"left" \| "right" \| "center" \| "edges" \| "random"	`"left"`	Order the reels stop in.
`spinSpeed`	number	`22`	Glyphs per second while a reel spins at full speed.
`duration`	number	`0.5`	Seconds the reels spin before the first one stops.
`stagger`	number	`0.06`	Seconds between one reel stopping and the next.
`bounce`	number	`0.45`	How much a reel overshoots and settles as it locks in, from 0 to 1.
`blur`	number	`0.6`	Vertical motion blur on fast-spinning reels, from 0 to 1.
`fade`	number	`0.7`	Shading at the top and bottom of each reel window while it spins, from 0 to 1.
`flash`	number	`0.6`	Strength of the accent flash when a reel locks in, from 0 (none) to 1.
`loop`	boolean	`false`	Spin again every interval while the headline is on screen.
`interval`	number	`4`	Seconds between spins when loop is on.
`flickable`	boolean	`true`	Grab a letter and flick it up or down: its reel spins with your momentum and always lands back on the right letter. Mouse and pen only, so touch scrolling is never captured.
`clickToSpin`	boolean	`true`	Clicking or tapping the headline pulls the lever and spins every reel.
`spinOnHover`	boolean	`false`	Spin every reel when the pointer enters.
`onComplete`	() => void	`—`	Called when the last reel locks in.
`ref`	{ spin }	`—`	spin() pulls the lever from code.
`className`	string	`—`	Classes for the root element.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The headline. Changing it rolls the reels to the new words, so it works as a rotating headline.

Default"Your lucky number"

as"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Element to render. Screen readers get the plain text.

Default"span"

fontSizenumber | string

Font size. Numbers are pixels; strings accept any CSS length.

Default"clamp(2.75rem, 8vw, 6.5rem)"

fontWeightnumber

Font weight. The font family is inherited from the page.

Default700

letterSpacingstring

Letter spacing as a CSS length.

Default"-0.03em"

lineHeightnumber

Line height, which is also the height of each reel's window.

Default1.1

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

Text alignment.

Default"center"

colorstring

Text colour. Leave unset to inherit from the page.

Defaultinherited

accentColorstring

Colour each letter flashes as its reel locks in, fading back to the text colour.

Default"#B15CFF"

charsetstring

Glyphs on the reels. "auto" matches each letter: capitals spin through capitals, lowercase through lowercase, digits through digits, all picked to the same width. Any other string is used as-is.

Default"auto"

trigger"view" | "mount" | "manual"

When the first spin plays: as the headline scrolls into view, as soon as it mounts, or only through the ref.

Default"view"

direction"left" | "right" | "center" | "edges" | "random"

Order the reels stop in.

Default"left"

spinSpeednumber

Glyphs per second while a reel spins at full speed.

Default22

durationnumber

Seconds the reels spin before the first one stops.

Default0.5

staggernumber

Seconds between one reel stopping and the next.

Default0.06

bouncenumber

How much a reel overshoots and settles as it locks in, from 0 to 1.

Default0.45

blurnumber

Vertical motion blur on fast-spinning reels, from 0 to 1.

Default0.6

fadenumber

Shading at the top and bottom of each reel window while it spins, from 0 to 1.

Default0.7

flashnumber

Strength of the accent flash when a reel locks in, from 0 (none) to 1.

Default0.6

loopboolean

Spin again every interval while the headline is on screen.

Defaultfalse

intervalnumber

Seconds between spins when loop is on.

Default4

flickableboolean

Grab a letter and flick it up or down: its reel spins with your momentum and always lands back on the right letter. Mouse and pen only, so touch scrolling is never captured.

Defaulttrue

clickToSpinboolean

Clicking or tapping the headline pulls the lever and spins every reel.

Defaulttrue

spinOnHoverboolean

Spin every reel when the pointer enters.

Defaultfalse

onComplete() => void

Called when the last reel locks in.

Default—

ref{ spin }

spin() pulls the lever from code.

Default—

classNamestring

Classes for the root element.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"Your lucky number"

The headline. Changing it rolls the reels to the new words, so it works as a rotating headline.

as

"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

"span"

Element to render. Screen readers get the plain text.

fontSize

number | string

"clamp(2.75rem, 8vw, 6.5rem)"

Font size. Numbers are pixels; strings accept any CSS length.

fontWeight

number

700

Font weight. The font family is inherited from the page.

letterSpacing

string

"-0.03em"

Letter spacing as a CSS length.

lineHeight

number

1.1

Line height, which is also the height of each reel's window.

align

"left" | "center" | "right"

"center"

Text alignment.

color

string

inherited

Text colour. Leave unset to inherit from the page.

accentColor

string

"#B15CFF"

Colour each letter flashes as its reel locks in, fading back to the text colour.

charset

string

"auto"

Glyphs on the reels. "auto" matches each letter: capitals spin through capitals, lowercase through lowercase, digits through digits, all picked to the same width. Any other string is used as-is.

trigger

"view" | "mount" | "manual"

"view"

When the first spin plays: as the headline scrolls into view, as soon as it mounts, or only through the ref.

direction

"left" | "right" | "center" | "edges" | "random"

"left"

Order the reels stop in.

spinSpeed

number

22

Glyphs per second while a reel spins at full speed.

duration

number

0.5

Seconds the reels spin before the first one stops.

stagger

number

0.06

Seconds between one reel stopping and the next.

bounce

number

0.45

How much a reel overshoots and settles as it locks in, from 0 to 1.

blur

number

0.6

Vertical motion blur on fast-spinning reels, from 0 to 1.

fade

number

0.7

Shading at the top and bottom of each reel window while it spins, from 0 to 1.

flash

number

0.6

Strength of the accent flash when a reel locks in, from 0 (none) to 1.

loop

boolean

false

Spin again every interval while the headline is on screen.

interval

number

4

Seconds between spins when loop is on.

flickable

boolean

true

Grab a letter and flick it up or down: its reel spins with your momentum and always lands back on the right letter. Mouse and pen only, so touch scrolling is never captured.

clickToSpin

boolean

true

Clicking or tapping the headline pulls the lever and spins every reel.

spinOnHover

boolean

false

Spin every reel when the pointer enters.

onComplete

() => void

—

Called when the last reel locks in.

ref

{ spin }

—

spin() pulls the lever from code.

className

string

—

Classes for the root element.

style

CSSProperties

—

Inline styles for the root element.