Depth Text⁽⁰¹¹⁾

Creates multi-layered 3D extruded typography shifting depth relative to cursor position.

Hover

DEPTH

Loading…

Installation

$npx kibo add depth-text

1import { DepthText } from "@/components/kibo/depth-text/component";
2 
3export default function Example() {
4  return (
5    <DepthText />
6  );
7}

Prop	Type	Default	Description
`text`	`string`	'Elevate'	The text content to display and animate.
`layers`	`number`	34	Controls the layers for the component animation.
`depth`	`number`	2.4	Controls the depth for the component animation.
`faceColor`	`string`	'#f8fafc'	Controls the face color for the component animation.
`depthColor`	`string`	'#7c3aed'	Controls the depth color for the component animation.
`tilt`	`number`	7.5	Controls the tilt for the component animation.
`pointerTracking`	`boolean`	true	Controls the pointer tracking for the component animation.
`smoothing`	`number`	0.14	Controls the smoothing for the component animation.
`perspective`	`number`	900	Controls the perspective for the component animation.
`autoOrbit`	`boolean`	true	Controls the auto orbit for the component animation.
`orbitSpeed`	`number`	0.35	Controls the orbit speed for the component animation.
`fontSize`	`string`	'clamp(3rem, 12vw, 7rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`number \| string`	900	Font weight (e.g., 400, 700, 900, 'bold').
`shadow`	`boolean`	true	Controls the shadow for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	{}	Controls the style for the component animation.