v0.0.1

FlipTiles

WebGL 实时渲染的立方体阵列:俯角透视下,黑曜石顶面、强调色金属侧面与高光倒角棱边整齐排布,翻滚波经过时立方体带着轻微回弹滚动 90° 翻出色面,投影与深槽辉光拉开纵深,指针处的立方体缓缓升起。

显示 Hero

Customize

侧面色
#4f6bff
高光色
#b8c4ff

Props

属性类型默认值说明
childrenReactNode—叠加在背景之上的内容
colorstring'#4f6bff'立方体侧面的强调色(hex),翻滚时翻到顶上的就是这一面
highlightColorstring'#b8c4ff'金属倒角与反光条的高光色(hex)
tileSizenumber72单个立方体加缝隙的宽度(像素)
speednumber1动画速度倍率
pattern'wave' | 'ripple' | 'drift''wave'翻滚编排:'wave' 成列扫过、'ripple' 从中心向外荡开、'drift' 成片有机漂移
interactivebooleantrue光源与指针处立方体升起是否跟随指针
classNamestring—自定义类名

依赖

WebGL