Animated Beam

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

motion-sv

Installation

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

A component for creating animated beam effects between elements.

Name	Type	Default	Description
`class`	`string`	`""`	`Additional CSS classes to apply`
`containerRef`	`HTMLElement \| null`	`null`	`Reference to the container element`
`fromRef`	`HTMLElement \| null`	`null`	`Reference to the starting element`
`toRef`	`HTMLElement \| null`	`null`	`Reference to the ending element`
`curvature`	`number`	`0`	`Curvature of the beam path`
`reverse`	`boolean`	`false`	`Reverse the animation direction`
`duration`	`number`	`Math.random() * 3 + 4`	`Duration of the animation in seconds`
`delay`	`number`	`0`	`Delay before animation starts`
`pathColor`	`string`	`"gray"`	`Color of the beam path`
`pathWidth`	`number`	`2`	`Width of the beam path`
`pathOpacity`	`number`	`0.2`	`Opacity of the beam path`
`gradientStartColor`	`string`	`"#ffaa40"`	`Starting color of the gradient`
`gradientStopColor`	`string`	`"#9c40ff"`	`Ending color of the gradient`
`startXOffset`	`number`	`0`	`X offset for the start position`
`startYOffset`	`number`	`0`	`Y offset for the start position`
`endXOffset`	`number`	`0`	`X offset for the end position`
`endYOffset`	`number`	`0`	`Y offset for the end position`