For Tailwind CSS v3 docs, click here.

Tracing Beam

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

通过 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/tracing-beam.json"

手动安装

复制并粘贴以下代码:

TracingBeam.vue

API

Prop 名称类型默认值描述
classstring""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.

感谢