Text Cube
Cursor-following 3D text cube with depth fade
text-cube-tw
Customize
Cube
200
20
500
0.3
1
Animation
1
0.08
0.3
0.3
0.1
2
Text
16
100
0
0
Color
Props
| 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) |