Liquid Grid

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Developer Context / Usage Note: A dynamic liquid-like dot grid background that automatically computes the grid dimensions based on container sizing. Features gooey render filters, spring-physics dot nodes, cursor interaction, and automatic drop waves.

Installation

npm install @reactbytes/liquid-grid

Usage

import { LiquidGrid } from "@reactbytes/liquid-grid";

export default function Example() {
  return (
    <LiquidGrid />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | spacing | number | 56 | Distance in pixels between dots. Lower values create a denser grid. | | baseRadius | number | 12 | Resting size (radius in pixels) of the individual grid dots. | | springK | number | 0.09 | Spring stiffness / restoring tension constant. | | damp | number | 0.78 | Friction / damping factor applied to node velocities. | | gravityRadius | number | 210 | Influence radius of cursor interaction, in pixels. | | gravityMax | number | 20 | Max displacement force toward (positive) or away from (negative) cursor. | | bounceAmp | number | 12 | Base amplitude (strength) of wave displacement ripples. | | rowDelay | number | 0.055 | Delay in seconds for wave propagation between consecutive rows. | | decay | number | 4.2 | Exponential decay rate of the wave envelope over time. | | freq | number | 13 | Oscillation frequency of ripples, in radians per second. | | colSpread | number | 0.65 | Lateral Gaussian dispersion factor across columns. | | blur | number | 8 | CSS blur filter radius in pixels, driving the gooey liquid merge effect. | | contrast | number | 28 | CSS contrast filter threshold applied to sharpen blurred edges. | | dotColor | color | #ffffff | Fill color hex code of the gooey grid dots. | | bgColor | color | #000000 | Substrate background color hex code. | | autoDrops | boolean | true | Whether periodic spontaneous raindrop ripples are enabled. |

Presets

This component includes the following design presets:

• Liquid Mercury (liquid-mercury)
• Molten Lava (molten-lava)
• Neon Matrix (neon-matrix)
• Cyber Plastik (cyber-plastik)
• Jellyfish Bloom (jellyfish-bloom)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Open Source Libraries

• Canvas API - Rendering Engine

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Liquid Grid.