Browse components
Depth Text
Chunky extruded 3D lettering built from stacked layers that tilts toward the pointer and sways gently when idle.
Installation
npx shadcn@latest add @glint-ui/depth-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/depth-text.json
Usage
import { DepthText } from "@/components/ui/depth-text";
<DepthText text="DEPTH" layers={16} className="text-8xl font-black" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "DEPTH" | Text to extrude. |
| layers | number | 20 | Number of stacked copies forming the extrusion. |
| depth | number | 3 | Gap between copies, in px. |
| maxTilt | number | 24 | Maximum tilt toward the pointer, in degrees. |
| color | string | "#ecfccb" | Front face color. |
| depthColor | string | "#1a2e05" | Color of the deepest layer. |
| className | string | — | Extra classes for the root element. |