npm install animated-dark-background

Animated Dark Background React Component

A highly customizable, animated dark background React component built with TypeScript and WebGL (OGL). Perfect for adding a visually appealing animated effect to your app or landing page.

Features

- Beautiful animated dark background using WebGL shaders
- Fully customizable via props (hue, noise, scanlines, speed, etc.)
- Lightweight and dependency-minimal (uses OGL)
- Easy integration into any React project

Installation

``bash npm install animated-dark-background`

or

`bash yarn add animated-dark-background`

`Usage`

`tsx import DarkBackground from 'animated-dark-background'; import 'animated-dark-background/dist/DarkBackground.css';

function App() { return (


              hueShift={30}
        noiseIntensity={0.1}
        scanlineIntensity={0.2}
        speed={1}
        scanlineFrequency={2}
        warpAmount={0.05}
        resolutionScale={1}
      />
      {/ Your content here /}


  );
}


Props

| Prop                | Type    | Default | Description |
|---------------------|---------|---------|-------------|
|

hueShift

          | number  | 0       | Shifts the hue of the background colors |
|

noiseIntensity

    | number  | 0       | Amount of noise overlay |
|

scanlineIntensity

 | number  | 0       | Intensity of scanline effect |
|

speed

             | number  | 0.5     | Animation speed |
|

scanlineFrequency

 | number  | 0       | Frequency of scanlines |
|

warpAmount

        | number  | 0       | Amount of warping effect |
|

resolutionScale

   | number  | 1       | Scale the rendering resolution |
Styling

The component uses a canvas with the class

darkveil-canvas`. You can override its style in your CSS if needed.

License

MIT

---

For more details, see the GitHub repository.