FBM Vector Shader

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

Installation

npm install @reactbytes/fbm-noise

Usage

import { FbmNoise } from "@reactbytes/fbm-noise";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | complex | boolean | false | Enables layered multi-octave FBM noise calculations for detailed fluid details. | | paused | boolean | false | Halts vector flow movement simulation. | | scale | number | 3 | Pattern scale zoom multiplier for the noise landscapes. | | speed | number | 0.1 | Rate of time flow progression in vector movements. | | mouseInfluence | number | 0.5 | Pointer warp impact strength scaling dynamic coordinate offsets. | | brightness | number | 1 | Global brightness intensity multiplier. | | seed | number | 43758.5453123 | Seed coordinate offset for the random generator algorithms. | | colorR | number | 1 | Red color channel bias factor. | | colorG | number | 1 | Green color channel bias factor. | | colorB | number | 1 | Blue color channel bias factor. |

Presets

This component includes the following design presets:

• Cosmic Aurora (nebula)
• Solar Tempest (fire)
• Ethereal Abyss (void)
• Toxic Quasar (matrix)
• Cybernetic Silk (neon)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Libraries

• Three.js Contributors - WebGL Abstraction Framework

Inspiration

• Liam Egan - Noise Algorithms Creator

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