Text Cube

Cursor-following 3D text cube with depth fade

text-cube-tw

Customize

Cube Size

200

Density

20

Perspective

500

Depth Fade

0.30

Opacity

1.00

Rotation Speed

1.0

Follow Speed

0.08

Auto Rotate X

0.3

Auto Rotate Y

0.3

Breathe

0.10

Breathe Speed

2.0

Font Size

16

Font Weight

100

Offset X

0

Offset Y

0

Color

Background

Props

23

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes
`children`	ReactNode	`undefined`	Content rendered above the effect
`word`	string	`"x"`	The word rendered on each face
`cubeSize`	number	`200`	Cube edge length in pixels (50–500)
`rotationSpeed`	number	`1`	Rotation speed multiplier (0–5)
`followSpeed`	number	`0.08`	How quickly the cube follows the cursor (0–1)
`density`	number	`20`	Number of text duplicates per face (1–50)
`fontSize`	number	`16`	Base font size in pixels (8–72)
`fontWeight`	number	`100`	Font weight (100–900)
`fontFamily`	string	`"'Inter', sans-serif"`	Font family
`color`	string	`"#1a1a1a"`	Text color (hex)
`backgroundColor`	string	`"#ffffff"`	Background color (hex)
`offsetX`	number	`0`	Horizontal offset from cursor in pixels (-200–200)
`offsetY`	number	`0`	Vertical offset from cursor in pixels (-200–200)
`breathe`	number	`0.1`	Breathing animation amplitude (0–1)
`breatheSpeed`	number	`2`	Breathing animation speed (0–10)
`depthFade`	number	`0.3`	Tail opacity at furthest face (0–1)
`perspective`	number	`500`	Perspective distance in pixels (100–2000)
`autoRotateX`	number	`0.3`	Auto-rotate on X axis when idle (0–3)
`autoRotateY`	number	`0.3`	Auto-rotate on Y axis when idle (0–3)
`opacity`	number	`1`	Master opacity (0–1)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

wordstring

The word rendered on each face

Default"x"

cubeSizenumber

Cube edge length in pixels (50–500)

Default200

rotationSpeednumber

Rotation speed multiplier (0–5)

Default1

followSpeednumber

How quickly the cube follows the cursor (0–1)

Default0.08

densitynumber

Number of text duplicates per face (1–50)

Default20

fontSizenumber

Base font size in pixels (8–72)

Default16

fontWeightnumber

Font weight (100–900)

Default100

fontFamilystring

Font family

Default"'Inter', sans-serif"

colorstring

Text color (hex)

Default"#1a1a1a"

backgroundColorstring

Background color (hex)

Default"#ffffff"

offsetXnumber

Horizontal offset from cursor in pixels (-200–200)

Default0

offsetYnumber

Vertical offset from cursor in pixels (-200–200)

Default0

breathenumber

Breathing animation amplitude (0–1)

Default0.1

breatheSpeednumber

Breathing animation speed (0–10)

Default2

depthFadenumber

Tail opacity at furthest face (0–1)

Default0.3

perspectivenumber

Perspective distance in pixels (100–2000)

Default500

autoRotateXnumber

Auto-rotate on X axis when idle (0–3)

Default0.3

autoRotateYnumber

Auto-rotate on Y axis when idle (0–3)

Default0.3

opacitynumber

Master opacity (0–1)

Default1