AnimationsNew
Border Trail
A short streak of light runs around a card border. Good for a loading state.
Customize
color
tailColor
Based on Border Trail (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| size | number | 60 | Length of the glowing trail in pixels. |
| duration | number | 5 | Seconds per lap. |
| transition | Transition | — | Custom Motion transition. Overrides duration. |
| onAnimationComplete | () => void | — | Called after the last lap when repeat is finite. |
| style | CSSProperties | — | Styles of the glowing trail. |
| color | string | "#ffffff" | Colour of the bright head of the trail. |
| tailColor | string | "#a3a3a3" | Colour the trail fades through behind the head. |
| className | string | — | Trail classes, e.g. a from-white/0 via-white gradient. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge