安装
示例
单向动画光束
双向动画光束
多输入动画光束
多输出动画光束
使用方法
import { AnimatedBeam } from "@/components/magicui/animated-beam.tsx";<AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />属性
动画光束
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 组件的类名。 |
containerRef | ref | - | 容器引用。 |
fromRef | ref | - | 光束起点元素的引用。 |
toRef | ref | - | 光束终点元素的引用。 |
curvature | number | 0 | 光束的弯曲度。 |
reverse | boolean | false | 光束是否反向。 |
持续时间 | number | 5 | 光束的持续时间。 |
延迟 | number | 0 | 光束的延迟时间。 |
pathColor | string | gray | 光束的颜色。 |
pathWidth | number | 2 | 光束的宽度。 |
pathOpacity | number | 0.2 | 光束的不透明度。 |
gradientStartColor | string | #ffaa40 | 渐变的起始颜色。 |
gradientStopColor | string | #9c40ff | 渐变的结束颜色。 |
startXOffset | number | 0 | 光束的起始X偏移量。 |
startYOffset | number | 0 | 光束的起始Y偏移量。 |
endXOffset | number | 0 | 光束的结束X偏移量。 |
endYOffset | number | 0 | 光束的结束Y偏移量。 |
鸣谢
- 感谢 @itsarghyadas 奠定此基础！