Text Cube

A 3D cube of text that follows the cursor

text-cube-tw

Customize

Word

Charset

Color

Accent

Background

Font Weight

300

Font Size

18px

Cube Size

280px

Density

Perspective

700px

Shading

0.60

Depth Fade

0.30

Depth Tint

0.50

Glow

0.35

Rotation Speed

1.00

Auto Rotate X

0.30

Auto Rotate Y

0.30

Breathe

0.10

Follow Speed

0.08

Roll

0.35

Inertia

1.00s

Scramble

1.10s

Shuffle

0/s

UprightInteractiveIntroPaused

Props

Name	Type	Default	Description
`word`	string	`"x"`	Text drawn at every point of the lattice.
`fill`	"word" \| "letters" \| "random"	`"word"`	How text covers the faces: the whole word at each point, its letters spelled across the faces, or random glyphs from the charset.
`charset`	string	`"abcdefghijklmnopqrstuvwxyz0123456789"`	Glyphs used by the scramble, the shuffle and the random fill.
`upright`	boolean	`false`	Keeps every glyph upright and facing you instead of printing it on its face.
`cubeSize`	number	`280`	Edge length of the cube in pixels. It shrinks to fit small containers.
`density`	number	`49`	Glyphs per face, rounded up to a square grid.
`fontSize`	number	`18`	Glyph size in pixels at the centre of the cube.
`fontWeight`	number	`300`	Font weight from 100 to 900.
`fontFamily`	string	`"inherit"`	Font family. Inherit uses the font of the page.
`color`	string	`"currentColor"`	Glyph colour. Defaults to the surrounding text colour.
`accentColor`	string	`"#B19EEF"`	Colour of scrambling glyphs and of the far faces.
`backgroundColor`	string	`"transparent"`	Fill behind the cube. On light fills or light pages the colours turn into deep ink tones.
`shading`	number	`0.6`	How much faces dim as they turn away from you.
`depthFade`	number	`0.3`	Extra fade toward the back of the cube.
`depthTint`	number	`0.5`	How far the back faces shift toward the accent colour.
`glow`	number	`0.35`	Soft bloom around bright glyphs. Dark backgrounds only.
`perspective`	number	`700`	Camera distance in pixels. Lower values look more dramatic.
`rotationSpeed`	number	`1`	Speed of the idle tumble.
`autoRotateX`	number	`0.3`	Idle tumble around the horizontal axis.
`autoRotateY`	number	`0.3`	Idle tumble around the vertical axis.
`breathe`	number	`0.1`	Size of the slow breathing pulse.
`breatheSpeed`	number	`2`	Speed of the breathing pulse.
`followSpeed`	number	`0.08`	How quickly the cube springs after the cursor. 0 keeps it in place.
`roll`	number	`0.35`	How much the cube rolls as it travels.
`offsetX`	number	`0`	Horizontal offset from the cursor in pixels.
`offsetY`	number	`0`	Vertical offset from the cursor in pixels.
`draggable`	boolean	`true`	Drag to spin the cube. A flick keeps it turning.
`inertia`	number	`1`	Seconds a flicked spin takes to slow down.
`scrambleDuration`	number	`1.1`	Length of the click scramble in seconds. 0 turns it off.
`shuffle`	number	`0`	Glyphs per second that quietly change on their own.
`opacity`	number	`1`	Overall opacity.
`interactive`	boolean	`true`	Follow, drag and click. Off keeps the cube centred.
`intro`	boolean	`true`	Types the cube in from the front when it appears.
`paused`	boolean	`false`	Stops the tumble, breathing and shuffle. Reduced-motion users get a still cube.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the root.
`height`	string \| number	`"100%"`	Height of the root.
`children`	ReactNode	`undefined`	Content drawn above the cube.
`className`	string	`undefined`	Classes for the root element.
`style`	CSSProperties	`undefined`	Inline styles for the root element.
`ref`	{ scramble, spin }	`undefined`	scramble() runs the scramble from code. spin(x?, y?) flicks the cube, in radians per second.

wordstring

Text drawn at every point of the lattice.

Default"x"

fill"word" | "letters" | "random"

How text covers the faces: the whole word at each point, its letters spelled across the faces, or random glyphs from the charset.

Default"word"

charsetstring

Glyphs used by the scramble, the shuffle and the random fill.

Default"abcdefghijklmnopqrstuvwxyz0123456789"

uprightboolean

Keeps every glyph upright and facing you instead of printing it on its face.

Defaultfalse

cubeSizenumber

Edge length of the cube in pixels. It shrinks to fit small containers.

Default280

densitynumber

Glyphs per face, rounded up to a square grid.

Default49

fontSizenumber

Glyph size in pixels at the centre of the cube.

Default18

fontWeightnumber

Font weight from 100 to 900.

Default300

fontFamilystring

Font family. Inherit uses the font of the page.

Default"inherit"

colorstring

Glyph colour. Defaults to the surrounding text colour.

Default"currentColor"

accentColorstring

Colour of scrambling glyphs and of the far faces.

Default"#B19EEF"

