# Radar

A detailed radar scope: range rings, bearing spokes, a tick bezel and a glowing beam that leaves a phosphor afterglow and lights up speckled clutter as it passes. Moving contacts ping when the sweep crosses them, then fade with a short trail of older echoes. Move the pointer over the scope and the grid warms up around it while the sweep picks your cursor up as a contact. `mode="pulse"` swaps the beam for sonar rings, `tilt` lays the scope back like a floor, and `light-mode` draws it as ink for pale pages. The rings draw in on mount. It renders on raw WebGL2 with a bloom pass and pauses when offscreen.

<demo-radar>



</demo-radar>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import Radar from '~/components/ui/radar/Radar.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <Radar
      color="#3ef09a"
      mode="sweep"
      :speed="1"
      :ring-count="6"
      :targets="6"
      :clutter="0.35"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#3ef09a'
      </code>
    </td>
    
    <td>
      Color of the sweep and the contacts.
    </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 radar. Leave it transparent to let the page show through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mode
      </code>
    </td>
    
    <td>
      <code>
        'sweep' | 'pulse'
      </code>
    </td>
    
    <td>
      <code>
        'sweep'
      </code>
    </td>
    
    <td>
      A rotating beam, or sonar rings that expand from the center.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the sweep. Negative values sweep counterclockwise.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trail
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      How long the afterglow lingers behind the sweep, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.9
      </code>
    </td>
    
    <td>
      Size of the radar, relative to the shorter side of the view.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ring-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Number of range rings.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spoke-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        12
      </code>
    </td>
    
    <td>
      Number of faint bearing lines. 0 hides them.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Shows the bearing scale around the edge.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        targets
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Number of moving contacts the sweep picks up, up to 16.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        clutter
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      Amount of speckled returns the sweep lights up, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the soft light around the beam and contacts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall brightness.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grid-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the rings, ticks and lines, from 0 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        line-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Width of the grid lines in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tilt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Tilts the radar back in perspective like a floor, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        center-x
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Horizontal position of the radar center, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        center-y
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Vertical position of the radar center, from 0 at the top to 1 at the bottom.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Lights up the grid near the cursor, and the sweep picks the cursor up as a contact.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Draws the rings in and starts the sweep on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.03
      </code>
    </td>
    
    <td>
      Strength of the film grain.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the edges into the page, from 0 to 1.
    </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>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the radar as ink for light backgrounds.
    </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>
      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 classes for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden`. Put real content on top of it.
- With `prefers-reduced-motion: reduce` the sweep, intro and cursor effects stop and a single still frame is drawn.
- The render loop pauses when the radar scrolls offscreen or the tab is hidden, and sleeps when `paused` is set and nothing is settling.
- Ported from [React Bits](https://reactbits.dev/backgrounds/radar) by David Haz.