# Gradient ASCII

> Soft gradient glows drawn in ASCII characters that scramble under the cursor.

A WebGL2 background that draws a drifting glow — a horizon, a pinched band, a rising light or an eclipse ring — and types it out in characters picked by brightness. Move the cursor over it to scramble the characters, which settle back a moment later, and click to send out a wave or burst.

<demo-gradient-ascii>



</demo-gradient-ascii>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import GradientAscii from '~/components/ui/gradient-ascii/GradientAscii.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <GradientAscii
      :colors="['#1e3fd8', '#f6f8ff', '#a5d8ff', '#38bdf8']"
      shape="horizon"
      characters=" =+xX0S8#@"
      :cell-size="18"
      :density="0.8"
      :glow="0.2"
      click-effect="wave"
    />
  </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>
        ['#1e3fd8', '#f6f8ff', '#a5d8ff', '#38bdf8']
      </code>
    </td>
    
    <td>
      Two to eight colors for the light, from the edge of the shadow to the brightest or farthest point. Dark areas stay transparent.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'horizon' | 'pinch' | 'rise' | 'eclipse'
      </code>
    </td>
    
    <td>
      <code>
        'horizon'
      </code>
    </td>
    
    <td>
      Horizon glows over a dark curve, pinch is a band of light squeezed in the middle, rise glows up from the bottom and eclipse rings a dark disc.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        characters
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ' =+xX0S8#@'
      </code>
    </td>
    
    <td>
      Characters from dimmest to brightest. Brighter parts of the gradient use characters further along.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cell-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        18
      </code>
    </td>
    
    <td>
      Height of each character cell in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Share of cells that show a character, from 0 to 1. Brighter areas fill in first.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glyph-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.85
      </code>
    </td>
    
    <td>
      How strongly the characters stand out from the gradient.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gradient-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.9
      </code>
    </td>
    
    <td>
      Opacity of the gradient behind the characters. At 0 only the characters are left.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      Soft glow around the characters, from 0 to 1.5.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth-of-field
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Share of characters drawn out of focus, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flicker
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      How often characters swap with their neighbors in brightness, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        softness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How soft the edges of the shape are, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the shape, from 0.4 to 2.5.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much the light wavers as it drifts, from 0 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the drift. 0 holds the shape still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.08
      </code>
    </td>
    
    <td>
      Strength of the film grain, from 0 to 0.4.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Picks a different drift and a different pattern of characters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Scrambles the characters under the cursor as it moves. They settle back a moment later.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scramble-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      Size of the scrambled area around the cursor, relative to the container height.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-effect
      </code>
    </td>
    
    <td>
      <code>
        'wave' | 'burst' | 'none'
      </code>
    </td>
    
    <td>
      <code>
        'wave'
      </code>
    </td>
    
    <td>
      Wave sends a ring of scrambled characters out from the click, burst scrambles a patch under it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Fades the light in from its source while the characters decode.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the gradient as a wash on light backgrounds, with characters a shade darker.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
      </code>
    </td>
    
    <td>
      Font used for the characters. Monospaced fonts keep the grid even.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dpr
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        auto
      </code>
    </td>
    
    <td>
      Maximum device pixel ratio, capped at 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra class names for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

Gradient ASCII is decorative. It renders to a `<canvas>` marked `aria-hidden`, so screen readers skip it; put real content above it. Pointer listeners are passive and attached to the window, so content layered on top stays clickable. When `prefers-reduced-motion` is set, the drift, flicker, cursor scramble and click effects stop, the intro is skipped, and the renderer only redraws when a prop changes. Rendering pauses while the background is off screen or the tab is hidden.

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