# Edge Tracer

> One comet round the edge: an acknowledgement.

Runs once per event and fades: a card hovered, a row saved, a field accepted. Not ambient like Border Beam.

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/edge-tracer/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add edge-tracer
```

It installs to `components/galactrex/edge-tracer.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { EdgeTracer } from "@/components/galactrex/edge-tracer";

<div className="relative rounded-xl border p-6"><EdgeTracer />…</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | `"hover" \| "manual"` | `"hover"` | What runs a lap. |
| `play` | `number` | — | Change it for a lap, trigger="manual". |
| `duration` | `number` | `0.9` | Seconds per lap. |
| `length` | `number` | `0.22` | Head length as a share. |
| `radius` | `number` | `12` | Match the parent. |
| `width` | `number` | `1.5` | Stroke width. |
| `color` | `string` | — | Any CSS colour; defaults to a theme token. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Saved.** Bump `play` when a save succeeds.

## Accessibility

- Decorative; confirm in text too.

## Motion

- One SVG dash animation per event.
- Reduced motion: none.