ElyriFlipTiles
A WebGL array of solid cubes seen in slight perspective: obsidian tops, metallic colored sides and polished beveled edges. Roll waves tip cubes 90° with a subtle spring to reveal their color, cast shadows and glowing grooves add depth, and cubes rise under the pointer.
Customize
Side color
#4f6bffHighlight
#b8c4ffProps
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content layered above the background |
color | string | '#4f6bff' | Accent color of the cube sides, revealed on top as cubes roll (hex) |
highlightColor | string | '#b8c4ff' | Bevel and reflection highlight color (hex) |
tileSize | number | 72 | Width of one cube plus its gap in pixels |
speed | number | 1 | Animation speed multiplier |
pattern | 'wave' | 'ripple' | 'drift' | 'wave' | Roll choreography: 'wave' sweeps in columns, 'ripple' spreads out from the center, 'drift' flows in organic patches |
interactive | boolean | true | Whether the light and rising cubes follow the pointer |
className | string | — | Extra class name |
Dependencies
WebGL