# Depth Dive

A manifesto rendered as a dive: each `# heading` section becomes a plane floating in Z-space, and scrolling moves the camera *through* them. Approaching text dissolves through a noise field with a burning accent edge, distant text fogs out, velocity warps the field of view, and the pointer sways the camera. Wheel, drag, arrow keys and space all steer; a HUD shows the section counter and progress.

## Usage

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

<template>
  <DepthDive hud-title="MANIFESTO" class="h-150" />
</template>
```

Feed your own manifesto through the `text` prop — `# Heading` lines start a section, blank lines split paragraphs:

```vue
<DepthDive
  :text="`# 01. First point\n\nBody copy for the first section.\n\n# 02. Second point\n\nMore body copy.`"
/>
```

## The psychedelic tunnel

The reference look keeps the background a near-black grain, but the full tunnel is in there — enable it with:

```vue
<DepthDive
  :tunnel="0.55"
  :tunnel-twist="0.9"
  :tunnel-speed="1"
  :psychedelia="0.4"
  :stars="0.9"
  :streaks="0.4"
  :rgb-shift="0.0025"
  :rgb-shift-vel="0.012"
/>
```

## Key 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>
      built-in manifesto
    </td>
    
    <td>
      <code>
        # Heading
      </code>
      
       + paragraphs per section
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Space Grotesk'
      </code>
    </td>
    
    <td>
      Canvas-rendered type
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fov
      </code>
      
       / <code>
        warp
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        85
      </code>
      
       / <code>
        4
      </code>
    </td>
    
    <td>
      Base field of view + velocity warp
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layer-gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        14.5
      </code>
    </td>
    
    <td>
      Z distance between sections
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        damping
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.43
      </code>
    </td>
    
    <td>
      Scroll smoothing
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-scroll
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.02
      </code>
    </td>
    
    <td>
      Idle drift, sections/second
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        infinite
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Wrap around past the last section
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dissolve-start
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.2
      </code>
    </td>
    
    <td>
      Where the pass-through dissolve begins
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        heading-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ff6a2b'
      </code>
    </td>
    
    <td>
      Section heading tint
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ff5c1f'
      </code>
    </td>
    
    <td>
      Dissolve edge glow + progress bar
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tunnel
      </code>
      
       / <code>
        psychedelia
      </code>
      
       / <code>
        stars
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Background tunnel intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-hud
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Counter, hint, progress bar
    </td>
  </tr>
</tbody>
</table>