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