Installation
npx shadcn-svelte@next add border-beam
Add the following animations to your
tailwind.config.js:
{
theme: {
extend: {
animation: {
'border-beam': 'border-beam 6s linear infinite'
}
}
}
}
Usage
<script lang="ts">
import { BorderBeam } from "$lib/components/magic/border-beam";
</script>
<div class="relative h-[200px] w-[400px] rounded-lg border">
<BorderBeam />
<div class="p-8">Your content here</div>
</div>
Examples
Custom Colors
<div class="relative h-[200px] w-[400px] rounded-lg border">
<BorderBeam colorFrom="#3b82f6" colorTo="#10b981" />
</div>
Reverse Direction
<div class="relative h-[200px] w-[400px] rounded-lg border">
<BorderBeam reverse={true} />
</div>
Custom Size and Duration
<div class="relative h-[200px] w-[400px] rounded-lg border">
<BorderBeam size={100} duration={8} borderWidth={2} />
</div>
Props
The size of the beam element in pixels.
The duration of the animation in seconds.
The delay before the animation starts in seconds.
The starting color of the gradient.
The ending color of the gradient.
The width of the border in pixels.
Whether to reverse the animation direction.
The initial offset position of the beam (0-100).
Custom motion-sv transition configuration to override default animation settings.
Additional CSS classes to apply to the beam element.
Inline styles to apply to the container.