Shine Border
Shine Border is an animated background border effect. It creates a subtle rotating glow around any container.
Shine Border
Soft animated glow
A subtle animated border background that keeps the focus on the content.
Explore shine
Basic Usage
Loading...
Tips
- Keep the container
relativewithoverflow-hiddenso the border stays clipped. - Increase
borderWidthfor thicker borders. - Slower
durationcreates a calmer shine.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
borderWidth | number | 2 | Width of the animated border. |
duration | number | 8 | Animation duration in seconds. |
colorFrom | string | "#60a5fa" | Gradient start color. |
colorTo | string | "#a855f7" | Gradient end color. |
paused | boolean | false | Pause the animation. |
opacity | number | 0.8 | Border opacity. |
className | string | undefined | Additional classes for the shine layer. |
style | React.CSSProperties | undefined | Inline styles for the shine layer. |
Tip: Use Alt + ← / → to navigate