Dither Mesh

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

Installation

npm install @reactbytes/dither

Usage

import { Dither } from "@reactbytes/dither";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | spacing | number | 10 | The space between each dot in pixels. | | scale | number | 450 | The frequency scale of the Perlin noise wave. Larger values give smoother wave movements. | | intensity | number | 7 | The multiplier for Perlin noise heights, dictating the maximum dot size amplitude. | | duration | number | 2 | Loop duration of the GSAP stagger animation in seconds. | | stagger | number | 4 | The overall delay spread across the stagger effect grid. | | colorLight | color | #ffffff | The primary color representing the inner glowing core of the dots. | | colorDark | color | #0022aa | The secondary color representing the outer blur layer of the dots. | | colorBg | color | #000055 | The background canvas color. |

Presets

This component includes the following design presets:

• Default Matrix (default)
• Inferno Grid (inferno)
• Acid Rain (acid)
• Ghost Wave (ghost)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Libraries

• GSAP - Animation Engine

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