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

npm install animated-dark-background

or

yarn add animated-dark-background

Usage

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

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <DarkBackground
        hueShift={30}
        noiseIntensity={0.1}
        scanlineIntensity={0.2}
        speed={1}
        scanlineFrequency={2}
        warpAmount={0.05}
        resolutionScale={1}
      />
      {/* Your content here */}
    </div>
  );
}

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.