# Depth Text

Big display type built from a stack of copies pushed back in 3D, so the word reads as a solid block. The block tilts toward the pointer with smoothed parallax and drifts in a slow orbit when the pointer is idle. Hover to press it into the page; press to push deeper and let go to bounce back. Try the extrude, fade, float and contour presets in the panel.

<demo-depth-text>



</demo-depth-text>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/depth-text.json"
```

## Usage

```vue
<script setup lang="ts">
  import DepthText from '~/components/ui/depth-text/DepthText.vue';
</script>

<template>
  <DepthText
    text="Elevate"
    depth-color="#ff5a1f"
    gradient-depth
    :layers="56"
    :depth="2.6"
    :tilt="10"
    :hover-push="0.65"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Elevate'
      </code>
    </td>
    
    <td>
      The word or short phrase rendered as extruded type.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layers
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        34
      </code>
    </td>
    
    <td>
      Number of stacked copies that form the extrusion. Clamped to 2–64 to protect the DOM.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2.4
      </code>
    </td>
    
    <td>
      Spacing in pixels between each layer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        face-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Color of the front face. Follows the surrounding text color by default.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#7c3aed'
      </code>
    </td>
    
    <td>
      Tint the extrusion fades into toward the back.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gradient-depth
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Paint the extrusion in the depth color right behind the face and fade it out toward the back.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        7.5
      </code>
    </td>
    
    <td>
      Resting angle and maximum pointer-driven rotation, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pointer-tracking
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Smoothed pointer parallax on fine pointer devices.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        smoothing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.14
      </code>
    </td>
    
    <td>
      Damping used to ease rotation toward the pointer target.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        perspective
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        900
      </code>
    </td>
    
    <td>
      Perspective distance in pixels for the 3D stack.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-orbit
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      A subtle orbit when pointer tracking is unavailable or idle.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        orbit-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      Speed of the orbit in cycles per second.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover-push
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How far hovering presses the text into the page, 0 to 1. The extrusion compresses on a spring. 0 is off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        float
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Let the text bob and sway gently while it is not hovered.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'clamp(3rem, 12vw, 7rem)'
      </code>
    </td>
    
    <td>
      CSS font-size value for the word.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-weight
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        900
      </code>
    </td>
    
    <td>
      Font weight used for every layer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shadow
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Cast a soft drop shadow behind the extrusion.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        outline
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draw the extrusion as stacked outlines instead of solid layers.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Grow the extrusion out from the flat face on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root element.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- Only the front face is exposed to screen readers. The extrusion layers are `aria-hidden`.
- With reduced motion, the word rests at its base angle with full depth: no orbit, parallax, float or push.
- The animation loop stops while the text is off screen.
- Ported from [React Bits](https://reactbits.dev/text-animations/depth-text) by David Haz.