Star Border
A polymorphic component with animated star light particles traveling along its border
Preview
Custom Color
Overview
StarBorder wraps any element with an animated glowing border effect. Two radial gradient "stars" orbit the top and bottom edges, creating a subtle light trail animation. The component is polymorphic — render it as a button, link, div, or any HTML element.
Features
- Polymorphic — render as any HTML element via the
asprop - Animated border — two light particles orbit the element edges
- Configurable speed — control animation duration
- Custom color — set the glow color to match your theme
Usage
import StarBorder from '@/components/star-border'
<StarBorder as="button" color="#00e5ff" speed="5s">
Click Me
</StarBorder>
<StarBorder as="a" href="/docs" color="#ff6b6b" thickness={2}>
Learn More
</StarBorder>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'button' | HTML element or component to render as |
color | string | 'white' | Color of the orbiting star particles |
speed | string | '6s' | Animation duration for one full cycle |
thickness | number | 1 | Border thickness in pixels |
className | string | '' | Additional CSS classes |
children | ReactNode | — | Content inside the bordered element |