Animated Beam

A Vue component that creates an animated SVG line connecting two elements with a gradient effect.

Usage

Props

PropTypeDefaultDescription
reverse
Boolean
falseReverses the direction of the gradient animation.
container
HTMLElement
nullThe container element for the SVG (required).
from
HTMLElement
nullThe starting element for the line (required).
to
HTMLElement
nullThe ending element for the line (required).
curvature
Number
0The curvature of the line.
startXOffset
Number
0X-axis offset for the starting point.
startYOffset
Number
0Y-axis offset for the starting point.
endXOffset
Number
0X-axis offset for the ending point.
endYOffset
Number
0Y-axis offset for the ending point.
pathWidth
Number
2Width of the path stroke.
pathOpacity
Number
0.2Opacity of the base path.
gradientStartColor
String
"#6344F5"Start color of the gradient.
gradientStopColor
String
"#18CCFC"End color of the gradient.
pathColor
String
"gray"Color of the base path.
delay
Number
0Delay before the animation starts (in seconds).
duration
Number
Math.random() * 3 + 4Duration of the animation (in seconds).

How it Works

  1. The component creates an SVG path between two specified elements.
  2. It uses a gradient effect that animates along the path.
  3. The path automatically updates when the window is resized.
  4. GSAP is used for smooth animation of the gradient.

Customization

You can customize the AnimatedBeam component by:

  • Adjusting the curvature prop to change the curve of the line.
  • Modifying the startXOffset, startYOffset, endXOffset, and endYOffset props to fine-tune the connection points.
  • Changing the gradientStartColor and gradientStopColor props to alter the gradient colors.
  • Adjusting the pathWidth and pathOpacity to change the appearance of the base path.
  • Setting the delay and duration props to control the timing of the animation.
Accordion
A versatile UI component for creating collapsible content sections.
Animated Search Bar
A Vue component that creates an animated search bar with customizable styles.