Border Tracer

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.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add border-tracer

Usage

Example

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>

Source

Installs to components/galactrex/border-tracer.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

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 and reduced motion

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