Poisson Disc Noise

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

Developer Context / Usage Note: A premium background simulation utilizing a self-contained SimpleNoise2D engine and O(N) spatial hash grid for real-time interactive Poisson-disc particle distribution. Supports mouse attraction, repulsion, and scaling modes.

Installation

npm install @reactbytes/poisson-noise

Usage

import { PoissonNoise } from "@reactbytes/poisson-noise";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | renderMode | select | dots | The aesthetic representation style of the particles or grid structures. | | colorTheme | select | monochrome | Curated harmonious color palette preset applied to render elements. | | mouseInfluence | select | repel | How the pointer alters particle positioning or local scaling. | | minRadius | number | 6 | Minimum particle exclusion/spacing radius. | | maxRadius | number | 35 | Maximum particle exclusion/spacing radius. | | maxParticles | number | 800 | Upper limit of active particles on screen. | | noiseScale | number | 0.003 | Zoom level/frequency of the 2D gradient noise field. | | noiseStrength | number | 1.8 | Force strength of the noise field applied to particle velocities. | | driftSpeed | number | 0.015 | Evolution rate/speed of the vector field over time. | | mouseRadius | number | 180 | Exclusion/attraction zone radius around the cursor. | | mouseIntensity | number | 1 | Force strength / intensity multiplier of the cursor interaction. | | isPlaying | boolean | true | Whether the animation loop is running or paused. |

Presets

This component includes the following design presets:

• Stellar (constellation)
• Cellular (cellular)
• Hyper Force (hyperforce)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

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