Border Trail
Glowing comet that travels along the border of a rounded container.
pnpm dlx @glinui/cli@latest add border-trailSecure by default
A comet runs along the edge.
Installation
pnpm dlx @glinui/cli@latest add border-trailCredits. Adapted from Motion Primitives (MIT, (c) 2024 ibelick). motion/react removed (CSS and Web Animations API), tokens, accessibility, reduced motion levels, RTL Attribution details.
Prefer the package?
Usage
The parent must be `relative` with a border radius, and should clip overflow. Distinct from BorderBeam (a dot) and ShineBorder (a drifting gradient): a short comet on a thin track.
Improvement over the original: no hardcoded zinc, offscreen and hidden tab pause, static corner glow at motion none, hidden under forced-colors.
Variants
Color sources per style.
default
A comet runs along the edge.
plain
A comet runs along the edge.
glass
A comet runs along the edge.
<BorderTrail variant="glass" borderWidth={2} />States
Custom color, length, radius and speed.
Long green trail
A comet runs along the edge.
Fast and thick
A comet runs along the edge.
<BorderTrail color="var(--color-signal-ok)" size={120} /><BorderTrail radius={32} duration={3} borderWidth={3} size={50} />In a layout
The highlighted plan wears the trail.
Starter
For side projects.
Team
The highlighted plan wears the trail.
<Card className="relative overflow-hidden"> <BorderTrail borderWidth={2} size={100} /> <PlanContent /></Card>Accessibility
- Purely decorative: aria-hidden, pointer-events-none, never focusable.
- Hidden under forced-colors so the real border shows.
- Pauses offscreen and while the tab is hidden.
ARIA Attributes
- `aria-hidden="true"` on the layer
- `data-mode` reports `path` or `conic`, `data-animated` reports motion
Reduced Motion
The comet only travels at motion level full. Under motion none, subtle or prefers-reduced-motion it rests as a static glow at the top start corner.
Affected properties
offset-distance travelconic rotationAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "plain" | "glass" | No | default | Color source: accent, foreground or a bright additive accent. |
size | number | No | 60 | Length of the glowing segment in pixels. |
duration | number | No | 5 | Seconds per lap. |
radius | number | No | - | Path corner radius in pixels. Defaults to the parent border radius. |
borderWidth | number | No | 1 | Track thickness in pixels. |
color | string | No | - | Any CSS color or token for the comet. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { BorderTrail } from "@glinui/ui"Dependencies
@glinui/ui@glinui/motionclass-variance-authorityGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/border-trail.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
BorderTrailProps
BorderTrailProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
borderWidth | number | No | 1 | Border thickness in pixels. |
color | string | No | - | Trail color. Defaults to the variant token. |
duration | number | No | 5 | Seconds per lap. |
radius | number | No | - | Corner radius of the path in pixels. Defaults to the parent border radius. |
size | number | No | 60 | Length of the glowing segment in pixels. |
variant | "default" | "plain" | "glass" | No | "default" | Variant option from borderTrailVariants. |