3D Displacement Text

Text Effects

Mouse-reactive 3D text with depth shadows that follows cursor movement, creating a dramatic displacement effect.

Loading preview...

Customize

Text

Font Size

Depth

Text Color

#F2ECE2

Shadow Color

#E84E2D

Props

Prop	Type	Default	Description
`text`	`string`	`—`	The text to display.
`className`	`string`	`''`	Additional CSS classes.
`fontSize`	`number`	`64`	Font size in pixels.
`color`	`string`	`'var(--color-chalk)'`	Text color.
`shadowColor`	`string`	`'var(--color-ignite)'`	Color of the 3D shadow.
`depth`	`number`	`12`	Maximum rotation and shadow offset in pixels/degrees.