Tracing Beam

A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.

API

Prop NameTypeDefaultDescription
classstring""Additional CSS classes for custom styling.

Component Code

You can copy and paste the following code to create this component:

TracingBeam.vue

Features

  • Dynamic Tracing Beam: Renders a gradient tracing beam that follows the scroll position, adding a modern visual effect.
  • Scroll-Based Animation: As the user scrolls, the beam animates along a path with varying gradients, responding to scroll depth.
  • Gradient Transition: Smoothly transitions colors along the beam from cyan to purple with fading edges for a subtle effect.
  • Slot-Based Content: Supports a default slot to add content inside the tracing beam container.

Credits