Velvet Noise

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

Installation

npm install @reactbytes/velvet-noise

Usage

import { VelvetNoise } from "@reactbytes/velvet-noise";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | cells | number | 4 | Number of horizontal columns or cells in the visual grid. | | stripes | number | 40 | Density frequency of simplex noise stripes. | | speed | number | 0.5 | Speed multiplier for the organic flowing animation. | | chromatic | number | 0.1 | RGB shift intensity creating the chromatic aberration offset. | | isPlaying | boolean | true | Toggle to pause or play the dynamic WebGL rendering loop. | | dpr | number | 1.5 | Resolution multiplier (Device Pixel Ratio scale factor). | | colorBg | color | #121212 | Hex color code for the deep base shader layer. | | colorFg | color | #000000 | Hex color code for the foreground simplex noise ripples. |

Presets

This component includes the following design presets:

• Dark Velvet (Default) (darkGreyVelvet)
• Obsidian Aberration (obsidianChroma)
• Charcoal Ripples (charcoalStatic)
• Extreme Horizon (abyssQuantum)
• Amethyst Haze (amethystHaze)
• Emerald Aurora (emeraldAurora)
• Oceanic Abyss (oceanicAbyss)
• Solar Crimson (solarEclipse)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Libraries

• WebGL2 - Renderer API

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