FlipTiles
WebGL 实时渲染的立方体阵列:俯角透视下,黑曜石顶面、强调色金属侧面与高光倒角棱边整齐排布,翻滚波经过时立方体带着轻微回弹滚动 90° 翻出色面,投影与深槽辉光拉开纵深,指针处的立方体缓缓升起。
Customize
侧面色
#4f6bff高光色
#b8c4ffProps
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
children | ReactNode | — | 叠加在背景之上的内容 |
color | string | '#4f6bff' | 立方体侧面的强调色(hex),翻滚时翻到顶上的就是这一面 |
highlightColor | string | '#b8c4ff' | 金属倒角与反光条的高光色(hex) |
tileSize | number | 72 | 单个立方体加缝隙的宽度(像素) |
speed | number | 1 | 动画速度倍率 |
pattern | 'wave' | 'ripple' | 'drift' | 'wave' | 翻滚编排:'wave' 成列扫过、'ripple' 从中心向外荡开、'drift' 成片有机漂移 |
interactive | boolean | true | 光源与指针处立方体升起是否跟随指针 |
className | string | — | 自定义类名 |
依赖
WebGL