Liquid Stat Grid
Three statistic cells split by dashed rules, each hiding a liquid gradient backdrop that fades up on hover while the copy inverts to white. The backdrop is a six-stage WebGL2 chain: a flat plate, a mouse-tracked colour blob, a domain warp with chromatic aberration, two noise-blur passes and a second faster warp, each stage rendering into its own framebuffer at its own resolution scale and sampling the previous one. Fully procedural, so it ships no textures and no runtime dependencies.
96%
Returning teams report measurable progress against the goals they set in their first planning cycle.
1 in 6
Projects surface a blocking dependency during review that no one had tracked on the original plan.
2 of 3
Audited services showed configuration drift that never appeared in their own dashboards.
npx shadcn@latest add @compronents/liquid-stat-gridInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | LiquidStat[] | DEFAULT_STATS | Cells to render: value, optional suffix, description, and which colour variant backs it. |
| reveal | "hover" | "always" | "hover" | Whether the gradient waits for hover or runs constantly. |
| className / style | string / CSSProperties | undefined | Passed to the root wrapper for sizing and layout. |
revealtextEither hover, so a cell only animates while pointed at, or always.