# Border Tracer

> Draws a border as one stroke on hover, focus, arrival or state.

A border that completes itself: a focus ring with intent, a frame that closes when a section arrives, or an outline that draws while something loads.

- 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/border-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 border-tracer
```

It installs to `components/galactrex/border-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 { BorderTracer } from "@/components/galactrex/border-tracer";

<BorderTracer trigger="focus" radius={10}>
  <input className="rounded-[10px] border border-gxui-line px-3 py-2" />
</BorderTracer>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | The content to frame. |
| `trigger` | `"hover" \| "focus" \| "inView" \| "manual"` | `"hover"` | What draws the border. |
| `active` | `boolean` | — | Drawn when true, for trigger="manual". |
| `duration` | `number` | `0.7` | Seconds to draw the full border. |
| `width` | `number` | `1.5` | Stroke width in px. |
| `radius` | `number` | `12` | Corner radius in px; match the content. |
| `color` | `string` | `var(--gxui-ink)` | Stroke colour. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Hover.** Traces while the pointer is over the content.
- **Focus within.** Traces while any control inside has focus: a form group's frame.
- **Manual.** Drive `active` from state, e.g. while a request is pending.

## Accessibility

- Decorative stroke is aria-hidden; focus styles of the controls inside are kept.
- Focus within works from the keyboard.

## Motion

- SVG stroke draw with an eased curve; one element.
- Reduced motion: the border appears and disappears without drawing.