Tracing Beam
A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.
通过 CLI 安装
手动安装
复制并粘贴以下代码:
TracingBeam.vue
API
Prop 名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
class | string | "" | Additional CSS classes for custom styling. |
功能特性
- 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.
感谢
- Ported from Aceternity UI;