Shine Border
A rotating conic gradient border that creates a spotlight shine effect.
npx arupui add shine-border
Preview
Shine Border
A rotating conic gradient creates this spotlight effect.
Usage
shine-border.tsx
import { ShineBorder } from "@/components/blocks/shine-border"
<ShineBorder>
<div className="p-6">Content</div>
</ShineBorder>Props
| Prop | Type | Default |
|---|---|---|
borderWidth | number | 1 |
duration | number | 8 |
shineColor | string[] | ["#7c3aed", "#2563eb", "#06b6d4"] |
borderWidthType:
numberDefault: 1durationType:
numberDefault: 8shineColorType:
string[]Default: ["#7c3aed", "#2563eb", "#06b6d4"]