Text built from many stacked layers that shift with the pointer for real parallax depth, with a shadow stack for volume. It drifts on its own until the pointer arrives.
npx shadcn@latest add https://hyperblur.dev/r/text-depth-layers.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-depth-layers.tsx.
import { DepthLayers } from "@/components/hyperblur/text-depth-layers"
<DepthLayers className="text-7xl font-black">Volume</DepthLayers>| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The text to render in layers. |
| layers | number | 10 | Number of stacked layers, from 2 to 24. |
| depth | number | 14 | Total depth of the stack in pixels. |
| tilt | number | 10 | Maximum rotation in degrees toward the pointer. |
| color | string | "#f2f2f2" | Color of the front face. |
| accent | string | "#2f7bff" | Color of the body and glow of the extrusion. |
| idle | boolean | true | Drift along a slow path when the pointer is away. |