ElyriMorph Grid
A WebGL morphing grid: every shape smoothly cycles between circle, square and cross, with each change rippling outward from the center. The grid is lens-warped, a few cells light up, and the lens follows the pointer.
Customize
Background
#141233Shape
#6ee7d8Accent
#ff8fb1Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content layered above the background |
color | string | '#141233' | Background color (hex) |
shapeColor | string | '#6ee7d8' | Shape color (hex) |
accentColor | string | '#ff8fb1' | Color of randomly lit cells (hex) |
density | number | 8 | Number of cells across the short side; higher means denser |
warp | number | 0 | Lens magnification strength, 0 disables it |
spread | number | 0.4 | Delay of the morph rippling outward from the center (0-0.6), 0 morphs everything at once |
accent | number | 0.03 | Fraction of cells that light up (0-1) |
speed | number | 3 | Animation speed multiplier |
interactive | boolean | true | Whether the lens center follows the pointer |
className | string | — | Extra class name |
Dependencies
WebGL