SurfacesGenerated from the public API
BorderTrail
A light that runs the perimeter of a card, and the layer primitive it is built from.
@luc/ui/motionLive preview
The radius prop must match the wrapped surface, or the beam cuts the corner.
A featured panel with a slow sweep around its edge.
<BorderTrail variant="ambient" radius="lg">
<Card variant="outline" className="p-5">
<Text variant="body">A featured panel.</Text>
</Card>
</BorderTrail>Usage
import { BorderTrail } from "@luc/ui/motion";<BorderTrail variant="ambient" radius="lg">
<Card variant="outline" className="p-5">
<Text variant="body">A featured panel.</Text>
</Card>
</BorderTrail>API
| Export | Kind | Signature |
|---|---|---|
BorderTrail | 7 documented props | ({ className, children, variant, speed, length, radius, color, track, thickness, ...props }: BorderTrailProps) => import("@types/react").JSX.Element |
BorderTrailLayer | 9 documented props | ({ variant, speed, length, radius, color, track, thickness, groupName, active, }: BorderTrailLayerProps) => import("@types/react").JSX.Element |
BorderTrail props
Type: BorderTrailProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
color? | string | undefined | — | Ring colour. Defaults to the theme accent. |
length? | number | undefined | — | Length of the travelling segment, as a percentage of the perimeter. |
radius? | "sm" | "md" | "lg" | "xl" | "full" | undefined | — | Corner radius. Must match the wrapped surface. |
speed? | number | undefined | — | Seconds for one full loop. Overrides the variant's default. |
thickness? | number | undefined | — | |
track? | boolean | undefined | — | Draw a faint resting hairline around the whole perimeter. |
variant? | BorderTrailVariant | undefined | — | When the beam runs: `hover` only while the group is hovered/focused `active` a persistent accent (an active signal, a selected card) `ambient` a slow, ongoing sweep (a featured CT… |
BorderTrailLayer props
Type: BorderTrailLayerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
active? | boolean | undefined | — | Force the beam on/off, ignoring hover. Used by inline controls. |
color? | string | undefined | — | |
groupName? | string | null | undefined | — | Tailwind group name for the hover variant (`group/<name>` must exist on an ancestor). Pass `null` to drive the beam from a state prop instead. |
length? | number | undefined | — | |
radius? | NonNullable<"sm" | "md" | "lg" | "xl" | "full" | undefined> | undefined | — | |
speed? | number | undefined | — | |
thickness? | number | undefined | — | |
track? | boolean | undefined | — | |
variant? | BorderTrailVariant | undefined | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related