Liquid Noise

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

Installation

npm install @reactbytes/liquid-noise

Usage

import { LiquidNoise } from "@reactbytes/liquid-noise";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | colors | string[] | ["#312e81","#5b21b6","#9d174d","#1e3a8a","#115e59","#4338ca"] | Array of up to 6 hex colors mapping out the fluid satin folds. | | backgroundColor | color | #030712 | Base canvas background tone underneath the liquid structure. | | speed | number | 0.45 | Tempo of the organic domain-warping folds. | | intensity | number | 1.2 | Luminance bloom and color blending power. | | grainIntensity | number | 0.03 | Intensity of the fine analog microfilm noise grain overlay. | | gradientSize | number | 1.1 | Scale modifier distorting the structural coordinates. | | gradientCount | number | 6 | The volume of complex color intersections evaluated. | | color1Weight | number | 1 | Mixing emphasis applied across odd index colors. | | color2Weight | number | 1 | Mixing emphasis applied across even index colors. | | uppercase | boolean | false | Forces nested child text elements to uppercase layouts. |

Presets

This component includes the following design presets:

• Midnight Aurora (Default) (midnight-aurora)
• Cyberpunk Glow (cyberpunk-neon)
• Deep Obsidian Moss (emerald-forest)
• Ethereal Pastel Quartz (rose-quartz)
• Magma & Amber (solar-flare)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Core Technologies

• WebGL 2 - GPU Hardware Pipeline

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