# Silk Aurora

> Premium WebGL hero with satin-dark aurora ribbons, pearlescent highlights, fine film grain, and cursor depth that bends the light toward the pointer.

<demo-silk-aurora>



</demo-silk-aurora>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import SilkAurora from '~/components/ui/silk-aurora/SilkAurora.vue';
</script>

<template>
  <SilkAurora
    subtitle="Silk Aurora"
    title="Night skies, woven in satin"
    description="Satin-dark aurora ribbons with pearlescent highlights."
    sheen-color="#f4dfb8"
    accent-color="#6ed6c9"
    class="min-h-screen"
  >
    <button class="rounded-full bg-white px-6 py-3 text-black">
      Get started
    </button>
  </SilkAurora>
</template>
```

Three fbm-warped ribbons drift across a satin-dark field with a pearlescent
sheen, sparkle glints, film grain, and a vignette. The pointer bends nearby
light toward it (`mouse-influence`). Headline scales with container-query
units. Falls back to a static radial gradient without WebGL and freezes when
`prefers-reduced-motion` is set. Distinct from nxui's `silk`, `aurora`, and
`soft-aurora` — this is the combined satin-ribbon hero, content slots
included.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Headline over the aurora
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        subtitle
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Uppercase kicker above the title
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Supporting paragraph
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        base-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#050507'
      </code>
    </td>
    
    <td>
      Deep background hex
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mid-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#14151d'
      </code>
    </td>
    
    <td>
      Upper-atmosphere hex
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sheen-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f4dfb8'
      </code>
    </td>
    
    <td>
      Pearlescent sheen hex
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#6ed6c9'
      </code>
    </td>
    
    <td>
      Ribbon accent hex
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed multiplier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Ribbon/sheen intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.85
      </code>
    </td>
    
    <td>
      Film grain amount (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        vignette
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Vignette strength (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Cursor depth multiplier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      React to pointer movement
    </td>
  </tr>
</tbody>
</table>

## Slots

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

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      CTA area rendered below the description
    </td>
  </tr>
</tbody>
</table>

## Credits

- Ported from [componentry.fun](https://www.componentry.dev/docs/components/silk-aurora)