# Molten Metal

> Swirling caustic filaments with white-hot cores that heat up under the cursor and flare on click.

A WebGL2 background of folded caustic filaments that flow like molten metal. It ignites from its hottest cores outward when it first comes into view. Move the cursor to heat the filaments it passes and drift the flow, and click to flare them white-hot.

<demo-molten-metal>



</demo-molten-metal>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import MoltenMetal from '~/components/ui/molten-metal/MoltenMetal.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <MoltenMetal :colors="['#5227FF', '#FF9FFC']" color-mode="molten" />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#5227FF', '#FF9FFC']
      </code>
    </td>
    
    <td>
      Gradient the metal heats through, from the dim glow to the hot body. Up to five colors.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        core-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#FFFFFF'
      </code>
    </td>
    
    <td>
      Color of the white-hot cores at the end of the gradient.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'transparent'
      </code>
    </td>
    
    <td>
      Fills the canvas behind the metal. Transparent lets the page show through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the flow as colored ink for light pages. Pair it with mid-tone colors that deepen toward the core.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      How fast the metal flows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        4
      </code>
    </td>
    
    <td>
      Zoom of the flow. Higher fits more of it on screen.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        detail
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Layers of folded filaments, from 1 to 8. Fractions blend between layers.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.6
      </code>
    </td>
    
    <td>
      How much heat the filaments carry.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Width of the filaments and their white-hot cores.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        swirl
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How tightly the flow spirals.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        turbulence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      How strongly each layer folds the flow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        haze
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.75
      </code>
    </td>
    
    <td>
      Soft glow between the filaments. 0 leaves only the filaments.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.3
      </code>
    </td>
    
    <td>
      Overall brightness.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-mode
      </code>
    </td>
    
    <td>
      <code>
        'molten' | 'ember' | 'frost'
      </code>
    </td>
    
    <td>
      <code>
        'molten'
      </code>
    </td>
    
    <td>
      Balance of the gradient. Ember runs hotter, frost stays cooler.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotation of the whole flow in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset-x
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Moves the flow sideways, as a fraction of the width.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset-y
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Moves the flow up or down, as a fraction of the height.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        drift
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      How far the flow drifts as the cursor moves. 0 keeps it still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.05
      </code>
    </td>
    
    <td>
      Film grain in the glow. 0 turns it off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the whole effect.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Ignites the metal from its hottest cores outward the first time it comes into view.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The cursor heats the filaments it passes over, leaving a trail that slowly cools.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How hot the cursor runs.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flare-on-click
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking flares the nearby filaments white-hot before they cool back down.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the flow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dpr
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Maximum device pixel ratio of the canvas.
    </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 and hidden from assistive technology (`aria-hidden`). With `prefers-reduced-motion: reduce` the flow holds still, the intro is skipped, the cursor drift stops and clicks do not flare. Clicks on links, buttons and form controls placed over the background never trigger a flare. Rendering pauses while the effect is off screen.

- Ported from [React Bits](https://reactbits.dev/backgrounds/molten-metal) by David Haz.