# Holo Cloth

> A grabbable sheet of simulated cloth draped in an iridescent holo-foil material, floating in zero gravity.

<demo-holo-cloth>



</demo-holo-cloth>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import HoloCloth from '~/components/ui/holo-cloth/HoloCloth.vue';
</script>

<template>
  <HoloCloth preset="holo" class="h-120" />
</template>
```

Click and drag the fabric to pull it — the cloth wrinkles, settles, and floats
like it's suspended in gel (Verlet integration with structural, shear, and
bend constraints; no physics library). Drag empty space to orbit. The holo
preset renders an iridescent foil with rainbow diffraction, angle-gated
sparkle, a woven normal map, and fold occlusion; `chrome` and `black-cloth`
swap the material bundle. Pass `image` to drape a graphic over the fabric —
it deforms with the cloth.

```vue
<template>
  <HoloCloth
    preset="chrome"
    image="/poster.png"
    background="transparent"
    class="h-120"
  />
</template>
```

The component also exposes `poke()` (random gentle impulse) and `reset()`
(back to the draped rest pose) via a template ref.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        preset
      </code>
    </td>
    
    <td>
      <code>
        'holo' | 'chrome' | 'black-cloth'
      </code>
    </td>
    
    <td>
      <code>
        'holo'
      </code>
    </td>
    
    <td>
      Material preset
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        image
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Image URL draped onto the cloth (deforms with it)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#0b0c12'
      </code>
    </td>
    
    <td>
      Scene background; <code>
        'transparent'
      </code>
      
       clears it
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Enable cloth grabbing and camera orbit
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        zoom
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Allow scroll-wheel zoom
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        quality
      </code>
    </td>
    
    <td>
      <code>
        'high' | 'medium' | 'low'
      </code>
    </td>
    
    <td>
      <code>
        'high'
      </code>
    </td>
    
    <td>
      Render scale / MSAA / cloth resolution trade-off
    </td>
  </tr>
</tbody>
</table>

## Credits

Ported from [Holocloth](https://github.com/dmitrykurash/holocloth) by
[Dmitry Kurash](https://x.com/DmitryKurash) — real-time holographic cloth
with hand-written Verlet physics and GLSL foil shading.