Border Beam

A component for creating animated border beam effects around elements with customizable gradients, duration, and direction.

motion-sv

Enter your credentials to access your account.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/border-beam.json

Now Playing

Stairway to Heaven - Led Zeppelin

2:45 8:02

Enter your credentials to access your account.

A component for creating animated border beam effects.

Name	Type	Default	Description
`size`	`number`	`50`	`The size of the border beam in pixels`
`duration`	`number`	`6`	`The duration of the animation in seconds`
`delay`	`number`	`0`	`The delay before the animation starts in seconds`
`colorFrom`	`string`	`"#ffaa40"`	`The starting color of the gradient`
`colorTo`	`string`	`"#9c40ff"`	`The ending color of the gradient`
`transition`	`Transition`	`undefined`	`Custom motion transition configuration`
`class`	`string`	`undefined`	`Additional CSS classes to apply`
`style`	`string`	`undefined`	`Additional inline styles`
`reverse`	`boolean`	`false`	`Whether to reverse the animation direction`
`initialOffset`	`number`	`0`	`The initial offset position (0-100)`
`borderWidth`	`number`	`1`	`The border width of the beam in pixels`