# Holo Sticker

A realistic holographic sticker rendered in WebGL. Feed it any artwork with transparency and it becomes a die-cut sticker with a silver foil base, a rainbow diffraction film that sweeps as you move your cursor, and an embossed print relief that lifts the ink off the vinyl.

The peel slider curls a corner of the sticker up from the surface — the reflected spectrum shifts across the fold, exactly like turning a real sticker.

## Usage

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

<template>
  <HoloSticker src="/my-artwork.svg" class="h-120" />
</template>
```

The `src` prop accepts SVG, PNG, JPG or WebP (including data URLs). Alpha transparency defines the die-cut outline — anything transparent is cut away, leaving a foil border.

## Finishes

<table>
<thead>
  <tr>
    <th>
      Finish
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        holo
      </code>
    </td>
    
    <td>
      Classic rainbow foil — high metalness, medium roughness
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        chrome
      </code>
    </td>
    
    <td>
      Mirror chrome — near-zero roughness, full metalness
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gloss
      </code>
    </td>
    
    <td>
      Clear-laminate gloss — subtle reflection, no diffraction
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        matte
      </code>
    </td>
    
    <td>
      Soft-touch matte — low sheen, faint film
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glitter
      </code>
    </td>
    
    <td>
      Sparkle foil — per-cell glitter twinkle over the film
    </td>
  </tr>
</tbody>
</table>

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Artwork URL or data URL; alpha = die-cut shape
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        settings
      </code>
    </td>
    
    <td>
      <code>
        Partial<StickerSettings>
      </code>
    </td>
    
    <td>
      <code>
        {}
      </code>
    </td>
    
    <td>
      Overrides merged over the defaults
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt-locked
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Disable cursor-following tilt
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional classes
    </td>
  </tr>
</tbody>
</table>

## Sticker settings

<table>
<thead>
  <tr>
    <th>
      Setting
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        finish
      </code>
    </td>
    
    <td>
      <code>
        'holo'
      </code>
    </td>
    
    <td>
      Surface finish preset (see above)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        0.74
      </code>
    </td>
    
    <td>
      Sticker scale within the canvas, 0.3–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border
      </code>
    </td>
    
    <td>
      <code>
        0.019
      </code>
    </td>
    
    <td>
      Die-cut white/foil border width, 0–0.08
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cutTolerance
      </code>
    </td>
    
    <td>
      <code>
        0.03
      </code>
    </td>
    
    <td>
      Interior gaps smaller than this stay foil, 0–0.12
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        holoIntensity
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Rainbow intensity, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bands
      </code>
    </td>
    
    <td>
      <code>
        9
      </code>
    </td>
    
    <td>
      Rainbow band frequency, 1–20
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hueShift
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Extra hue rotation, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Foil grain / glitter amount, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pattern
      </code>
    </td>
    
    <td>
      <code>
        'linear'
      </code>
    </td>
    
    <td>
      Rainbow pattern: <code>
        linear
      </code>
      
      , <code>
        radial
      </code>
      
      , <code>
        patches
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        overlay
      </code>
    </td>
    
    <td>
      <code>
        'none'
      </code>
    </td>
    
    <td>
      Facet overlay: <code>
        none
      </code>
      
      , <code>
        triangles
      </code>
      
      , <code>
        squares
      </code>
      
      , <code>
        stripes
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ink
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Ink density: 0 = foil only, 2 = densified
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        relief
      </code>
    </td>
    
    <td>
      <code>
        0.22
      </code>
    </td>
    
    <td>
      Embossed print relief, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layersOn
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Exploded view: backing paper + foil blank + artwork
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layerDepth
      </code>
    </td>
    
    <td>
      <code>
        0.002
      </code>
    </td>
    
    <td>
      Separation between exploded layers, 0–0.3
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layerMaterials
      </code>
    </td>
    
    <td>
      <code>
        ['gloss','auto','matte']
      </code>
    </td>
    
    <td>
      Material per layer
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        peelDirection
      </code>
    </td>
    
    <td>
      <code>
        'top-right'
      </code>
    </td>
    
    <td>
      Which corner is peeled
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        peelAmount
      </code>
    </td>
    
    <td>
      <code>
        0.31
      </code>
    </td>
    
    <td>
      Peel progress, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        curl
      </code>
    </td>
    
    <td>
      <code>
        0.09
      </code>
    </td>
    
    <td>
      Curl radius, 0.02–0.25
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shadow
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Drop-shadow under the curl, 0–1
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light
      </code>
    </td>
    
    <td>
      <code>
        {x:0.65, y:0.7}
      </code>
    </td>
    
    <td>
      Key-light position in UV space
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      <code>
        'transparent'
      </code>
    </td>
    
    <td>
      <code>
        transparent
      </code>
      
      , <code>
        white
      </code>
      
       or <code>
        black
      </code>
    </td>
  </tr>
</tbody>
</table>