backgroundColorstring

Fill behind the cube. On light fills or light pages the colours turn into deep ink tones.

Default"transparent"

shadingnumber

How much faces dim as they turn away from you.

Default0.6

depthFadenumber

Extra fade toward the back of the cube.

Default0.3

depthTintnumber

How far the back faces shift toward the accent colour.

Default0.5

glownumber

Soft bloom around bright glyphs. Dark backgrounds only.

Default0.35

perspectivenumber

Camera distance in pixels. Lower values look more dramatic.

Default700

rotationSpeednumber

Speed of the idle tumble.

Default1

autoRotateXnumber

Idle tumble around the horizontal axis.

Default0.3

autoRotateYnumber

Idle tumble around the vertical axis.

Default0.3

breathenumber

Size of the slow breathing pulse.

Default0.1

breatheSpeednumber

Speed of the breathing pulse.

Default2

followSpeednumber

How quickly the cube springs after the cursor. 0 keeps it in place.

Default0.08

rollnumber

How much the cube rolls as it travels.

Default0.35

offsetXnumber

Horizontal offset from the cursor in pixels.

Default0

offsetYnumber

Vertical offset from the cursor in pixels.

Default0

draggableboolean

Drag to spin the cube. A flick keeps it turning.

Defaulttrue

inertianumber

Seconds a flicked spin takes to slow down.

Default1

scrambleDurationnumber

Length of the click scramble in seconds. 0 turns it off.

Default1.1

shufflenumber

Glyphs per second that quietly change on their own.

Default0

opacitynumber

Overall opacity.

Default1

interactiveboolean

Follow, drag and click. Off keeps the cube centred.

Defaulttrue

introboolean

Types the cube in from the front when it appears.

Defaulttrue

pausedboolean

Stops the tumble, breathing and shuffle. Reduced-motion users get a still cube.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the root.

Default"100%"

heightstring | number

Height of the root.

Default"100%"

childrenReactNode

Content drawn above the cube.

Defaultundefined

classNamestring

Classes for the root element.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

ref{ scramble, spin }

scramble() runs the scramble from code. spin(x?, y?) flicks the cube, in radians per second.

Defaultundefined

Name

Type

Default

Description

word

string

"x"

Text drawn at every point of the lattice.

fill

"word" | "letters" | "random"

"word"

How text covers the faces: the whole word at each point, its letters spelled across the faces, or random glyphs from the charset.

charset

string

"abcdefghijklmnopqrstuvwxyz0123456789"

Glyphs used by the scramble, the shuffle and the random fill.

upright

boolean

false

Keeps every glyph upright and facing you instead of printing it on its face.

cubeSize

number

280

Edge length of the cube in pixels. It shrinks to fit small containers.

density

number

49

Glyphs per face, rounded up to a square grid.

fontSize

number

18

Glyph size in pixels at the centre of the cube.

fontWeight

number

300

Font weight from 100 to 900.

fontFamily

string

"inherit"

Font family. Inherit uses the font of the page.

color

string

"currentColor"

Glyph colour. Defaults to the surrounding text colour.

accentColor

string

"#B19EEF"

Colour of scrambling glyphs and of the far faces.

backgroundColor

string

"transparent"

Fill behind the cube. On light fills or light pages the colours turn into deep ink tones.

shading

number

0.6

How much faces dim as they turn away from you.

depthFade

number

0.3

Extra fade toward the back of the cube.

depthTint

number

0.5

How far the back faces shift toward the accent colour.

glow

number

0.35

Soft bloom around bright glyphs. Dark backgrounds only.

perspective

number

700

Camera distance in pixels. Lower values look more dramatic.

rotationSpeed

number

1

Speed of the idle tumble.

autoRotateX

number

0.3

Idle tumble around the horizontal axis.

autoRotateY

number

0.3

Idle tumble around the vertical axis.

breathe

number

0.1

Size of the slow breathing pulse.

breatheSpeed

number

2

Speed of the breathing pulse.

followSpeed

number

0.08

How quickly the cube springs after the cursor. 0 keeps it in place.

roll

number

0.35

How much the cube rolls as it travels.

offsetX

number

0

Horizontal offset from the cursor in pixels.

offsetY

number

0

Vertical offset from the cursor in pixels.

draggable

boolean

true

Drag to spin the cube. A flick keeps it turning.

inertia

number

1

Seconds a flicked spin takes to slow down.

scrambleDuration

number

1.1

Length of the click scramble in seconds. 0 turns it off.

shuffle

number

0

Glyphs per second that quietly change on their own.

opacity

number

1

Overall opacity.

interactive

boolean

true

Follow, drag and click. Off keeps the cube centred.

intro

boolean

true

Types the cube in from the front when it appears.

paused

boolean

false

Stops the tumble, breathing and shuffle. Reduced-motion users get a still cube.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the root.

height

string | number

"100%"

Height of the root.

children

ReactNode

undefined

Content drawn above the cube.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.

ref

{ scramble, spin }

undefined

scramble() runs the scramble from code. spin(x?, y?) flicks the cube, in radians per second.