# Metallic Paint

> Liquid chrome that flows over your logo or text, with reflections that bend around the edges, tilt with the cursor and pour in on load.

Liquid chrome that flows over a logo or a line of text. The shape's interior is solved into a soft depth field, so the reflections bend around its edges like poured metal. The metal pours in from the outline on load; move the cursor over it to tilt the reflections.

<demo-metallic-paint>



</demo-metallic-paint>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import MetallicPaint from '~/components/ui/metallic-paint/MetallicPaint.vue';
</script>

<template>
  <div class="relative h-125 w-full">
    <!-- A logo (SVGs work best; transparent pixels stay empty) -->
    <MetallicPaint image-src="/logo.svg" :edge-bend="0.6" :mouse-tilt="0.5" />
  </div>

  <div class="relative h-80 w-full">
    <!-- Or text -->
    <MetallicPaint
      text="Gold"
      color="#f2c46b"
      :dispersion="0.15"
      :scale="0.7"
    />
  </div>
</template>
```

Opaque images (for example a black logo on a white JPG) are keyed automatically: dark pixels become the shape and light pixels are dropped. Use `light-mode` on light pages so the brightest highlights get a soft dark rim.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        image-src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      URL of the logo or image to paint. SVGs work best. Transparent pixels are left empty.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Text to paint instead of an image. Takes priority over <code>
        image-src
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'system-ui, sans-serif'
      </code>
    </td>
    
    <td>
      Font used for text.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-weight
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        800
      </code>
    </td>
    
    <td>
      Font weight used for text.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Tint of the metal. White keeps it chrome, warm tones turn it gold or copper.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'transparent'
      </code>
    </td>
    
    <td>
      Color behind the shape. The canvas is transparent by default.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      How many reflection bands run across the shape.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        softness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      Softness of the reflection edges, from 0 for crisp chrome to 1 for brushed metal.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dispersion
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      Rainbow fringes where the reflections bend, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distortion
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.07
      </code>
    </td>
    
    <td>
      How much the reflections ripple as they flow, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        edge-bend
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How strongly the reflections bend around the edges of the shape, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        angle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        70
      </code>
    </td>
    
    <td>
      Direction the reflections flow in, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the flow. <code>
        0
      </code>
      
       freezes it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Size of the shape inside the canvas.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotation of the shape, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much the reflections shift as the cursor moves, as if tilting the metal.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Adds a soft dark rim and dims the brightest highlights so the shape reads on light pages.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Pours the metal in from the outline on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the animation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dpr
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      auto
    </td>
    
    <td>
      Device pixel ratio cap. Renders at 2× or more for clean edges.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative. Put the real logo text or brand name in the page as well (for example in a visually hidden heading).
- With `prefers-reduced-motion: reduce`, the flow and the pour-in intro are skipped; a still frame is drawn and the cursor tilt still works.
- Rendering sleeps when the component is off-screen, and when `speed` is `0` or `paused` is set and the tilt has settled.
- Ported from [React Bits](https://reactbits.dev/animations/metallic-paint) by David Haz.