Text Cube
Cursor-following 3D text cube with depth fade
text-cube-tw
Customize
Tweak the props liveCube
200
20
500
0.3
1
Animation
1
0.08
0.3
0.3
0.1
2
Text
16
100
0
0
Color
#1a1a1a#FFFFFFProps
| 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 | numberContainer width
Default:
"100%"heightstring | numberContainer height
Default:
"100%"classNamestringAdditional CSS classes
Default:
""childrenReactNodeContent rendered above the effect
Default:
undefinedwordstringThe word rendered on each face
Default:
"x"cubeSizenumberCube edge length in pixels (50–500)
Default:
200rotationSpeednumberRotation speed multiplier (0–5)
Default:
1followSpeednumberHow quickly the cube follows the cursor (0–1)
Default:
0.08densitynumberNumber of text duplicates per face (1–50)
Default:
20fontSizenumberBase font size in pixels (8–72)
Default:
16fontWeightnumberFont weight (100–900)
Default:
100fontFamilystringFont family
Default:
"'Inter', sans-serif"colorstringText color (hex)
Default:
"#1a1a1a"backgroundColorstringBackground color (hex)
Default:
"#ffffff"offsetXnumberHorizontal offset from cursor in pixels (-200–200)
Default:
0offsetYnumberVertical offset from cursor in pixels (-200–200)
Default:
0breathenumberBreathing animation amplitude (0–1)
Default:
0.1breatheSpeednumberBreathing animation speed (0–10)
Default:
2depthFadenumberTail opacity at furthest face (0–1)
Default:
0.3perspectivenumberPerspective distance in pixels (100–2000)
Default:
500autoRotateXnumberAuto-rotate on X axis when idle (0–3)
Default:
0.3autoRotateYnumberAuto-rotate on Y axis when idle (0–3)
Default:
0.3opacitynumberMaster opacity (0–1)
Default:
1