Cellular Automata

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

Installation

npm install @reactbytes/fractal-background

Usage

import { CellularAutomataBackground } from "@reactbytes/fractal-background";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | colorA | color | #050812 | Background/Void color stop. | | colorB | color | #1e1b4b | Mid-tone energy color. | | colorC | color | #818cf8 | Highlight/Strand color. | | speed | number | 0.5 | Velocity of the energy flow. | | scale | number | 1 | Zoom level of the noise patterns. Higher values show more detail. | | intensity | number | 1 | Global brightness multiplier. | | opacity | number | 1 | Transparency of the energy flow (0.0 to 1.0). | | vignetteIntensity | number | 0.6 | Intensity of the dark edges (0.0 to 1.0). | | blurAmount | number | 0 | CSS blur radius applied to the canvas. |

Presets

This component includes the following design presets:

• Electric Silk (electric-silk)
• Solar Winds (solar-winds)
• Deep Ocean (deep-ocean)
• Ethereal Mist (ethereal-mist)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Mathematical Foundations

• Simplex Noise - Algorithm
• Ken Perlin - Core Concept

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