测试页面

一、电流边框测试

源数据来源于：https://reactbits.dev/animations/electric-border

Electric Card

这是一个带有电流边框效果的卡片组件。

高强度电流

更高的强度和更粗的边框，更明显的电流效果。

快速脉冲

duration: 1s

更快的动画频率，像电路脉冲一样。

纯净线条

关闭发光效果，只有电流扭曲。

⚡

紫色电弧

大圆角设计，现代感更强

组件属性

属性	类型	默认值	说明
color	string	'#00d4ff'	边框颜色
borderWidth	number	2	边框粗细(px)
borderRadius	number	8	圆角大小(px)
backgroundColor	string	'transparent'	内容区域背景色
intensity	number	30	电流扭曲强度
baseFrequency	number	0.01	噪声基础频率
duration	number	3	动画周期(秒)
glow	boolean	true	是否启用发光效果
glowIntensity	number	2	发光强度
glowColor	string	'currentColor'	发光颜色
width	string	'auto'	容器宽度
height	string	'auto'	容器高度
padding	string	'1.5rem'	内容区域内边距
hoverEffect	boolean	true	是否启用悬停放大效果
hoverScale	number	1.02	悬停放大比例

二、轨道图片测试

源数据来源于：https://reactbits.dev/animations/orbit-images

图片 1描述文字

图片 2描述文字

图片 3描述文字

图片 4描述文字

图片 5描述文字

图片 6描述文字

技术栈

环绕展示

项目 A

项目 B

项目 C

项目 D

组件属性

属性	类型	默认值	说明
images	ImageItem[]	[]	图片数组，每项包含 src/alt/title/description
radius	number	300	轨道半径(px)
imageSize	number	150	图片尺寸(px)
duration	number	0.8	过渡动画时间(秒)
autoPlay	boolean	true	是否自动播放
autoPlayInterval	number	3000	自动播放间隔(ms)
pauseOnHover	boolean	true	悬停时暂停
perspective	number	1000	3D 透视距离
tilt	number	0	轨道倾斜角度
showControls	boolean	true	显示左右控制按钮
showIndicators	boolean	true	显示底部指示器
showOverlay	boolean	true	显示悬停遮罩信息
direction	'clockwise' | 'counter-clockwise'	'clockwise'	旋转方向
startIndex	number	0	起始索引

事件

事件	参数	说明
click	(index, image)	点击图片时触发
change	(index)	当前索引变化时触发