# Moving Border

> Marching ants: dashes travelling round the edge.

The universal sign for selected, drop here and being edited, drawn at the exact size and radius.

- Family: Chrome
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/moving-border/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add moving-border
```

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

<div className="relative rounded-xl p-8"><MovingBorder />Drop files here</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dash / gap` | `number` | `8 / 6` | Dash and gap in px. |
| `width` | `number` | `1.5` | Stroke in px. |
| `radius` | `number` | `12` | Match the parent. |
| `speed` | `number` | `24` | px per second; negative reverses. |
| `color` | `string` | — | Any CSS colour; defaults to a theme token. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Drop zone.** Around an upload area while dragging.
- **Selection.** Around a selected layer.

## Accessibility

- Decorative; pair with a text state.

## Motion

- Dash offset loop on one SVG rect; pauses offscreen.
- Reduced motion: still dashes.